{"action":"created","issue":{"url":"https://api.github.com/repos/postcss/postcss-import/issues/349","repository_url":"https://api.github.com/repos/postcss/postcss-import","labels_url":"https://api.github.com/repos/postcss/postcss-import/issues/349/labels{/name}","comments_url":"https://api.github.com/repos/postcss/postcss-import/issues/349/comments","events_url":"https://api.github.com/repos/postcss/postcss-import/issues/349/events","html_url":"https://github.com/postcss/postcss-import/issues/349","id":305802563,"number":349,"title":"Only compile vars in :root once","user":{"login":"jptaranto","id":89008,"avatar_url":"https://avatars0.githubusercontent.com/u/89008?v=4","gravatar_id":"","url":"https://api.github.com/users/jptaranto","html_url":"https://github.com/jptaranto","followers_url":"https://api.github.com/users/jptaranto/followers","following_url":"https://api.github.com/users/jptaranto/following{/other_user}","gists_url":"https://api.github.com/users/jptaranto/gists{/gist_id}","starred_url":"https://api.github.com/users/jptaranto/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jptaranto/subscriptions","organizations_url":"https://api.github.com/users/jptaranto/orgs","repos_url":"https://api.github.com/users/jptaranto/repos","events_url":"https://api.github.com/users/jptaranto/events{/privacy}","received_events_url":"https://api.github.com/users/jptaranto/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-03-16T04:58:34Z","updated_at":"2018-03-16T12:01:50Z","closed_at":null,"author_association":"NONE","body":"When using [postcss-css-variables](https://github.com/MadLittleMods/postcss-css-variables) it's possible to set the option `preserve: true` which will render both the fallback var value for IE11 _and_ the actual css var for virtually all modern browsers that now support css vars. For instance:\r\n\r\n```css\r\n:root {\r\n    --some-color: red;\r\n}\r\n\r\n.foo {\r\n    color: red;\r\n    color: var(--some-color);\r\n}\r\n```\r\n\r\nThis is the definition of progressive enhancement and one of the reasons to use postcss in the first place. Combine this approach with a few things and it's a recipe for disaster:\r\n\r\n1. Separate :root var declarations into different files/partials to improve file management.\r\n2. Use postcss-import to `@import` those partials.\r\n3. Seperate css files to improve initial page loading by not dropping the entire css payload in one go.\r\n\r\nThe result of this is a duplicate compiled :root declaration from each partial, in each css file, meaning potentially hundreds of duplicate blocks of codes across dozens of files.\r\n\r\nUsing gulp for our build processes, I've come up a with a few hacks that work in certain situations, like using [postcss-remove-root](https://github.com/cbracco/postcss-remove-root) to go back over the files I do not want duplicate var declarations in and remove them. But it's all rather hacky and comes with lots of comprimises.\r\n\r\nThis seems to me like a fundamental flaw in either postcss-import or postcss-css-variables. There needs to be a way to either:\r\n\r\n1. Consume vars in an `@import` so it can be compiled without rendering out the file into the output.\r\n2. Only render out `@import` files the first time they are encountered in a gulp stream, whilst retaining them to be compiled in the remainder of files (in the same way that `skipDuplicates` works for a single file, there could be a way for it to work across multiple files)."},"comment":{"url":"https://api.github.com/repos/postcss/postcss-import/issues/comments/373693045","html_url":"https://github.com/postcss/postcss-import/issues/349#issuecomment-373693045","issue_url":"https://api.github.com/repos/postcss/postcss-import/issues/349","id":373693045,"user":{"login":"RyanZim","id":17342435,"avatar_url":"https://avatars3.githubusercontent.com/u/17342435?v=4","gravatar_id":"","url":"https://api.github.com/users/RyanZim","html_url":"https://github.com/RyanZim","followers_url":"https://api.github.com/users/RyanZim/followers","following_url":"https://api.github.com/users/RyanZim/following{/other_user}","gists_url":"https://api.github.com/users/RyanZim/gists{/gist_id}","starred_url":"https://api.github.com/users/RyanZim/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/RyanZim/subscriptions","organizations_url":"https://api.github.com/users/RyanZim/orgs","repos_url":"https://api.github.com/users/RyanZim/repos","events_url":"https://api.github.com/users/RyanZim/events{/privacy}","received_events_url":"https://api.github.com/users/RyanZim/received_events","type":"User","site_admin":false},"created_at":"2018-03-16T12:01:50Z","updated_at":"2018-03-16T12:01:50Z","author_association":"COLLABORATOR","body":"I'm not sure what there is to be done on our end; we're resolving in the correct order according to spec, and we're not gonna change that."}}
{"actor":{"display_login":"RyanZim"}}