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.