🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Book a DemoInstallSign in
Socket

css-mangle-webpack-plugin

Package Overview
Dependencies
Maintainers
0
Versions
16
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

css-mangle-webpack-plugin

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

1.0.0-alpha18
latest
Source
npm
Version published
Weekly downloads
45
400%
Maintainers
0
Weekly downloads
 
Created
Source

CSS Mangle Webpack Plugin

Versionv1.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

TypeStatusSupport
VariableAlpha and tested for required dev-enviorment.
ClassNot supported by default currently, but experimental stage.🟧
IdNot supported by default currently, but experimental stage.🟧
MinifyAlpha and tested for required dev-enviorment, but this is optional.🟨
OthersNot 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

NameDescriptionType
ignoreScriptWhether unique identifiers in JavaScript and JSX should not be targets for transpilation.boolean
processStageThis option value defines which bundle process stage of Webpack to proceed with optimization task."OPTIMIZE" | "OPTIMIZE_INLINE";
printLogsNot ready a comment about this."ALL" | "WARNING" | "NONE"
debugLogsNot ready a comment about this."ALL" | "TIMEOUT" | "NONE"
reservedNot ready a comment about this.string[]
minifyNot ready a comment about this.boolean | Partial
mangleNot ready a comment about this.{ variableName?: boolean | CSSVariableManglerOptions, className?: boolean, idName?: boolean, options: ... } | boolean

Keywords

css

FAQs

Package last updated on 12 Sep 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts