Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/minagishl/postcss-classname-obfuscator
This PostCSS plugin replaces CSS class names with hard-to-guess characters.
https://github.com/minagishl/postcss-classname-obfuscator
Last synced: 2 months ago
JSON representation
This PostCSS plugin replaces CSS class names with hard-to-guess characters.
- Host: GitHub
- URL: https://github.com/minagishl/postcss-classname-obfuscator
- Owner: minagishl
- License: mit
- Created: 2024-01-20T00:28:56.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2024-06-30T16:18:17.000Z (6 months ago)
- Last Synced: 2024-10-15T06:34:14.174Z (3 months ago)
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/postcss-classname-obfuscator
- Size: 4.64 MB
- 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
# postcss-classname-obfuscator
This PostCSS plugin replaces CSS class names with hard-to-guess characters.
> The `.next` folder may not work properly if present.
> We are currently checking for bugs. Please let us know as soon as you figure out how to reproduce the bug.
> Demo site: https://postcss-classname-obfuscator-demo.vercel.app/
> Demo repository: https://github.com/minagishl/postcss-classname-obfuscator-demo
If you cannot access the site [./screenshot.png](./screenshot.png)
```css
.primary {
color: var(--primary);
}
.secondary {
color: var(--secondary);
}
```
```css
.b6d946 {
color: var(--primary);
}
.d6bdb8 {
color: var(--secondary);
}
```
## Usage
**Step 1:** Install plugin:
```bash
npm install --save-dev postcss postcss-classname-obfuscator
```
**Step 2:** Check your project for existing PostCSS config: `postcss.config.js`
in the project root, `"postcss"` section in `package.json`
or `postcss` in bundle config.
If you do not use PostCSS, add it according to [official docs]
and set this plugin in settings.
**Step 3:** Add the plugin to plugins list:
```diff
module.exports = {
plugins: {
autoprefixer: {},
+ 'postcss-classname-obfuscator': {},
},
};
```
## Options
| Option | Type | Default | Description |
| --------------- | ------------------- | ----------------------- | --------------------------------------------------------------------- |
| type | string | "nextjs" | "nextjs" - Application-specific directories Only supported by Next.js |
| enable | boolean | true | Enable or disable the obfuscation. |
| length | number | 6 | Character length (max. 32 characters)length. |
| method | string | "random" | "random" or "none" obfuscation method for classes. |
| prefix | string | "" | Prefix for custom properties. |
| suffix | string | "" | Suffix for custom properties. |
| ignore | string[] | [] | Array of custom properties to ignore. |
| output | string | "" | Obfuscated property list json file output destination |
| directory | string | "" | Directory to replace obfuscated class names |
| [new] inputJson | string | "" | The json output by output is available. |
| ignoreRegex | string[] | [] | Regex to ignore. |
| hashAlgorithm | string | "sha256" | Hash algorithm for obfuscation. |
| preRun | () => Promise | () => Promise.resolve() | What to do before running the plugin |
| callBack | () => void | function () {} | Callback function to run after the plugin has finished running |
## License
This source code is released under the [MIT license.]
[MIT license.]: https://opensource.org/licenses/MIT
[official docs]: https://github.com/postcss/postcss#usage