Name: postcss-icss-values
Owner: css-modules
Description: Pass arbitrary constants between your module files
Created: 2015-09-19 08:38:28.0
Updated: 2018-05-23 09:19:02.0
Pushed: 2017-06-23 20:33:53.0
Homepage: null
Size: 117
Language: JavaScript
GitHub Committers
| User | Most Recent Commit | # Commits |
|---|
Other Committers
| User | Most Recent Commit | # Commits |
|---|
PostCSS plugin for css modules to pass arbitrary values between your module files.
css([ require('postcss-icss-values') ])
See PostCSS docs for examples for your environment.
olors.css */
ue primary: #BF4040;
r without colon for preprocessors */
ue secondary #1F4F7F;
el {
ckground: primary;
ransforms to */
ort {
imary: #BF4040;
condary: #1F4F7F
el {
ckground: #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.
ue a: b, c: d; /* defines a as "b, c: d" */
ue primary, secondary from './colors.css';
el {
ckground: secondary;
ransforms to similar exports */
ort('./colors.css') {
value__primary__0: primary;
value__secondary__1: secondary
ort {
imary: __value__primary__0; /* this long names will be mapped to imports by your loader */
condary: __value__secondary__1
el {
ckground: __value__secondary__1;
rt { primary } from './colors.css';
ill have similar effect
ole.log(primary); // -> #BF4040
Do not conflict between names you are able to import values with aliases
ue small as bp-small, large as bp-large from './breakpoints.css';
ue (
all as t-small,
rge as t-large
om './typo.css';
ia bp-small {
oo {
font-size: t-small;
postcss-icss-values passes result.messages for each declared or imported value
ugin: 'postcss-icss-values',
pe: 'icss-value',
me: string, // exported identifier
lue: string // generated imported identifier or value
See this PR for more background
MIT © Glen Maddern and Bogdan Chadkin, 2015