css-name-optimizer-plugin v1.0.0-beta.3

css-name-optimizer-plugin

This is a webpack plugin for Angular to optimize CSS class names to 6 random charactes in patern of "_AbcDe". This helps to decrease the size of output style file by reducing number of characters.

NOTE

• Plugin will run only when you build/serve app with --prod flag!!!
• This plugin is compatibile with Angular 7 and up.
• If You use CDN styles then plugin won't map those class names.
• We're working on Chrome extension to revert css mapping on production environment for development purposes.

Example HTML/CSS output:

How to use

To use this plugin you need to:

• install package:

yarn add css-name-optimizer-plugin --dev
// or
npm install css-name-optimizer-plugin --save-dev

• add custom webpack config alligator.io: Custom webpack config.
• create webpack.config.js:

var CssNameOptimizerPlugin = require("./node_modules/css-name-optimizer-plugin");

module.exports = {
  plugins: [new CssNameOptimizerPlugin()]
};

You can pass options to the plugin:

var CssNameOptimizerPlugin = require("./node_modules/css-name-optimizer-plugin");

// object below represents default state of options
var options = {
    isSourceMapEnabled = false,
    sourceMapPath = "./",
    isSourceMapNameVersioned: false,
    isVerboseEnabled: false
};

module.exports = {
  plugins: [
      new CssNameOptimizerPlugin(options)
  ]
};

Options

plugin can generate a map of changed css classes

options.isSourceMapEnabled

// map example:
{
  "tag-pill": "_kVFrc",
  "page-link": "_pbKeX",
  "logo-font": "_NOVyt",
  "test": "_xVkLe",
  "red": "_tqsTf",
  "dark": "_NoMhS"
}
// { originalName: generatedName }

you can provide path relatively to project folder

options.sourceMapPath

to avoid overwritting source map, timestamp can be added to file name

options.isSourceMapNameVersioned;

// when false: css-name.map.json
// when true: css-name.1570282598325.map.json

if true you will see which classes aren't remapped

options.isVerboseEnabled;

// verbose example:
// *** [CssNameOptimizer]: Cannot find .form-control-lg in CSS/SCSS files. It might be a vendor's class or it isn't used. It won't be optimized. ***