postcss-modules-scope eslint travis-ci npm

A CSS Modules transform to extract export statements from local-scope classes

3 years after

CSS Modules: Scope Locals & Extend

Build Status

Transforms:

:local(.continueButton) {
  color: green;
}

into:

:export {
  continueButton: __buttons_continueButton_djd347adcxz9;
}
.__buttons_continueButton_djd347adcxz9 {
  color: green;
}

so it doesn't pollute CSS global scope and can be simply used in JS like so:

import styles from './buttons.css'
elem.innerHTML = `<button class="${styles.continueButton}">Continue</button>`

Composition

Since we're exporting class names, there's no reason to export only one. This can give us some really useful reuse of styles:

.globalButtonStyle {
  background: white;
  border: 1px solid;
  border-radius: 0.25rem;
}
.globalButtonStyle:hover {
  box-shadow: 0 0 4px -2px;
}
:local(.continueButton) {
  compose-with: globalButtonStyle;
  color: green;
}

becomes:

.globalButtonStyle {
  background: white;
  border: 1px solid;
  border-radius: 0.25rem;
}
.globalButtonStyle:hover {
  box-shadow: 0 0 4px -2px;
}
:local(.continueButton) {
  compose-with: globalButtonStyle;
  color: green;
}

Note: you can also use composes as a shorthand for compose-with

Local-by-default & reuse across files

You're looking for CSS Modules. It uses this plugin as well as a few others, and it's amazing.

Building

npm install
npm test

Build Status

  • Lines: Coverage Status
  • Statements: codecov.io

Development

  • npm autotest will watch src and test for changes and run the tests, and transpile the ES6 to ES5 on success

License

ISC

With thanks

  • Mark Dalgleish
  • Tobias Koppers
  • Guy Bedford

Glen Maddern, 2015.

Related Repositories

css-modules

css-modules

Documentation about css-modules ...

css-modulesify

css-modulesify

A browserify plugin to load CSS Modules ...

postcss-import

postcss-import

PostCSS plugin to inline @import rules content ...

postcss-icss-selectors

postcss-icss-selectors

PostCSS plugin for css modules to to local-scope classes and ids ...

postcss-modules-local-by-default

postcss-modules-local-by-default

A CSS Modules transform to make local scope the default ...


Top Contributors

geelen sokra greenkeeperio-bot joshwnj timdorr just-boris chentsulin

Releases

-   v1.0.2 zip tar
-   v1.0.1 zip tar
-   v1.0.0 zip tar
-   v0.0.8 zip tar
-   v0.0.7 zip tar
-   v0.0.6 zip tar