Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mttankkeo/css-mangle-webpack-plugin
This webpack plugin package is a CSS mangler that globally optimizes and shortens identifier names.
https://github.com/mttankkeo/css-mangle-webpack-plugin
css jsx lightweight mangler minifier webpack-plugin
Last synced: 3 months ago
JSON representation
This webpack plugin package is a CSS mangler that globally optimizes and shortens identifier names.
- Host: GitHub
- URL: https://github.com/mttankkeo/css-mangle-webpack-plugin
- Owner: MTtankkeo
- License: mit
- Created: 2024-08-18T11:06:43.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-09-12T06:30:06.000Z (4 months ago)
- Last Synced: 2024-10-11T23:05:20.495Z (3 months ago)
- Topics: css, jsx, lightweight, mangler, minifier, webpack-plugin
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/css-mangle-webpack-plugin
- Size: 375 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
CSS Mangle Webpack Plugin
Version
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](CHANGELOG.md) 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
```cjs
// 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
```css
:root {
--background: white;
--foreground: black;
}/* Supoort Custom Property Registration. */
@property --reaground { ... }body {
background-color: var(--background);
color: var(--foreground)
}
```
```js
const property = "var(--background, white)";
const literals = "--background";
```### To
```css
:root {
--a: white;
--b: black;
}/* Supoort Custom Property Registration. */
@property --c { ... }body {
background-color: var(--a);
color: var(--b)
}
```
```js
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