modular-css v25.0.0

modular-css

CSS Modules, better and easier than ever.

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 rollup, webpack, browserify, postcss, the cli, and more!

Edit in 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%;
}