Skip to content

minagishl/postcss-classname-obfuscator

Repository files navigation

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

.primary {
  color: var(--primary);
}

.secondary {
  color: var(--secondary);
}
.b6d946 {
  color: var(--primary);
}

.d6bdb8 {
  color: var(--secondary);
}

Usage

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': {},
  },
};

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.