{"action":"created","issue":{"url":"https://api.github.com/repos/zeit/styled-jsx/issues/433","repository_url":"https://api.github.com/repos/zeit/styled-jsx","labels_url":"https://api.github.com/repos/zeit/styled-jsx/issues/433/labels{/name}","comments_url":"https://api.github.com/repos/zeit/styled-jsx/issues/433/comments","events_url":"https://api.github.com/repos/zeit/styled-jsx/issues/433/events","html_url":"https://github.com/zeit/styled-jsx/issues/433","id":314474144,"number":433,"title":"Comment before corrupts keyframes","user":{"login":"jaydenseric","id":1754873,"avatar_url":"https://avatars0.githubusercontent.com/u/1754873?v=4","gravatar_id":"","url":"https://api.github.com/users/jaydenseric","html_url":"https://github.com/jaydenseric","followers_url":"https://api.github.com/users/jaydenseric/followers","following_url":"https://api.github.com/users/jaydenseric/following{/other_user}","gists_url":"https://api.github.com/users/jaydenseric/gists{/gist_id}","starred_url":"https://api.github.com/users/jaydenseric/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jaydenseric/subscriptions","organizations_url":"https://api.github.com/users/jaydenseric/orgs","repos_url":"https://api.github.com/users/jaydenseric/repos","events_url":"https://api.github.com/users/jaydenseric/events{/privacy}","received_events_url":"https://api.github.com/users/jaydenseric/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-04-16T01:39:16Z","updated_at":"2018-04-16T19:57:05Z","closed_at":null,"author_association":"NONE","body":"#### Do you want to request a *feature* or report a *bug*?\r\n\r\nBug.\r\n\r\n#### What is the current behavior?\r\n\r\nAdding a comment before keyframes corrupts the keyframes. Discovered when searching for a workaround to https://github.com/zeit/styled-jsx/issues/432.\r\n\r\n#### If the current behavior is a bug, please provide the steps to reproduce and possibly a minimal demo or testcase in the form of a Next.js app, CodeSandbox URL or similar\r\n\r\nIn:\r\n\r\n```jsx\r\nconst FadeIn = ({ children }) => (\r\n  <div>\r\n    {children}\r\n    <style jsx>{`\r\n      /* Comment. */\r\n      @keyframes fadeIn {\r\n        from {\r\n          opacity: 0;\r\n        }\r\n      }\r\n      div {\r\n        animation: fadeIn 1s;\r\n      }\r\n    `}</style>\r\n  </div>\r\n)\r\n```\r\n\r\nOut:\r\n\r\n```css\r\n@keyframes fadeIn from.jsx-4218845107{opacity:0;}div.jsx-4218845107{-webkit-animation:fadeIn-jsx-4218845107 1s;animation:fadeIn-jsx-4218845107 1s;}\r\n```\r\n\r\nI don't think this is a stylis issue, because adding this input in [stylis.js.org](https://stylis.js.org) seems to work ok:\r\n\r\n```css\r\n/* @scope .component-x */\r\n\r\n/* Comment. */\r\n@keyframes fadeIn {\r\n  from {\r\n    opacity: 0;\r\n  }\r\n}\r\n```\r\n\r\n#### What is the expected behavior?\r\n\r\nValid CSS keyframes are created:\r\n\r\n```css\r\n@-webkit-keyframes fadeIn-jsx-4272462935{from{opacity:0;}}@keyframes fadeIn-jsx-4272462935{from{opacity:0;}}div.jsx-4272462935{-webkit-animation:fadeIn-jsx-4272462935 1s;animation:fadeIn-jsx-4272462935 1s;}\r\n```\r\n\r\n#### Environment (include versions)\r\n\r\n* OS: macOS v10.13.4\r\n* Browser: Chrome v65.0.3325.181\r\n* styled-jsx (version): v2.2.6\r\n\r\n#### Did this work in previous versions?\r\n\r\nUnsure."},"comment":{"url":"https://api.github.com/repos/zeit/styled-jsx/issues/comments/381729311","html_url":"https://github.com/zeit/styled-jsx/issues/433#issuecomment-381729311","issue_url":"https://api.github.com/repos/zeit/styled-jsx/issues/433","id":381729311,"user":{"login":"giuseppeg","id":711311,"avatar_url":"https://avatars3.githubusercontent.com/u/711311?v=4","gravatar_id":"","url":"https://api.github.com/users/giuseppeg","html_url":"https://github.com/giuseppeg","followers_url":"https://api.github.com/users/giuseppeg/followers","following_url":"https://api.github.com/users/giuseppeg/following{/other_user}","gists_url":"https://api.github.com/users/giuseppeg/gists{/gist_id}","starred_url":"https://api.github.com/users/giuseppeg/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/giuseppeg/subscriptions","organizations_url":"https://api.github.com/users/giuseppeg/orgs","repos_url":"https://api.github.com/users/giuseppeg/repos","events_url":"https://api.github.com/users/giuseppeg/events{/privacy}","received_events_url":"https://api.github.com/users/giuseppeg/received_events","type":"User","site_admin":false},"created_at":"2018-04-16T19:57:05Z","updated_at":"2018-04-16T19:57:05Z","author_association":"COLLABORATOR","body":"@jaydenseric are you using any styled-jsx plugin?"}}
{"actor":{"display_login":"giuseppeg"}}