v4 - Are CSS variables required to be supported by Browser?

[savanesoff]

I know it seems like an odd question, but here it goes: 😇

I'm working on the project that uses proprietary Browser that does not support CSS vars. 😭
Using v3 I was able to configure TCSS such that its not an issue (gradients and other utils that require vars is still an issue, and I was able to disable those utils) , but am curious if its still the case with v4 since I'd really like us to move to v4 without spending too much time investigating it first. 😇

I'd appretiate if TCSS devs coiuld chime in...
@MattStypa @RobinMalfait @reinink @hacknug @lukewarlow

Thank a bunch! 🙏

PS, please feel free to tag devs who could help.

[wongjn]

Yep, v4 leans even more heavily into CSS variables. Apart from that though, it uses even more newer CSS features. So if you're using a browser that does not support CSS variables, you're going to have an even worser time in v4 probably.

[savanesoff]

Thanks @wongjn
Yeah, I figured that might be the case, but am not sure if the theme config compiles to CSS as is (with vars) or if the @theme directive only meant for TCSS compiler, in which case I'll be able to use v4 .

[wongjn]

@theme config does indeed compile to CSS variables. Utilities then use these CSS variables in their property values.

[savanesoff]

You're right, just reading this:
https://tailwindcss.com/docs/theme#using-your-theme-variables

That's not good news for me ha-ha-ha 🤣

[hacknug]

Take a look at this PostCSS plugin: https://github.com/metonym/postcss-inline-css-vars

Not sure if you'll be able to use it directly in your project but that is the approach I would take if I was on your shoes. Perhaps there is an equivalent solution for Lightning CSS (sorry but I'm not familiar with the ecosystem).

Also not familiar with the v4 codebase but there might be a way to inline custom properties (make sure to check the docs and the codebase). It's been a while since I last contributed anything significant to the core framework lol