peach a19a732be8 commit message | 2 jaren geleden | |
---|---|---|
.. | ||
src | 2 jaren geleden | |
CHANGELOG.md | 2 jaren geleden | |
LICENSE | 2 jaren geleden | |
README.md | 2 jaren geleden | |
package.json | 2 jaren geleden |
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>`
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
You're looking for CSS Modules. It uses this plugin as well as a few others, and it's amazing.
npm install
npm test
npm autotest
will watch src
and test
for changes and run the tests, and transpile the ES6 to ES5 on successISC
Glen Maddern, 2015.