• Stars
    star
    288
  • Rank 143,818 (Top 3 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created about 9 years ago
  • Updated 8 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

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

More Repositories

1

crucible

API CMS UI powered by Firebase, mithril, and my own dwindling sanity. Oh, and acronyms.
JavaScript
117
star
2

rollup-plugin-sizes

Rollup plugin to display bundle contents & size information
JavaScript
91
star
3

xstate-component-tree

Build a tree of UI components based on your statechart
JavaScript
47
star
4

fixie

PostCSS plugin to simplify IE CSS hacks
JavaScript
45
star
5

mithril-redux

Experiments in mithril.js + redux
JavaScript
32
star
6

web-build

Ant-powered build system for web sites
JavaScript
23
star
7

falcor-experiment

Toying with Falcor models
JavaScript
17
star
8

svelte-translator

Tools for helping svelte v2 & v3 work together
JavaScript
17
star
9

svelte-routing

Svelte routing experiments
JavaScript
14
star
10

delegated

Delegated Browser events in a really, really simple package
JavaScript
14
star
11

postcss-extract-animations

Extract inline @keyframes into separate rules
JavaScript
11
star
12

amd-script

Load anonymous AMD modules for... reasons.
JavaScript
8
star
13

yui-configger

Unmaintained NodeJS scripts to extract meta-data from a folder of YUI modules & generate a Loader config
JavaScript
8
star
14

eslint-plugin-svelte

Some svelte.js focused ESLint rules
JavaScript
8
star
15

casperjs-mocharunner

CasperJS-powered tests using Mocha & Chai
JavaScript
7
star
16

aws-sig

πŸ” AWS sigv4, optimized for size
JavaScript
7
star
17

wp2static

Export your Wordpress site to a directory of static html files
PHP
6
star
18

es6-watching

Sample project showing rollup + buble + watching
JavaScript
5
star
19

wright-workflow

Experimenting with wright + svelte + rollup
JavaScript
5
star
20

router

Writing a JS router, because I can.
JavaScript
4
star
21

rollup-plugin-bundles

Experimenting with bundle-splitting via rollup plugin
JavaScript
4
star
22

sync53

A better way to configure Route53 (with a text file πŸ‘)
JavaScript
4
star
23

dullard

Simple, straight-forward NodeJS-powered task runner
JavaScript
4
star
24

yui-seeder

Create single file seeds for your YUI application based off specified modules or aliases
JavaScript
4
star
25

svelte-state

Experimenting w/ svelte & statecharts
JavaScript
3
star
26

falco

Node-Webkit powered experiments in poking at twitter
JavaScript
3
star
27

sweetie.js

How simple can a test runner be while still being useful? Let's find out!
JavaScript
2
star
28

yui-modellistmore

Add a more() method to YUI ModelList instances
JavaScript
2
star
29

yui-viewparent

YUI Parent/Child view relationships extension
JavaScript
2
star
30

scroller

I've gone insane and I'm writing a simpler custom scrollbar implementation. WHYYYYYYYYYY WOULD YOU DO THAT?!?
JavaScript
2
star
31

yui-data-binding

YUI node/attribute data binding
JavaScript
2
star
32

black-friday

Utility to automatically purchase amazon black friday deals
JavaScript
2
star
33

yui-lazyimages

Lazily-load images as they scroll into the viewport
JavaScript
2
star
34

yui-clumper

Create NPM-able packages of specific YUI modules
JavaScript
2
star
35

node-html-prefixer

Prefix /urls/like/this in your html with a CDN URL
JavaScript
1
star
36

eslint-config

My ESLint config. Allllll mine.
JavaScript
1
star
37

gw2api-explorer

Mostly an excuse to experiment with wright
JavaScript
1
star
38

mk8d-builder

Simple Mario Kart 8 Deluxe build calculator
JavaScript
1
star
39

atomize

Break selectors down into their smallest components and re-form using composition
JavaScript
1
star
40

Stringy

UglifyJS-powered JS duplicate string compression
JavaScript
1
star
41

svelte-template-lint

Prototyping a svelte template linter, nothing useful here yet.
JavaScript
1
star
42

tivac.github.io

HTML!
1
star
43

simpleton

Simple SQLite-based API CMS, inspired by prismic.io and WebHook
JavaScript
1
star
44

yui-viewclasses

Add useful classes to YUI Y.View instances via an extension
JavaScript
1
star
45

xstate-state-tracker

Track all xstate state transitions, even in child machines
JavaScript
1
star