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
Description
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/BLGPbdDetails:
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.8Angular Material Version:
1.1.1
Additional Information:
Browser Type: *
allBrowser Version: *
allOS: *
allStack 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.