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
.primary {
color: var(--primary);
}
.secondary {
color: var(--secondary);
}
.b6d946 {
color: var(--primary);
}
.d6bdb8 {
color: var(--secondary);
}
Step 1: Install plugin:
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:
module.exports = {
plugins: {
autoprefixer: {},
+ 'postcss-classname-obfuscator': {},
},
};
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 |
This source code is released under the MIT license.