npm

Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript.Learn more »

css-loader-minify-class

1.3.0 • Public • Published

css-loader-minify-class

Just want to use it? Click here.


Minify class names when using CSS Modules with css-loader.

(best paired with minimize: true)

What does it do again?

It minifies your CSS Module class names using the highest-quality algorithm available on the market.

Or, you could say it turns this:

.container {
    display: flex;
    height: 100vh;
}
 
.button {
    border-radius: 2px;
}

Into this:

.a {
    display: flex;
    height: 100vh;
}
 
.b {
    border-radius: 2px;
}

Usage

To use it, import the module and then set getLocalIdent in css-loader's options to createMinifier().

For a simple example, see the following code.

const createMinifier = require("css-loader-minify-class");
 
module.exports = {
  module: {
    rules: {
      {
        loader: "css-loader",
        options: {
          // make sure to add this
          ident: "css",
          // development class name here
          localIdentName: "[name]_[local]-[hash:2]",
          // these should only be in your production config
          minimize: true,
          getLocalIdent: createMinifier()
        }
      },
 
      [...]
    }
  }
 
  [...]
};

API

The module exports a function.

createMinifier(options?: object) -> Function

Takes an optional parameter options. See the options here.

Returns a function.

Options

Any options can be passed to createMinifier as an object.

  • blacklist
    • An array of RegExp | string. If a class name includes/matches any of them, it will be skipped.
    • default: [/^ad$/] - to prevent confusing adblockers
  • prefix
    • A prefix to prepend to every class name. For example, menu_.
    • default: undefined

Help

Ran into a bug or just have a question? Create a new issue!

install

npm i css-loader-minify-class

Downloadsweekly downloads

83

version

1.3.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability