{"id":15207191,"url":"https://github.com/mttankkeo/css-mangle-webpack-plugin","last_synced_at":"2026-01-05T12:05:54.306Z","repository":{"id":253639781,"uuid":"844091564","full_name":"MTtankkeo/css-mangle-webpack-plugin","owner":"MTtankkeo","description":"This webpack plugin package is a CSS mangler that globally optimizes and shortens identifier names.","archived":false,"fork":false,"pushed_at":"2024-09-12T06:30:06.000Z","size":384,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-10-11T23:05:20.495Z","etag":null,"topics":["css","jsx","lightweight","mangler","minifier","webpack-plugin"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/css-mangle-webpack-plugin","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MTtankkeo.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-18T11:06:43.000Z","updated_at":"2024-09-12T06:30:09.000Z","dependencies_parsed_at":"2024-09-12T14:51:51.479Z","dependency_job_id":"83c000c2-5386-421b-9cfc-4cd57076e44a","html_url":"https://github.com/MTtankkeo/css-mangle-webpack-plugin","commit_stats":null,"previous_names":["mttankkeo/css-mangle-webpack-plugin"],"tags_count":0,"template":false,"template_full_name":"MTtankkeo/typescript-playwright-rollup","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MTtankkeo%2Fcss-mangle-webpack-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MTtankkeo%2Fcss-mangle-webpack-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MTtankkeo%2Fcss-mangle-webpack-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MTtankkeo%2Fcss-mangle-webpack-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MTtankkeo","download_url":"https://codeload.github.com/MTtankkeo/css-mangle-webpack-plugin/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219857951,"owners_count":16556049,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","jsx","lightweight","mangler","minifier","webpack-plugin"],"created_at":"2024-09-28T06:23:37.729Z","updated_at":"2025-10-29T09:31:33.865Z","avatar_url":"https://github.com/MTtankkeo.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg width=\"200px\" src=\"https://github.com/user-attachments/assets/a621ed86-c8a0-41ee-92e8-0a576c20e2e5\"\u003e\n  \u003ch1\u003eCSS Mangle Webpack Plugin\u003c/h1\u003e\n  \u003ctable\u003e\n        \u003cthead\u003e\n          \u003ctr\u003e\n            \u003cth\u003eVersion\u003c/th\u003e\n            \u003cth\u003ev1.0.0-alpha18\u003c/th\u003e\n          \u003c/tr\u003e\n        \u003c/tbody\u003e\n    \u003c/table\u003e\n\u003c/div\u003e\n\n# Introduction\nThis webpack plugin package is a CSS mangler that globally optimizes and shortens identifier names.\n\n\u003e 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. 🚀\n\n\u003e [!IMPORTANT]\n\u003e This package is more developing and fixing..., And this package current version is alpha. And refer to [Change Log](CHANGELOG.md) for details.\n\n## Support Current Status\n| Type | Status | Support |\n| ---- | ------ | ------- |\n| Variable | Alpha and tested for required dev-enviorment. | ✅ |\n| Class | Not supported by default currently, but experimental stage. | 🟧 |\n| Id | Not supported by default currently, but experimental stage. | 🟧 |\n| Minify | Alpha and tested for required dev-enviorment, but this is optional. | 🟨 |\n| Others | Not supported | 🟥 |\n\n# Install by NPM\nTo install this package in your project, enter the following command.\n\n\u003e When you want to update this package, enter `npm update css-mangle-webpack-plugin --save` in the terminal to run it.\n\n```\nnpm install css-mangle-webpack-plugin --save-dev\n```\n\n## And then In webpack.config.js\n```cjs\n// In webpack.config.js\nconst CSSManglePlugin = require(\"css-mangle-webpack-plugin\");\n\nmodule.exports = {\n  // Add an instance of CSSManglePlugin to plugins property value.\n  plugins: [new CSSManglePlugin({...})]\n}\n```\n\n## How is a bundle transpiled when this plugin applyed?\nThe example below demonstrates the simplest of many possible transformations. In practice, all CSS identifiers written in the script, including JSX, are also transpiled.\n\n### From\n```css\n:root {\n  --background: white;\n  --foreground: black;\n}\n\n/* Supoort Custom Property Registration. */\n@property --reaground { ... }\n\nbody {\n  background-color: var(--background);\n  color: var(--foreground)\n}\n```\n```js\nconst property = \"var(--background, white)\";\nconst literals = \"--background\";\n```\n\n### To\n```css\n:root {\n  --a: white;\n  --b: black;\n}\n\n/* Supoort Custom Property Registration. */\n@property --c { ... }\n\nbody {\n  background-color: var(--a);\n  color: var(--b)\n}\n```\n```js\nconst property = \"var(--a, white)\";\nconst literals = \"--a\";\n```\n\n## Properties of CSSMangleWebpackPluginOptions\n| Name | Description | Type |\n| ---- | ----- | ------- |\n| ignoreScript | Whether unique identifiers in JavaScript and JSX should not be targets for transpilation. | boolean\n| processStage | This option value defines which bundle process stage of Webpack to proceed with optimization task. | \"OPTIMIZE\" \\| \"OPTIMIZE_INLINE\";\n| printLogs | Not ready a comment about this. | \"ALL\" \\| \"WARNING\" \\| \"NONE\"\n| debugLogs | Not ready a comment about this. | \"ALL\" \\| \"TIMEOUT\" \\| \"NONE\"\n| reserved | Not ready a comment about this. | string[]\n| minify | Not ready a comment about this. | boolean \\| Partial\u003cCSSMinificationManglerOptions\u003e\n| mangle | Not ready a comment about this. | { variableName?: boolean \\| CSSVariableManglerOptions, className?: boolean, idName?: boolean, options: ... } \\| boolean\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmttankkeo%2Fcss-mangle-webpack-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmttankkeo%2Fcss-mangle-webpack-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmttankkeo%2Fcss-mangle-webpack-plugin/lists"}