{"action":"opened","issue":{"url":"https://api.github.com/repos/angular/material/issues/9869","repository_url":"https://api.github.com/repos/angular/material","labels_url":"https://api.github.com/repos/angular/material/issues/9869/labels{/name}","comments_url":"https://api.github.com/repos/angular/material/issues/9869/comments","events_url":"https://api.github.com/repos/angular/material/issues/9869/events","html_url":"https://github.com/angular/material/issues/9869","id":184175542,"number":9869,"title":"Parsing a registered style with Media Queries or keyframes produces incorrect rules","user":{"login":"natete","id":4098303,"avatar_url":"https://avatars.githubusercontent.com/u/4098303?v=3","gravatar_id":"","url":"https://api.github.com/users/natete","html_url":"https://github.com/natete","followers_url":"https://api.github.com/users/natete/followers","following_url":"https://api.github.com/users/natete/following{/other_user}","gists_url":"https://api.github.com/users/natete/gists{/gist_id}","starred_url":"https://api.github.com/users/natete/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/natete/subscriptions","organizations_url":"https://api.github.com/users/natete/orgs","repos_url":"https://api.github.com/users/natete/repos","events_url":"https://api.github.com/users/natete/events{/privacy}","received_events_url":"https://api.github.com/users/natete/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2016-10-20T09:15:10Z","updated_at":"2016-10-20T09:15:10Z","closed_at":null,"body":"**Actual Behavior**:\r\n -  `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.\r\n\r\nNow 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:\r\n\r\n```\r\n@media (min-width: 0) and (max-width: 700px) {\r\n\r\n  .md-THEME_NAME-theme .test-background {     \r\n    background-color: pink;\r\n  }\r\n\r\n  .md-THEME_NAME-theme p {\r\n    color: blue;\r\n    font-weight: bold;\r\n  }\r\n}\r\n``` \r\n\r\nWill be parsed:\r\n```\r\n@media (min-width: 0) and (max-width: 700px) {\r\n\r\n  .md-test-theme .test-background {     \r\n    background-color: pink;\r\n  }\r\n}\r\n\r\n.md-test-theme p {\r\n  color: blue;\r\n  font-weight: bold;\r\n}\r\n\r\n``` \r\n\r\nCausing a bad behavior because styles defined to p elements will be applied regardless the screen size.\r\n\r\n\r\n -  `What is the expected behavior?` Parsing a CSS should take into account nesting. In the example the correct result would be:\r\n```\r\n@media (min-width: 0) and (max-width: 700px) {\r\n\r\n  .md-test-theme .test-background {     \r\n    background-color: pink;\r\n  }\r\n\r\n  .md-test-theme p {\r\n    color: blue;\r\n    font-weight: bold;\r\n  }\r\n}\r\n``` \r\n\r\n\r\n**CodePen** (or steps to reproduce the issue): *\r\n -  `CodePen Demo which shows your issue:` http://codepen.io/natete/pen/BLGPbd\r\n -  `Details:` Second rule inside the media query is extracted from it causing the rules to be applied in a wrong manner.\r\n\r\n**Angular Versions**: *\r\n -  `Angular Version:` 1.5.8\r\n -  `Angular Material Version:` 1.1.1\r\n\r\n**Additional Information**:\r\n -  `Browser Type: *` all\r\n -  `Browser Version: *` all\r\n -  `OS: *` all\r\n -  `Stack Traces:`\r\n\r\n----\r\nShortcut to create a [new CodePen Demo](http://codepen.io/team/AngularMaterial/pen/bEGJdd).\r\nNote: `*` indicates required information. Without this information, your issue may be auto-closed.\r\n\r\n> Do not modify the titles or questions. Simply add your responses to the ends of the questions.\r\n  Add more lines if needed."}}
{"actor":{"display_login":"natete"}}