Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tivac/modular-css
CSS Modules, but better and usable via Rollup, Vite, Webpack, CLI, PostCSS, or JS API
https://github.com/tivac/modular-css
browserify code-splitting css css-methodologies css-modules postcss rollup svelte vite vitejs webpack
Last synced: 6 days ago
JSON representation
CSS Modules, but better and usable via Rollup, Vite, Webpack, CLI, PostCSS, or JS API
- Host: GitHub
- URL: https://github.com/tivac/modular-css
- Owner: tivac
- License: mit
- Created: 2015-10-29T00:20:23.000Z (about 9 years ago)
- Default Branch: main
- Last Pushed: 2024-05-01T18:29:12.000Z (7 months ago)
- Last Synced: 2024-10-05T16:05:04.222Z (2 months ago)
- Topics: browserify, code-splitting, css, css-methodologies, css-modules, postcss, rollup, svelte, vite, vitejs, webpack
- Language: JavaScript
- Homepage: http://m-css.com
- Size: 13.8 MB
- Stars: 288
- Watchers: 7
- Forks: 19
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome - modular-css - Alternative CSS Modules implementation supporting Rollup. (Plugins / CSS)
README
# modular-css [](https://github.com/tivac/modular-css/blob/main/LICENSE)   [](https://discord.gg/jQCZqMuMdt)
A streamlined re-interpretation of [CSS Modules](https://github.com/css-modules/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
```css
.red {
color: red;
}
.blue {
composes: red;
background: blue;
}
/* in the output .blue will be combination of both styles */
```
### Values
```css
@value alert: #F00;
.alert {
color: alert;
}
/* will output as */
.alert {
color: #F00;
}
```
### Selector Scoping
```css
.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
```css
/* input.css */
.input {
width: 100%;
}
/* fieldset.css */
.fieldset :external(input from "./input.css") {
width: 50%;
}
```
More detailed descriptions are available on [the website](https://m-css.com/guide/#features).
## Install
Detailed installation instructions are available on m-css.com
https://m-css.com/overview/#introduction-how