Leveraging CSS Variables in JavaScript Configurations

[douglaszaltron]

An intriguing approach in web development involves harnessing CSS variables within JavaScript files by transforming values to utilize CSS variables in JSON and JavaScript files. This technique is particularly handy when we aim to utilize CSS variables that are globally defined within JavaScript files.

For instance, when creating a preset for Tailwind CSS, I generate the JavaScript configurations for the theme. However, I desire to employ the CSS variables seamlessly within these configurations. This integration not only streamlines development but also enhances the flexibility and maintainability of the codebase, facilitating smoother collaboration and iteration.

export default {
  palette: {
    grey: {
      "100": "var(--palette-grey-100)",
    },
  },
}

[lukasoppermann]

@douglaszaltron why did you close this?

[douglaszaltron]

@douglaszaltron why did you close this?

I clicked by mistake.🤦‍♂️

[douglaszaltron]

I'm testing some options because upon closer inspection, the JavaScript export might not have the prefix, whereas the CSS value, indeed, might require the prefix.

draft:

What do you think, Lukas? Any suggestions?

[lukasoppermann]

Wait, why do we need cssPrefix?

Can't we compile css in one step and in js we assume the css exists? Or are you saying you want to be able to have a different prefix for css and js or no prefix for js?

[douglaszaltron]

Wait, why do we need cssPrefix?

Can't we compile css in one step and in js we assume the css exists? Or are you saying you want to be able to have a different prefix for css and js or no prefix for js?

In the case of js not having a prefix and css having one, it is more common for css to have the prefix.

Example

[lukasoppermann]

Hey @douglaszaltron, sorry, I just noted that I completely misread this PR.

So what this does is it replaces the value of a token with it's own name as a css variable.
To me that makes no sense. I thought you were targeting the references.

E.g. danger.$value: {base.red} would be turned into danger: var(--base-red).

So do you want to target the reference or are you really looking for replacing a variables value with it's own name.