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

css-modules
204 Stars 18 Forks MIT License 101 Commits 38 Opened issues

Description

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.

Usage

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

Aliases

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

Messages

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
}

Justification

See this PR for more background

License

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.