CSS Modules: Scope Locals & Extend

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="${buttons.continueButton}">Continue</button>`

Extensions

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) {
  composes: globalButtonStyle;
  color: green;
}

becomes:

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

Local-by-default & reuse across files

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

Building

npm install
npm build
npm test

Lines:
Statements:

Development

npm watch will watch src for changes and rebuild
npm autotest will watch src and test for changes and retest

License

ISC

With thanks

Mark Dalgleish
Tobias Koppers
Guy Bedford

Glen Maddern, 2015.