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.
/* 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" */@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; }import { primary } from './colors.css'; // will have similar effect console.log(primary); // -> #BF4040To 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 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