mc

modular-css

A streamlined reinterpretation of CSS Modules via CLI, API, Browserify, Rollup, Webpack, or PostCSS

Showing:

Popularity

Downloads/wk

0

GitHub Stars

244

Maintenance

Last Commit

10d ago

Contributors

22

Package

Dependencies

0

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Deprecated!
Use one of the specific packages: modular-css-rollup, modular-cssify, modular-css-webpack, modular-css-cli, modular-css-glob, modular-css-svelte, or postcss-modular-css

Readme

modular-css Build Status Gitter

A streamlined re-interpretation of CSS Modules

Documentation

Check out the official modular-css site: http://m-css.com/

Try it

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

http://m-css.com/repl

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 on the website.

Install

https://m-css.com/guide/#usage

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial