Skip to content
A streamlined reinterpretation of CSS Modules via CLI, API, Browserify, Rollup, Webpack, or PostCSS
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Create feature_request.md Jan 17, 2019
packages release: v22.2.0 🎉 🚀 Mar 7, 2019
.eslintignore feat: rollup transform dependencies support (#438) Jun 26, 2018
.eslintrc.js feat: new website (#557) Jan 29, 2019
.gitattributes chore: fix package-lock.json Jun 6, 2018
.gitignore
.travis.yml test: more jest workarounds Mar 7, 2019
CHANGELOG.md
CODE_OF_CONDUCT.md
CONTRIBUTING.md
LICENSE
README.md
index.js
jest.config.js chore: Have 🤡run eslint Nov 8, 2018
jsconfig.json test: Use jest for testing (#269) Mar 16, 2017
lerna.json release: v22.2.0 🎉 🚀 Mar 7, 2019
package-lock.json
package.json deps: webpack@4.29.6 Mar 7, 2019

README.md

modular-css Build Status Gitter

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!

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

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.