3.2.1 • Published 8 months ago
postcss-modules-scope v3.2.1
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
Development
npm test:watch
will watchsrc
andtest
for changes and run the tests
License
ISC
With thanks
- Mark Dalgleish
- Tobias Koppers
- Guy Bedford
Glen Maddern, 2015.
3.2.1
8 months ago
3.1.2
1 year ago
3.2.0
1 year ago
3.1.1
1 year ago
3.1.0
2 years ago
3.0.0
5 years ago
3.0.0-rc.2
5 years ago
3.0.0-rc.1
5 years ago
3.0.0-rc.0
5 years ago
2.2.0
5 years ago
2.1.1
6 years ago
2.1.0
6 years ago
2.0.1
7 years ago
2.0.0
7 years ago
1.1.0
8 years ago
1.0.2
9 years ago
1.0.1
9 years ago
1.0.0
10 years ago
1.0.0-beta2
10 years ago
1.0.0-beta1
10 years ago
0.0.8
10 years ago
0.0.7
10 years ago
0.0.6
10 years ago
0.0.5
10 years ago
0.0.4
10 years ago
0.0.3
10 years ago
0.0.2
10 years ago
0.0.1
10 years ago