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

[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.

[clshortfuse]

@EladBezalel the attached PR was failing tests and wasn't committed. Might need a fresh attempt.

[Splaktar]

Some details on the given CodePen and this reproduction:

• You have to reproduce this on a small display (700px wide or smaller)
• You see white text instead of blue because the CSS rule is rendered as

.md-test-theme * {
    color: blue;
    font-weight: bold;
    font-size: 6px;
}

Instead of

@media (max-width: 700px) and (min-width: 0) .md-test-theme * {
    color: blue;
    font-weight: bold;
    font-size: 6px;
}

Broken

It should render this way