postcss-icss-values

by css-modules

css-modules / postcss-icss-values

Pass arbitrary constants between your module files

205 Stars 18 Forks Last release: over 3 years ago (v2.0.0) MIT License 101 Commits 13 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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.