Skip to content
Pass arbitrary constants between your module files
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
test chore: update deps and docs (#3) May 7, 2019
.eslintrc chore(deps): update Nov 23, 2018
.gitignore Dependency update & remove lib directory Jan 28, 2016
.npmignore dont ignore lib dir for npm, only git Aug 15, 2016
.travis.yml chore: update deps and docs (#3) May 7, 2019
LICENSE
README.md chore: update deps and docs (#3) May 7, 2019
package.json
yarn.lock

README.md

CSS Modules: Values

Pass arbitrary values between your module files

Usage

/* colors.css */
@value primary: #BF4040;
@value secondary: #1F4F7F;

.text-primary {
  color: primary;
}

.text-secondary {
  color: secondary;
}
/* breakpoints.css */
@value small: (max-width: 599px);
@value medium: (min-width: 600px) and (max-width: 959px);
@value large: (min-width: 960px);
/* my-component.css */
/* alias paths for other values or composition */
@value colors: "./colors.css";
/* import multiple from a single file */
@value primary, secondary from colors;
/* make local aliases to imported values */
@value small as bp-small, large as bp-large from "./breakpoints.css";
/* value as selector name */
@value selectorValue: secondary-color;

.selectorValue {
  color: secondary;
}

.header {
  composes: text-primary from colors;
  box-shadow: 0 0 10px secondary;
}

@media bp-small {
  .header {
    box-shadow: 0 0 4px secondary;
  }
}
@media bp-large {
  .header {
    box-shadow: 0 0 20px secondary;
  }
}

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" */

Justification

See this PR for more background

License

ISC

With thanks

  • Mark Dalgleish
  • Tobias Koppers
  • Josh Johnston

Glen Maddern, 2015.

You can’t perform that action at this time.