{"action":"closed","issue":{"url":"https://api.github.com/repos/zeit/styled-jsx/issues/420","repository_url":"https://api.github.com/repos/zeit/styled-jsx","labels_url":"https://api.github.com/repos/zeit/styled-jsx/issues/420/labels{/name}","comments_url":"https://api.github.com/repos/zeit/styled-jsx/issues/420/comments","events_url":"https://api.github.com/repos/zeit/styled-jsx/issues/420/events","html_url":"https://github.com/zeit/styled-jsx/issues/420","id":304226673,"number":420,"title":"!important breaks CSS when used with jsx-scss plugin","user":{"login":"Vadorequest","id":3807458,"avatar_url":"https://avatars2.githubusercontent.com/u/3807458?v=4","gravatar_id":"","url":"https://api.github.com/users/Vadorequest","html_url":"https://github.com/Vadorequest","followers_url":"https://api.github.com/users/Vadorequest/followers","following_url":"https://api.github.com/users/Vadorequest/following{/other_user}","gists_url":"https://api.github.com/users/Vadorequest/gists{/gist_id}","starred_url":"https://api.github.com/users/Vadorequest/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Vadorequest/subscriptions","organizations_url":"https://api.github.com/users/Vadorequest/orgs","repos_url":"https://api.github.com/users/Vadorequest/repos","events_url":"https://api.github.com/users/Vadorequest/events{/privacy}","received_events_url":"https://api.github.com/users/Vadorequest/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2018-03-12T02:58:57Z","updated_at":"2018-03-12T17:43:36Z","closed_at":"2018-03-12T17:43:36Z","author_association":"NONE","body":"I followed https://github.com/zeit/next.js/tree/canary/examples/with-styled-jsx-scss example.\r\n\r\nI just noticed that when using `!important`, it breaks the rendered css.\r\n\r\n```css\r\n        <style jsx global>{`\r\n          .loan-advisor {\r\n            * {\r\n              font-family: ${theme.font};\r\n            }\r\n\r\n            b {\r\n             color: ${theme.primaryColor} !important;\r\n            }\r\n\r\n        `}</style>\r\n```\r\n\r\n![image](https://user-images.githubusercontent.com/3807458/37263692-89531bf4-25a9-11e8-9985-07b31cb37316.png)\r\n\r\nI also just noticed I don't need to use !important (due to the way styled-jsx works), but if that's the expected behaviour then a note in the README would be great :)\r\n\r\nBy removing all `!important` rules, everything worked as expected."}}
{"actor":{"display_login":"giuseppeg"}}