This PostCSS plugin replaces CSS class names with hard-to-guess characters.
It may not work properly if the
.next
folder exists.
We are currently checking for bugs. Please let us know as soon as you know how to reproduce the bug.
Demo Site: https://postcss-classname-obfuscator-demo.vercel.app/
.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.