postcss-modules-scope
Advanced tools
Weekly downloads
Changelog
Readme
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.
A CSS Modules transform to extract export statements from local-scope classes
The npm package postcss-modules-scope receives a total of 12,035,451 weekly downloads. As such, postcss-modules-scope popularity was classified as popular.
We found that postcss-modules-scope demonstrated a not healthy version release cadence and project activity because the last version was released a year ago.It has 4 open source maintainers collaborating on the project.
Did you know?
Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.