Hey Zak,
Thanks for reading and for taking the time to give me feedback!
I think the example I gave is too simple to really highlight how useful this method is.
It only provides marginal benefit here, but say you were working on a large project with a design team. The designers could export CSS tokens (colours, spacing, sizes) from their tool into a JSON file, which you can read and turn into CSS variables using this CSS env() setup.
And anytime design needs to update a colour, they re-export the design tokens and the application will automatically be updated.
That’d greatly reduce the chance of error in, and the effort required to, manually copy style values from designs to the application.
Also, I should’ve made it clear that there is no extra transpilation step here. Just that those files are consumed by the PostCSS plugin when the app is built.
Do you have any other suggestions re: sharing variables between JS and CSS? Or do you think it’s not actually a problem? I’d love to hear more.