customizing variables generated by `light-dark` transform

[mayank99]

The light-dark() transform generates these variables:

--lightningcss-light: initial;
--lightningcss-dark: ;

As a library author, I want control over the variable names exposed in my compiled stylesheet. Especially when applications might already be using lightningcss themselves for the final bundle.

Would it be possible to allow changing the prefix?

--__lib-internal-light: initial;
--__lib-internal-dark: ;

If not out-of-the-box, then maybe through a custom transform?

[devongovett]

But they are not your variables, they are lightningcss variables. I think it's important that two libraries/files compiled independently by lightningcss can interact as expected. For example if some file sets color-scheme: light and another sets color-scheme: dark, the same variable names should be used to correctly emulate browser behavior. If each library uses its own variables, these won't necessarily line up.

Are you running into a real issue here or just a preference?

[mayank99]

I spent quite a bit of time thinking about this issue. While I don't like that the "lightningcss" prefixed variables show up in my generated CSS, I think your point about two independent libraries makes sense. However, an even better option might be to align on a prefix with postcss-light-dark; it would increase interop and make the stylesheets more tool-agnostic.

Since this is a pretty small issue, I'll close it out to help focus on other, more important issues.