Home
Softono

Modular Css

Open source MIT JavaScript
292
Stars
19
Forks
11
Issues
3
Watchers
3 months
Last Commit

 About Modular Css

CSS Modules, but better and usable via Rollup, Vite, Webpack, CLI, PostCSS, or JS API

Platforms

Web Self-hosted

Languages

JavaScript

Need Help Installing Modular Css?

We provide expert installation service for this software. Our team will install, configure, and secure Modular Css on your server. plans start at just $30.

Modular Css

View on GitHub

modular-css GitHub license GitHub Workflow Status GitHub issues Discord

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

Detailed installation instructions are available on m-css.com

https://m-css.com/overview/#introduction-how