{"action":"created","issue":{"url":"https://api.github.com/repos/gatsbyjs/gatsby/issues/10080","repository_url":"https://api.github.com/repos/gatsbyjs/gatsby","labels_url":"https://api.github.com/repos/gatsbyjs/gatsby/issues/10080/labels{/name}","comments_url":"https://api.github.com/repos/gatsbyjs/gatsby/issues/10080/comments","events_url":"https://api.github.com/repos/gatsbyjs/gatsby/issues/10080/events","html_url":"https://github.com/gatsbyjs/gatsby/issues/10080","id":383339476,"node_id":"MDU6SXNzdWUzODMzMzk0NzY=","number":10080,"title":"Consider using postcss-import to make CSS variables inlinable from imports","user":{"login":"kripod","id":14854048,"node_id":"MDQ6VXNlcjE0ODU0MDQ4","avatar_url":"https://avatars3.githubusercontent.com/u/14854048?v=4","gravatar_id":"","url":"https://api.github.com/users/kripod","html_url":"https://github.com/kripod","followers_url":"https://api.github.com/users/kripod/followers","following_url":"https://api.github.com/users/kripod/following{/other_user}","gists_url":"https://api.github.com/users/kripod/gists{/gist_id}","starred_url":"https://api.github.com/users/kripod/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/kripod/subscriptions","organizations_url":"https://api.github.com/users/kripod/orgs","repos_url":"https://api.github.com/users/kripod/repos","events_url":"https://api.github.com/users/kripod/events{/privacy}","received_events_url":"https://api.github.com/users/kripod/received_events","type":"User","site_admin":false},"labels":[{"id":779050110,"node_id":"MDU6TGFiZWw3NzkwNTAxMTA=","url":"https://api.github.com/repos/gatsbyjs/gatsby/labels/type:%20feature%20or%20enhancement","name":"type: feature or enhancement","color":"c5def5","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":5,"created_at":"2018-11-22T00:38:25Z","updated_at":"2018-11-23T10:36:45Z","closed_at":null,"author_association":"CONTRIBUTOR","body":"<!--\r\n  Please fill out each section below, otherwise your issue will be closed.\r\n\r\n  Useful Links:\r\n  - Gatsby RFCs: https://github.com/gatsbyjs/rfcs\r\n  - How to Contribute: https://www.gatsbyjs.org/docs/how-to-contribute/\r\n  - How to File an Issue: https://www.gatsbyjs.org/docs/how-to-file-an-issue/\r\n\r\n  Before opening a new issue, please search existing issues:  https://github.com/gatsbyjs/gatsby/issues\r\n\r\n  ## A note on adding features to Gatsby and its official plugins\r\n\r\n  Every feature needs to strike a balance - complex features are less likely to be worked on, whether that complexity comes from design, implementation or ongoing   maintenance costs. On the other side, features that are useful to all (or most) of Gatsby's users are more likely to be accepted.\r\n\r\n  This means that not every feature request will be added to Gatsby, but hearing about what you want Gatsby to do is important. Don't be afraid to add a feature request!\r\n-->\r\n\r\n## Summary\r\n\r\nUsing [postcss-import](https://github.com/postcss/postcss-import), imported CSS rules could be inlined, making it possible to provide static fallbacks for CSS variables, greatly improving cross-browser support.\r\n\r\n### Basic example\r\n\r\nsrc/utils/variables.css:\r\n\r\n```css\r\n:root {\r\n  --primary-color: red;\r\n}\r\n```\r\n\r\nsrc/pages/index.css:\r\n\r\n```css\r\n@import '../utils/variables.css';\r\n\r\nbody {\r\n  color: var(--primary-color);\r\n    /*\r\n  Outputs:\r\n  color: red;\r\n  color: var(--primary-color);\r\n  */\r\n}\r\n```\r\n\r\n### Motivation\r\n\r\nIn the example above, `color: red;` provides a fallback for older browsers which don't support CSS variables. Other fallbacks or optimizations may also become possible by inlining imported CSS files."},"comment":{"url":"https://api.github.com/repos/gatsbyjs/gatsby/issues/comments/441206468","html_url":"https://github.com/gatsbyjs/gatsby/issues/10080#issuecomment-441206468","issue_url":"https://api.github.com/repos/gatsbyjs/gatsby/issues/10080","id":441206468,"node_id":"MDEyOklzc3VlQ29tbWVudDQ0MTIwNjQ2OA==","user":{"login":"kripod","id":14854048,"node_id":"MDQ6VXNlcjE0ODU0MDQ4","avatar_url":"https://avatars3.githubusercontent.com/u/14854048?v=4","gravatar_id":"","url":"https://api.github.com/users/kripod","html_url":"https://github.com/kripod","followers_url":"https://api.github.com/users/kripod/followers","following_url":"https://api.github.com/users/kripod/following{/other_user}","gists_url":"https://api.github.com/users/kripod/gists{/gist_id}","starred_url":"https://api.github.com/users/kripod/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/kripod/subscriptions","organizations_url":"https://api.github.com/users/kripod/orgs","repos_url":"https://api.github.com/users/kripod/repos","events_url":"https://api.github.com/users/kripod/events{/privacy}","received_events_url":"https://api.github.com/users/kripod/received_events","type":"User","site_admin":false},"created_at":"2018-11-23T10:36:45Z","updated_at":"2018-11-23T10:36:45Z","author_association":"CONTRIBUTOR","body":"@m-allanson Thank you for the detailed answer! While postcss-import may have unintended side effects, I don’t think that postcss-preset-env could do any harm to existing projects."}}
{"actor":{"display_login":"kripod"}}