More control over CSS modules dashed-idents naming

[jacobrask]

In our design system we have a public API consisting of class names and CSS variables. We also have some CSS variables that we consider implementation details that we don't want to leak to consumers, and thus want to hash/rename.

Right now if we set a pattern like [hash]_[local] this will apply to both class names and CSS variables.

For example

:root {
  --_color-blue: blue;
  --color-foreground-action: var(--_color-blue);
}
a {
  color: var(--color-foreground-action);
}

I want the --_color-blue variable to be mangled with a hash. There are other more practical use cases like controlling values with data- attributes without presenting the CSS variable as a public API.

We currently have a csstree transform mangling variables prefixed with _, which achieves what we want but is not a very obvious syntax.

Doing the following and mangling all non-global variables would be a better syntax, but with lightningcss it would currently also add hashes to the class name unless we specify :global on every single selector.

:root {
  --color-blue: blue;
  --color-foreground-action: var(--color-blue);
}
a {
  color: var(--color-foreground-action from global);
}

[devongovett]

I think the custom transform API I'm working on (#363) could help with this!

[devongovett]

The custom transform API is now released. See https://lightningcss.dev/transforms.html. Hopefully you're able to solve your case with that. If it becomes a common enough request we could add more options to Lightning CSS core, but at least now it is possible.

[jacobrask]

The custom transform API is great!

I created a transform that wraps any class selectors in :global(), preventing them from being transformed by CSS modules.

I guess I could do a similar transform to add from global to any CSS custom property that isn't explicitly imported from another module, to prevent it from being transformed, or change them from a dashed-ident to var.

I'd still be blocked by #102 from relying on the built-in CSS modules transforms though. I wonder if it could be generalised or exposed somehow, so that we could transform a node's name into something like [hash]-${name} and Lightning would do the same transform as it would've done with CSS modules enabled?

[kizu]

@devongovett Should this issue be reopened, as the current custom transforms API does not allow changing the definitions of the custom properties to be global?