Search code examples
cssreactjspostcsscss-modules

Using css modules, how can I use composes to include a list of variables for colors

I am using css modules and post-css. I have added the post-css-simple-vars plugin

colors.css

$orange:   #ff6600;
$blue:   #056ef0;

In my button.css file, how do I use composition so I can reuse variables in colors.css?

button.css

.button {
    composes: * from '../styles/colors.css';
    background-color: $orange;
}
Solution

  • The best approach I have found so far is to export your variables as @value's using the postcss-modules-values plugin

    colors.css

    @value blue: #0c77f8;
@value red: #ff0000;
@value white: #fff;

    button.css

    @value colors: "./colors.css";
@value blue, white, red from colors;

.button {
  color: blue;
  background-color: red;
}

    Check out css-module-npm-boilerplate for an example