Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

theming: parsing a registered style with Media Queries or keyframes produces incorrect rules #9869

Closed
@natete

Description

@natete

Actual Behavior:

  • What is the issue? * When a CSS stylesheet containing media queries (or keyframes or anything that can have nesting) is registered using the Theming Provider, Angular Material processes it in a wrong way causing an incorrect result.

Now the string representing the CSS is split using a regex that doesn't take into account nesting, causing nested rules to be considered independent rules. For example:

@media (min-width: 0) and (max-width: 700px) {

  .md-THEME_NAME-theme .test-background {     
    background-color: pink;
  }

  .md-THEME_NAME-theme p {
    color: blue;
    font-weight: bold;
  }
}

Will be parsed:

@media (min-width: 0) and (max-width: 700px) {

  .md-test-theme .test-background {     
    background-color: pink;
  }
}

.md-test-theme p {
  color: blue;
  font-weight: bold;
}

Causing a bad behavior because styles defined to p elements will be applied regardless the screen size.

  • What is the expected behavior? Parsing a CSS should take into account nesting. In the example the correct result would be:
@media (min-width: 0) and (max-width: 700px) {

  .md-test-theme .test-background {     
    background-color: pink;
  }

  .md-test-theme p {
    color: blue;
    font-weight: bold;
  }
}

CodePen (or steps to reproduce the issue): *

  • CodePen Demo which shows your issue: http://codepen.io/natete/pen/BLGPbd
  • Details: Second rule inside the media query is extracted from it causing the rules to be applied in a wrong manner.

Angular Versions: *

  • Angular Version: 1.5.8
  • Angular Material Version: 1.1.1

Additional Information:

  • Browser Type: * all
  • Browser Version: * all
  • OS: * all
  • Stack Traces:

Shortcut to create a new CodePen Demo.
Note: * indicates required information. Without this information, your issue may be auto-closed.

Do not modify the titles or questions. Simply add your responses to the ends of the questions.
Add more lines if needed.

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions