css-mangle-webpack-plugin

CSS Mangle Webpack Plugin

Version	v1.0.0-alpha17

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

Type	Status	Support
Variable	Alpha and tested for required dev-enviorment.	✅
Class	Not supported by default currently, but experimental stage.	🟧
Id	Not supported by default currently, but experimental stage.	🟧
Minify	Alpha and tested for required dev-enviorment, but this is optional.	🟨
Others	Not supported	🟥

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

Name	Description	Type
ignoreScript	Whether unique identifiers in JavaScript and JSX should not be targets for transpilation.	boolean
processStage	This option value defines which bundle process stage of Webpack to proceed with optimization task.	"OPTIMIZE" | "OPTIMIZE_INLINE";
printLogs	Not ready a comment about this.	"ALL" | "WARNING" | "NONE"
debugLogs	Not ready a comment about this.	"ALL" | "TIMEOUT" | "NONE"
reserved	Not ready a comment about this.	string[]
minify	Not ready a comment about this.	boolean | Partial
mangle	Not ready a comment about this.	{ variableName?: boolean | CSSVariableManglerOptions, className?: boolean, idName?: boolean, options: ... } | boolean

Changelog

1.0.0-alpha18

• Fixed an issue where the minify option only recognized opacity values between 0 and 1 when parsing rgb or rgba syntax.
• Fixed an issue where the logic incorrectly determined that there was no need to explicitly define the opacity value when it was 0%. Now, the explicit value is only omitted when the opacity is 100%.