I have created a simple website that compares which CSS variable features are working with native CSS variables support vs. postcss-custom-properties and vs. postcss-css-variables. Anyone has pros and cons. You always have to think which features you need in your project and choose correct solution. If you need to support just modern browsers (latest Chrome, Firefox, Safari, Edge, excl. IE 11) the best choice is native CSS variables support without post processors plugins which cause many features working wrong. If you need to support older browsers you have to use post processors but you will be very limited what about the features. Owner of this plugin can check it and decide which features can be fixed/supported.
Hi @nolimitdev, the results are interesting, but they ignore PostCSS CSS Variables’ Caveats section, and that’s not very helpful to users of either plugin.
I have created a simple website that compares which CSS variable features are working with native CSS variables support vs. postcss-custom-properties and vs. postcss-css-variables. Anyone has pros and cons. You always have to think which features you need in your project and choose correct solution. If you need to support just modern browsers (latest Chrome, Firefox, Safari, Edge, excl. IE 11) the best choice is native CSS variables support without post processors plugins which cause many features working wrong. If you need to support older browsers you have to use post processors but you will be very limited what about the features. Owner of this plugin can check it and decide which features can be fixed/supported.
=> CSS variables features support comparison