modular-css

A streamlined re-interpretation of CSS Modules

Try it

There's an online REPL where you can try out modular-css without needing to install anything!

Here's a prefilled version showing some modular-css features.

Features

Composition

.red {
    color: red;
}

.blue {
    composes: red;

    background: blue;
}

/* in the output .blue will be combination of both styles */

Values

@value alert: #F00;

.alert {
    color: alert;
}

/* will output as */

.alert {
    color: #F00;
}

Selector Scoping

.style {
    color: red;
}

:global(.style2) {
    color: blue;
}

/* Will output as */

/* Scoped with unique file-based prefix */
.f5507abd_style {
    color: red;
}

/* Remains unstyled due to :global() pseudo */
.style2 {
    color: blue;
}

Style Overrides

/* input.css */
.input {
    width: 100%;
}

/* fieldset.css */
.fieldset :external(input from "./input.css") {
    width: 50%;
}

More detailed descriptions are available in docs/features.md

Install

JS API

> npm i @modular-css/processor

The core of modular-css, reasonably usable and powers literally everything else.

CLI

> npm i @modular-css/cli

modular-css via CLI, for those times where you need to try something really quickly.

Browserify

> npm i @modular-css/browserify

The old standby, still works. Supports factor-bundle for painless CSS & JS bundle splitting!

Rollup

> npm i @modular-css/rollup

Tiny bundles, code-splitting, and first-class modular-css support. 👌🏻

Webpack

> npm i @modular-css/webpack

The popular choice. Not as full-featured or well-supported but should work out just fine.

Svelte

> npm i @modular-css/svelte

Take your svelte components and power them up using modular-css! ⚡

PostCSS Plugin

> npm i @modular-css/postcss

For those times when you've just gotta run some postcss inside of your postcss. 😵

Globbing API

> npm i @modular-css/glob

Sometimes you just need to grab **/*.css and get a move on. The globbing API is here for you!

Why?

CSS Modules doesn't support the features we need & has bugs blocking our usage. Attempts to fix those bugs have been unsuccessful for a variety of reasons. Thus, a perfect storm of compelling reasons to learn PostCSS was found.

Also because this:

Thanks

@JoshGalvin for ideas/encouragement to do this silly thing.
The CSS modules team for inspiration!

Alxandr / modular-css