Usage for Themes

I am really excited about this project. One thing I haven’t wrapped my head around is how one could use these values to create “theme-able” components. Let’s say there are some variables that allow customization of a component - things like colors and fonts. Since the component’s css module has to import its values from some concrete file, I see no way how one could switch between two css files defining different values.

One could create two css modules that differ only in values, but then I would have to duplicate all the rules.

Basically, I wonder what would be the counterpart of the following SASS code:

// component.scss
.my-component {
   background-color: $my-component-background-color;
}

// theme-a.scss
$my-component-background-color: green;
@import "my-component"

// theme-b.scss
$my-component-background-color: red;
@import "my-component"

Or is this simply something css module values are not supposed to solve?

[markdalgleish]

I’m thinking that variables could become another first class, local-by-default feature of CSS Modules.

Values do a good job of allowing you to be explicit about variable dependencies between modules, but it certainly doesn’t enforce it. I really like the guarantees that locally scoped classes and animations currently provide, and I think that variables are another candidate for this.

I propose that the following:

:root { --color-primary: blue; }

…would be compiled to this:

:root { --HASH: blue; }

Then if you want to override this variable, you explicitly need to import it. Importing and overriding a variable could look something like this, perhaps:

@value --color-primary from './variables.css`;

.table { --color-primary: green; }

Which, of course, is also compiled into this:

.table { --HASH: green; }

Thoughts?

[andywer]

Hey there! Even though that issue seems to approach its end of life… I just published a plugin to address this problem: https://github.com/andywer/postcss-theme

Maybe that’s some help for you, @SpencerCDixon?