PostCSS plugin for CSS Modules to pass arbitrary values between your module files

Downloads in past


203422.0.26 years ago7 years agoMinified + gzip package size for postcss-icss-values in KB


postcss-icss-values !Build Statustravis-imgtravis
PostCSS plugin for css modules to pass arbitrary values between your module files.


postcss([ require('postcss-icss-values') ])

See PostCSS docs for examples for your environment.

Export value

/* colors.css */

@value primary: #BF4040;
/* or without colon for preprocessors */
@value secondary #1F4F7F;

.panel {
  background: primary;

/* transforms to */

:export {
  primary: #BF4040;
  secondary: #1F4F7F

.panel {
  background: #BF4040;

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" */

Importing value

@value primary, secondary from './colors.css';

.panel {
  background: secondary;

/* transforms to similar exports */

:import('./colors.css') {
  __value__primary__0: primary;
  __value__secondary__1: secondary
:export {
  primary: __value__primary__0; /* this long names will be mapped to imports by your loader */
  secondary: __value__secondary__1

.panel {
  background: __value__secondary__1;

Importing value in JS

import { primary } from './colors.css';
// will have similar effect
console.log(primary); // -> #BF4040


Do not conflict between names you are able to import values with aliases
@value small as bp-small, large as bp-large from './breakpoints.css';
@value (
  small as t-small,
  large as t-large
) from './typo.css';

@media bp-small {
  .foo {
    font-size: t-small;


postcss-icss-values passes result.messages for each declared or imported value
  plugin: 'postcss-icss-values',
  type: 'icss-value',
  name: string, // exported identifier
  value: string // generated imported identifier or value


See this PR for more background


MIT © Glen Maddern and Bogdan Chadkin, 2015