Need help with postcss-icss-values?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

204 Stars 18 Forks MIT License 101 Commits 43 Opened issues


Pass arbitrary constants between your module files

Services available


Need anything else?

Contributors list

postcss-icss-values Build Status

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
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


To avoid 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

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.