css-mangle-webpack-plugin v1.0.0-alpha18

Introduction

This webpack plugin package is a CSS mangler that globally optimizes and shortens identifier names.

in brief, It primarily converts identifiers used in CSS (e.g., variables, class names, IDs) into shorter names to reduce file size and improve performance. 🚀

!IMPORTANT This package is more developing and fixing..., And this package current version is alpha. And refer to Change Log for details.

Support Current Status

Install by NPM

To install this package in your project, enter the following command.

When you want to update this package, enter npm update css-mangle-webpack-plugin --save in the terminal to run it.

npm install css-mangle-webpack-plugin --save-dev

And then In webpack.config.js

// In webpack.config.js
const CSSManglePlugin = require("css-mangle-webpack-plugin");

module.exports = {
  // Add an instance of CSSManglePlugin to plugins property value.
  plugins: [new CSSManglePlugin({...})]
}

How is a bundle transpiled when this plugin applyed?

The example below demonstrates the simplest of many possible transformations. In practice, all CSS identifiers written in the script, including JSX, are also transpiled.

From

:root {
  --background: white;
  --foreground: black;
}

/* Supoort Custom Property Registration. */
@property --reaground { ... }

body {
  background-color: var(--background);
  color: var(--foreground)
}

const property = "var(--background, white)";
const literals = "--background";

To

:root {
  --a: white;
  --b: black;
}

/* Supoort Custom Property Registration. */
@property --c { ... }

body {
  background-color: var(--a);
  color: var(--b)
}

const property = "var(--a, white)";
const literals = "--a";

Properties of CSSMangleWebpackPluginOptions