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) {
extends: 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
Development
npm watch
will watchsrc
for changes and rebuildnpm autotest
will watchsrc
andtest
for changes and retest
License
ISC
With thanks
- Mark Dalgleish
- Tobias Koppers
- Guy Bedford
Glen Maddern, 2015.