@modular-css/shortnames

Helper function to make tiny classnames for modular-css

Usage no npm install needed!

<script type="module">
  import modularCssShortnames from 'https://cdn.skypack.dev/@modular-css/shortnames';
</script>

README

@modular-css/shortnames NPM Version NPM License NPM Downloads

Tiny classnames for modular-css production builds!

Install

> npm install @modular-css/shortnames

Usage

JS API

const Processor = require("@modular-css/processor");
const processor = new Processor({
    namer : require("@modular-css/shortnames")()
});
    
// ...

Browserify

build.plugin("@modular-css/browserify", {
    css   : "./style.css",
    namer : require("@modular-css/shortnames")()
});

// ...

Rollup

rollup({
    entry   : "./index.js",
    plugins : [
        require("@modular-css/rollup")({
            css   : "./gen/index.css",
            namer : require("@modular-css/shortnames")()
        })
    ]
});

Example output

/* one.css */
.alert {}
.notification {}

/* two.css */
.title {}
.heading .subheading {}

becomes

/* output.css */
.AA {}
.AB {}

.BA {}
.BB .BC {}