Transforms:
css
:local(.continueButton) {
color: green;
}
into:
css
: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:
js
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:
css
.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.