CSS Modules: Values

Pass arbitrary values between your module files

Usage

/* colors.css */@value primary:#BF4040;
@value secondary:#1F4F7F;
.text-primary {
color: primary;
}
.text-secondary {
color: secondary;
}

/* breakpoints.css */@value small: (max-width:599px);
@value medium: (min-width:600px) and (max-width:959px);
@value large: (min-width:960px);

/* my-component.css *//* alias paths for other values or composition */@value colors:"./colors.css";
/* import multiple from a single file */@value primary, secondary from colors;
/* make local aliases to imported values */@value small as bp-small, large as bp-large from"./breakpoints.css";
/* value as selector name */@value selectorValue: secondary-color;
.selectorValue {
color: secondary;
}
.header {
composes: text-primary from colors;
box-shadow:0010px secondary;
}
@media bp-small {
.header {
box-shadow:004px secondary;
}
}
@media bp-large {
.header {
box-shadow:0020px secondary;
}
}

If you are using Sass along with this PostCSS plugin, do not use the colon : in your @value definitions. It will cause Sass to crash.

Note also you can import multiple values at once but can only define one value per line.

@value a: b, c: d; /* defines a as "b, c: d" */

License

ISC

With thanks

• Mark Dalgleish
• Tobias Koppers
• Josh Johnston

---

Glen Maddern, 2015.