postcss-modules-values (4.0.0)
Published 2026-02-24 14:03:08 +00:00 by atheaadmin
Installation
registry=npm install postcss-modules-values@4.0.0"postcss-modules-values": "4.0.0"About this package
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: 0 0 10px secondary;
}
@media bp-small {
.header {
box-shadow: 0 0 4px secondary;
}
}
@media bp-large {
.header {
box-shadow: 0 0 20px 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.
Dependencies
Dependencies
| ID | Version |
|---|---|
| icss-utils | ^5.0.0 |
Development Dependencies
| ID | Version |
|---|---|
| coveralls | ^3.1.0 |
| eslint | ^7.10.0 |
| eslint-config-prettier | ^6.12.0 |
| husky | ^4.3.0 |
| jest | ^26.5.2 |
| lint-staged | ^10.4.0 |
| postcss | ^8.1.0 |
| prettier | ^2.1.2 |
Peer Dependencies
| ID | Version |
|---|---|
| postcss | ^8.1.0 |
Keywords
css
modules
postcss