Theming is not possible

[hypercube-software]

CSS modules are great, but I after webpack build, all generated names are hidden in the bundle. It should be great to generate a single mapping file that contain:

<file>|<style name>=<mangled name>

for instance

/src/widgets/MyComponent.css|title = _2IezJF1AI1wN8JrvVVyB9-

Without this, I can't do that:
An external CSS (not a CSS Module, a regular one, a THEME written by my client) that contain
keywords like @MyComponent.title@ that could be transformed in _2IezJF1AI1wN8JrvVVyB9-
before putting it in prod.

With that, My client could do theming with rules like:

.@MyComponent.title@ {
  background-color: #30FF36 !important;
}

Actually, I'm stuck. And no, theming with inline styles is not a solution. I want to use :hover or whatever I want.

What do you think about this idea ?
Note: my requirement is that the application can change it's theme at runtime and the theme is not
defined at development time. it is not predefined themes.

Regards.
Eric.

[developit]

Can't you just use deterministic local names? The configuration would just be:

{
    test: /.css/,
    loader: 'css-loader?localIdentName=[path][name]'
}

Example:

/* style.css */
.foo {
    background-color: #30FF36;
}

import { foo } from './style.css';
console.log( foo );
// "style_foo"

[hypercube-software]

Indeed, it would be the easiest thing to do. A hash would be more compact... anyway, I will go with your idea.

[developit]

Glad I could help! 👍