PostCSS Class Name Shortener

PostCSS plugin that shortens CSS class names to optimize website performance.

The plugin will produce an object with all mapped class names and return it via the callback.

// INPUT
.long-class-name-that-just-sets-the-text-color-to-black {
  color: black;
}

// OUTPUT
.a {
  color: black;
}

This plugin uses css-shortener under the hood.

Usage

npm install --save postcss-class-name-shortener

const classNameShortener = require('postcss-class-name-shortener');
const fs = require('fs');

postcss([
  [
    'postcss-class-name-shortener',
    {
      outputMapCallback: map => {
        console.log(JSON.stringify(map));
        // You can return a promise
        return new Promise((resolve, reject) => {
          fs.writeFile('cssMap.json', JSON.stringify(map), err => {
            if(err) reject(err);
            else resolve();
          });
        })
      }
      // Optionally disable shorting of class names in dev environment
      disable: process.env.NODE_ENV === 'development'
    }
  ]
])

The map object will look like this:

{
  "long-class-name-that-just-sets-the-text-color-to-black": "a"
}

Options

See PostCSS docs for examples for your environment.

mbrandau/postcss-class-name-shortener

PostCSS Class Name Shortener

Usage

Options