Do we need to resolve custom properties?

[samanpwbb]

With #970 - our browser support targets all support css custom properties. Should we revise our build system to convert the variables option to a set of :root CSS properties? Would save us from needing to resolve every variable in our CSS at build time.

Are there costs to doing this? Likely compressed file size would not be impacted but could time to first paint take a hit? Here's an article on CSS variable performance, but it exclusively discusses the performance of changing variables at runtime: https://lisilinhart.info/posts/css-variables-performance/ and after some quick looking, couldn't find any existing documentation of the performance cost of using variables.

[katydecorah]

I haven't come across anything that suggests that CSS variables could negatively impact performance. In examining performance, I've recently started creating reduced tests sites on staging and running Lighthouse (via CLI/script) to compare a change before and after (running Lighthouse 5 times to counter variability and then taking the average). I've found this practice helpful since I can quantify the impact and use that as a driver for making decisions.

Also, CSS variables can make introducing a dark theme easier (ref #954) if we decide to add that in the future.