modular-css
CSS Modules, improved and extended.
Use the features you know and love like selector scoping, selector compositions, or shared values alongside brand new ones like styling overrides and extensible lifecycle hooks. All from the comfort of tools you're already using like vite, rollup, webpack, postcss, the cli, and more!
Open in the REPL ▶️
/* === input.css === */
.input {
width: 100%;
}
/* === example.css === */
/* Values */
@value warning: rgb(250, 128, 114);
.alert { background: warning; }
/* Scoping */
:global(.alertBanner) {
/* Composition */
composes: alert;
color: rgb(255, 255, 255);
}
/* Styling Overrides */
.fieldset :external(input from "./input.css") {
width: 50%;
}