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 test:watch
will watch src
and test
for changes and run the testsISC
Glen Maddern, 2015.