GitXplorerGitXplorer
t

modular-css

public
293 stars
19 forks
13 issues

Commits

List of commits on branch main.
Verified
3ce75cdfe6b4780e8597f5c153a71db600e8fee5

Version Packages (#1025)

ggithub-actions[bot] committed a day ago
Unverified
c779559ab2d8b81c3db93ab692a859ce2adb1837

chore: ugh

ttivac committed a day ago
Verified
1c9322fd9a39d05da01df8a8c6bd43e9218f9df1

Vite 6 (#1024)

ttivac committed a day ago
Verified
94150f1ca55ef233547301217ddfa251cbf92929

Version Packages (#1023)

ggithub-actions[bot] committed 8 days ago
Verified
d9db40b08355ec13b7929edcb27dd1bc58454513

fix: Properly replace @values inside of other @values (#1022)

ttivac committed 8 days ago
Unverified
d877f63ce2b4dec8597cc5157a7307fc4b1e36bf

chore: update caniuse db

ttivac committed 8 days ago

README

The README file for this repository.

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