# postcss-mangle-css-class

> Minifies and obfuscates the class names without any modern css modules.

Latest version **0.0.7** (published 2023-11-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install postcss-mangle-css-class
pnpm add postcss-mangle-css-class
yarn add postcss-mangle-css-class
bun add postcss-mangle-css-class
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.7 |
| Published | 2023-11-21 |
| First published | 2023-11-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 30.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | fernandcf |
| Maintainers | fernandocfernandez |
| Keywords | postcss, css, obfuscate, minify, mangle, bootstrap, tailwindcss |

## Links

- npm: https://www.npmjs.com/package/postcss-mangle-css-class
- Repository: https://github.com/fernandcf/mangle-css-class
- Issues: https://github.com/fernandcf/mangle-css-class/issues
- npm.io page: https://npm.io/package/postcss-mangle-css-class

## Dependencies (6)

- [hashids](https://npm.io/package/hashids.md) ^2.3.0
- [postcss](https://npm.io/package/postcss.md) ^8.4.31
- [fs-extra](https://npm.io/package/fs-extra.md) ^11.1.1
- [fast-glob](https://npm.io/package/fast-glob.md) ^3.3.2
- [lodash.merge](https://npm.io/package/lodash.merge.md) ^4.6.2
- [postcss-rename](https://npm.io/package/postcss-rename.md) ^0.6.1

## Alternatives

- [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads
- [@atlaskit/theme](https://npm.io/package/@atlaskit/theme.md) — 402.0K weekly downloads
- [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads
- [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads
- [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads

## Recent versions

- 0.0.7 (latest) — 2023-11-21
- 0.0.6 — 2023-11-21

## README

<h1 align="center">Postcss Mangle Css Class</h1>

<h4 align="center"> 
It is a postcss plugin to obfuscate and minify CSS classes without any modern CSS modules and c ompatible with bootstrapcss, tailwindcss, bulma ... and any CSS framework 
</h4>

## Usage

The plugin will generate optimized class name. Configure minimally as follows:

#### postcss.config.js
```js
import postCSSMangleCSSClass from "postcss-mangle-css-class";

export default {
  plugins: [
    postCSSMangleCSSClass({
      CSSinput: "./style.css",
      export: {
        JSONFile: "./.mangle-css-class/classes.json",
        JSFile: "./.mangle-css-class/classes.js"
      },
      classNameRename: "[name]_[hash]",
      getOutput(renamed, excluded) {
        console.log("output", { renamed, excluded });
      },
    }),
  ],
};
``` 

## Options

```js
const options = {
    enable: true,
    cwd: process.cwd(), 
    CSSinput: "",
    classNameRename: "[name]_[hash]", 
    hash: {
      type: "random",
      minLength: 5,
      salt: "",
    },
    exclude: {
      classNames: [],
      files: [],
    },
    CSSextensions: [".css", ".sass", ".scss", ".less", ".styl"],
    export: {
      JSONFile: "./.mangle-css-class/classes.json", JSFile: "./.mangle-css-class/classes.js",
      rewrite: false,
    },
    getOutput(renamed, excluded) {}
  };
```

#### enable Boolean
Enable/disable plugin. Default: `true` 

#### cwd String
The current working directory. Default: `process.cwd()`

#### CSSinput String, String[]
Establishes which CSS files should be analyzed. e.g: `'./app.css'`

#### classNameRename String
Set an interpolated string to rename CSS classes. Placeholders compatible:

- `[name]` is the class name 
- `[hash]` is the hash generate. You can set the type to `hash.type` and the minimum length `hash.minLength` and optionally `hash.salt`

e.g.: `prefix_[name]_[hash]`

#### hash.type String
Sets the hash type. Possible values: `none`,`random`,`salt`. Default: `random`

- `none` no hash will be applied.
- `random` generates an unpredictable random hash.
- `salt` generates a predictable random hash. If you need it to be unique; for example, in each project, you can configure: `hash.salt` 

#### hash.minLength Int
Set the minimum hash length. Default: `5`

#### hash.salt String
If you need to generate unique hashes for each project, you can set `salt` different in each one. e.g: `myProject1`. It is only applicable if you have defined `hash.type`:`salt`

#### exclude.classNames String, Regex, String[], Regex[]
CSS classes that will not be replaced. e.g: `["card",/text-/g]`

#### exclude.files String, Glob, String[], Glob[]
CSS classes that are used or found in these files will be ignored. e.g: `["./css-ignore.css","./js/*.js"]`

#### CSSextensions String, String[]
Establishes which files should be parsed as style sheets. Usually used if you set `exclude.files`. Default: `[".css", ".sass", ".scss", ".less", ".styl"]`

#### export.JSONFile String, Boolean
The path of the file where the replaced classes will be saved. Default: `"./.mangle-css-class/classes.json"`. The file will have the following structure:
```json
{
  "card":"ahJ25g",
  "card-body":"Awk1JO"
}
```

#### export.JSFile String, Boolean
The path of the file where the replaced classes will be saved in format `ESM`. Default: `"./.mangle-css-class/classes.js"`. The file will have the following structure:
```js
const card = "ahJ25g";
const card_body = "Awk1JO";
export default {card,card_body}
```

#### export.rewrite Boolean
Sets whether to rewrite previously generated files.
Default: `false`.

#### getOutput(renamed, excluded) Function
A callback that passes the renamed and excluded CSS classes.

## Utilities/Methods

#### init
Required to start; It should commonly be called before any script.

```js
const options_ = {
  cwd: process.cwd(),
  CSSinput: "",
  postcss: null,
  context: {},
};
```
- `cwd` the current working directory. Default `process.cwd()`
- `CSSinput` CSS files that are allowed to be analyzed. e.g: `'./app.css'`
- `postcss` PostCSS config. Default: load `postcss.config.js` in the root project

e.g:
```js
import initMangleCSSClass from "postcss-mangle-css-class/init";

initMangleCSSClass({
  CSSinput: "./style.css"
});
```

## Examples

Each package has its own particularity, which is why we have prepared the following examples of how you could use this plugin. For more details:

### If you are using `vite` ...
You can use the plugin `vite-plugin-replace-mangle-css-class` [Documentation](https://github.com/fernandcf/mangle-css-class/tree/main/packages/vite-plugin-replace-mangle-css-class)

- [Vite HTML Alpinejs](https://github.com/fernandcf/mangle-css-class/tree/main/apps/vite-vanilla)
<!-- - [Vite Reactjs]()
- [Vite Vuejs]() -->

### Others ...
- [Nextjs](https://github.com/fernandcf/mangle-css-class/blob/main/apps/nextjs)
- [Nuxtjs](https://github.com/fernandcf/mangle-css-class/blob/main/apps/nuxtjs)
<!-- - [Laravel]() -->

## Recommendations

- Use a single main style sheet as input. e.g:

Before: 
```js
// postcss.config.js
import postCSSMangleCSSClass from "postcss-mangle-css-class";

export default {
  plugins: [
    postCSSMangleCSSClass({
      CSSinput: ["./page-1.css","./page-2.css","./page-3.css"]
    }),
  ],
};
```
After:
```js
// postcss.config.js
import postCSSMangleCSSClass from "postcss-mangle-css-class";

export default {
  plugins: [
    postCSSMangleCSSClass({
      CSSinput: "./all-pages.css"
    }),
  ],
};
```

## MIT License

This project is under license from MIT. For more details, see the [LICENSE](LICENSE.md) file.

---
_Source: https://npm.io/package/postcss-mangle-css-class · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._