File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
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="${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- Status:
- Lines:
- Statements:
Development#
npm test:watchwill watchsrcandtestfor changes and run the tests
License#
ISC
With thanks#
- Mark Dalgleish
- Tobias Koppers
- Guy Bedford
Glen Maddern, 2015.