search

MadLittleMods / postcss-css-variables

PostCSS plugin to transform CSS Custom Properties(CSS variables) syntax into a static representation
https://madlittlemods.github.io/postcss-css-variables/playground/
Other
542 stars 61 forks source link

Extract rules with resolved variables to another stylesheet #59

Open tawgul opened 7 years ago

tawgul commented 7 years ago

Hi.

CSS Variable are quite well supported but are not in IE11<=11 and Android < 5.

So I was thinking if we could take the calculated rules and move to external file?

And load this file with JS (after detecting support for CSS variables)?

MadLittleMods commented 7 years ago

This plugin only compiles statically and isn't an active polyfill/shim to be loaded in the browser.

If you wanted to use this plugin you could conditionally load in a stylesheet that ran through this plugin.

Otherwise you will probably be better off looking for a "CSS custom properties polyfill".

tawgul commented 7 years ago

You get me wrong. I use it already with Gulp and it works fine and I like the preserve:true option to have the computed values for IE11 and original ones for other browsers.

And I was thinking of that when you get all the variables and create the computed values to extract them to external file (so you grab them into array and at the end we create a new file with declarations with computed values).

This way I could leave original variables for modern browsers (so original file is intact) and a new file with computed declarations could be served for browsers not supporting CSS Variables.

MadLittleMods commented 7 years ago

@tawg It's probably possible, create a new root to attach the resolved rules to, see https://github.com/MadLittleMods/postcss-css-variables/blob/6baa5ef4b8ea13a9b6b2e304192e0e786a1fc20c/index.js#L191

I'd have to dive deeper on how best to support saving out multiple files (any other plugins that do that save out multiple files?). Feel free to create a PR if you are thinking of something slick 😀

tawgul commented 7 years ago

OK.

Mangatt commented 4 years ago

We want to go this way as well for our websites. I think it's much more better approach to conditionally load old IE CSS than pollute all CSS with fallbacks.

This plugin is not able to keep just transformed rules instead of complete file?

MadLittleMods commented 4 years ago

@Mangatt Not currently possible. But is feasible where I linked some code above. I don't have something specific in mind to solve this.