tailwind-scramble 0.1.0

package/README.md

@@ -0,0 +1,92 @@
+# `tailwind-scramble`
+
+[![npm version](https://img.shields.io/npm/v/tailwind-scramble.svg)](https://www.npmjs.com/package/tailwind-scramble)
+[![license](https://img.shields.io/npm/l/tailwind-scramble.svg)](LICENSE)
+[![typescript](https://img.shields.io/badge/TypeScript-ready-blue.svg)](https://www.typescriptlang.org/)
+
+Scramble your Tailwind CSS class names in production builds. Replaces readable class names like `flex items-center` with random short identifiers like `akzmqt xbfplo`, making your markup harder to reverse-engineer.
+
+Works with Next.js (Webpack and Turbopack), and supports class utility functions like `cn()`, `clsx()`, `cva()`, and others.
+
+## How it works
+
+The package has two plugins that work together:
+
+1. **Webpack Plugin**: A bundler loader that parses your JSX/TSX, finds class name strings (in `className` attributes and utility function calls), and replaces each class with a unique random identifier. It writes the mapping to a JSON file.
+
+2. **PostCSS Plugin**: Reads the class mapping and rewrites the corresponding CSS selectors to match the scrambled names.
+
+Both plugins share the mapping file, so the scrambled class names in your HTML and CSS always stay in sync.
+
+### Supported class utilities
+
+The Webpack plugin detects and rewrites strings inside these functions:
+
+- `cn()`
+- `clsx()`
+- `cx()`
+- `cva()`
+- `classnames()`
+- `twMerge()`
+- `twJoin()`
+
+## Installation
+
+```bash
+npm install tailwind-scramble
+```
+
+## Setup (Next.js)
+
+It is recommended to only use this plugin during production builds to make development easier.
+
+### Webpack
+
+```ts
+// next.config.ts
+import type { NextConfig } from "next";
+
+const isProd = process.env.NODE_ENV === "production";
+
+const nextConfig: NextConfig = {
+  webpack(config) {
+    if (isProd) {
+      config.module?.rules?.unshift({
+        test: /\.(tsx|ts|jsx|js|mjs)$/,
+        exclude: /node_modules/,
+        enforce: "pre",
+        use: [
+          {
+            loader: require.resolve("tailwind-scramble/webpack"),
+            options: {},
+          },
+        ],
+      });
+    }
+
+    return config;
+  },
+};
+
+export default nextConfig;
+```
+
+### PostCSS
+
+```js
+// postcss.config.mjs
+const isProd = process.env.NODE_ENV === "production";
+
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+    ...(isProd && { "tailwind-scramble/postcss": {} }),
+  },
+};
+
+export default config;
+```
+
+## License
+
+MIT

package/dist/postcss.cjs

@@ -0,0 +1,35 @@
+const require_utils = require('./utils-BHmeg0xb.cjs');
+
+//#region src/plugins/postcss-plugin.ts
+function toTailwindSelector(className) {
+	return className.split("").map((ch) => {
+		if (/^[a-zA-Z0-9_-]$/.test(ch)) return ch;
+		return "\\" + ch;
+	}).join("");
+}
+const postcssPlugin = () => {
+	return {
+		postcssPlugin: "tailwind-scramble",
+		Once(root) {
+			console.log("[TailwindScramble] PostCSS Plugin Initialized");
+			const map = require_utils.readMap();
+			const keys = Object.keys(map);
+			if (keys.length === 0) return;
+			console.log("[TailwindScramble] Tailwind Keys:", keys.length);
+			root.walkRules((rule) => {
+				const original = rule.selector;
+				let rewritten = original;
+				for (const [orig, obf] of Object.entries(map)) {
+					const tw = "." + toTailwindSelector(orig);
+					const target = "." + obf;
+					if (rewritten === tw) rewritten = rewritten.split(tw).join(target);
+				}
+				if (rewritten !== original) rule.selector = rewritten;
+			});
+		}
+	};
+};
+postcssPlugin.postcss = true;
+
+//#endregion
+module.exports = postcssPlugin;

package/dist/postcss.d.cts

@@ -0,0 +1,5 @@
+import { PluginCreator } from "postcss";
+
+//#region src/plugins/postcss-plugin.d.ts
+declare const postcssPlugin: PluginCreator<Record<string, never>>;
+export = postcssPlugin;

package/dist/postcss.d.mts

@@ -0,0 +1,6 @@
+import { PluginCreator } from "postcss";
+
+//#region src/plugins/postcss-plugin.d.ts
+declare const postcssPlugin: PluginCreator<Record<string, never>>;
+//#endregion
+export { postcssPlugin as default };

package/dist/postcss.mjs

@@ -0,0 +1,35 @@
+import { n as readMap } from "./utils-B3ZyiKiX.mjs";
+
+//#region src/plugins/postcss-plugin.ts
+function toTailwindSelector(className) {
+	return className.split("").map((ch) => {
+		if (/^[a-zA-Z0-9_-]$/.test(ch)) return ch;
+		return "\\" + ch;
+	}).join("");
+}
+const postcssPlugin = () => {
+	return {
+		postcssPlugin: "tailwind-scramble",
+		Once(root) {
+			console.log("[TailwindScramble] PostCSS Plugin Initialized");
+			const map = readMap();
+			const keys = Object.keys(map);
+			if (keys.length === 0) return;
+			console.log("[TailwindScramble] Tailwind Keys:", keys.length);
+			root.walkRules((rule) => {
+				const original = rule.selector;
+				let rewritten = original;
+				for (const [orig, obf] of Object.entries(map)) {
+					const tw = "." + toTailwindSelector(orig);
+					const target = "." + obf;
+					if (rewritten === tw) rewritten = rewritten.split(tw).join(target);
+				}
+				if (rewritten !== original) rule.selector = rewritten;
+			});
+		}
+	};
+};
+postcssPlugin.postcss = true;
+
+//#endregion
+export { postcssPlugin as default };

package/dist/utils-B3ZyiKiX.mjs

@@ -0,0 +1,19 @@
+import fs from "fs";
+import path from "path";
+import { customAlphabet } from "nanoid";
+
+//#region src/common/utils.ts
+const nanoid = customAlphabet("abcdefghijklmnopqrstuvwxyz", 6);
+const MAP_FILE = path.join(process.cwd(), ".next/tailwind-scramble-map.json");
+function writeMap(classMap) {
+	const obj = Object.fromEntries(classMap);
+	fs.mkdirSync(path.dirname(MAP_FILE), { recursive: true });
+	fs.writeFileSync(MAP_FILE, JSON.stringify(obj, null, 2));
+}
+function readMap() {
+	if (!fs.existsSync(MAP_FILE)) return {};
+	return JSON.parse(fs.readFileSync(MAP_FILE, "utf8"));
+}
+
+//#endregion
+export { readMap as n, writeMap as r, nanoid as t };

package/dist/utils-BHmeg0xb.cjs

@@ -0,0 +1,71 @@
+//#region \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+			key = keys[i];
+			if (!__hasOwnProp.call(to, key) && key !== except) {
+				__defProp(to, key, {
+					get: ((k) => from[k]).bind(null, key),
+					enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+				});
+			}
+		}
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+
+//#endregion
+let fs = require("fs");
+fs = __toESM(fs);
+let path = require("path");
+path = __toESM(path);
+let nanoid = require("nanoid");
+
+//#region src/common/utils.ts
+const nanoid$1 = (0, nanoid.customAlphabet)("abcdefghijklmnopqrstuvwxyz", 6);
+const MAP_FILE = path.default.join(process.cwd(), ".next/tailwind-scramble-map.json");
+function writeMap(classMap) {
+	const obj = Object.fromEntries(classMap);
+	fs.default.mkdirSync(path.default.dirname(MAP_FILE), { recursive: true });
+	fs.default.writeFileSync(MAP_FILE, JSON.stringify(obj, null, 2));
+}
+function readMap() {
+	if (!fs.default.existsSync(MAP_FILE)) return {};
+	return JSON.parse(fs.default.readFileSync(MAP_FILE, "utf8"));
+}
+
+//#endregion
+Object.defineProperty(exports, '__toESM', {
+  enumerable: true,
+  get: function () {
+    return __toESM;
+  }
+});
+Object.defineProperty(exports, 'nanoid', {
+  enumerable: true,
+  get: function () {
+    return nanoid$1;
+  }
+});
+Object.defineProperty(exports, 'readMap', {
+  enumerable: true,
+  get: function () {
+    return readMap;
+  }
+});
+Object.defineProperty(exports, 'writeMap', {
+  enumerable: true,
+  get: function () {
+    return writeMap;
+  }
+});

package/dist/webpack.cjs

@@ -0,0 +1,92 @@
+const require_utils = require('./utils-BHmeg0xb.cjs');
+let _swc_core = require("@swc/core");
+
+//#region src/plugins/webpack-plugin.ts
+const classMap = /* @__PURE__ */ new Map();
+const CLASS_FUNCTIONS = new Set([
+	"cn",
+	"cva",
+	"clsx",
+	"cx",
+	"twMerge",
+	"twJoin",
+	"classnames"
+]);
+function get(cls) {
+	if (!classMap.has(cls)) classMap.set(cls, require_utils.nanoid());
+	return classMap.get(cls);
+}
+function rewriteString(value) {
+	return value.split(/\s+/).map(get).join(" ");
+}
+function rewriteStringLiteral(node) {
+	const newValue = rewriteString(node.value);
+	node.value = newValue;
+	node.raw = JSON.stringify(newValue);
+}
+function isClassFunction(node) {
+	if (node.type !== "CallExpression") return false;
+	const callee = node.callee;
+	if (callee?.type === "Identifier") return CLASS_FUNCTIONS.has(callee.value);
+	return false;
+}
+function rewriteStringsDeep(node) {
+	if (!node || typeof node !== "object") return;
+	if (node.type === "StringLiteral") {
+		rewriteStringLiteral(node);
+		return;
+	}
+	if (node.type === "TemplateLiteral") {
+		for (const quasi of node.quasis ?? []) if (quasi.raw) {
+			const rewritten = rewriteString(quasi.raw);
+			quasi.raw = rewritten;
+			quasi.cooked = rewritten;
+		}
+		for (const expr of node.expressions ?? []) rewriteStringsDeep(expr);
+		return;
+	}
+	if (node.type === "KeyValueProperty") {
+		rewriteStringsDeep(node.value);
+		return;
+	}
+	if (Array.isArray(node)) {
+		node.forEach(rewriteStringsDeep);
+		return;
+	}
+	for (const key in node) {
+		const child = node[key];
+		if (child && typeof child === "object") rewriteStringsDeep(child);
+	}
+}
+function bundlerPlugin(source) {
+	console.log("[TailwindScramble] Webpack Plugin Initialized");
+	const ast = (0, _swc_core.parseSync)(source, {
+		syntax: "typescript",
+		tsx: true,
+		decorators: false
+	});
+	function walk(node) {
+		if (!node || typeof node !== "object") return;
+		if (node.type === "JSXAttribute" && node.name?.type === "Identifier" && node.name.value === "className") {
+			const v = node.value;
+			if (v?.type === "StringLiteral") rewriteStringLiteral(v);
+			if (v?.type === "JSXExpressionContainer") walk(v.expression);
+			return;
+		}
+		if (isClassFunction(node)) {
+			rewriteStringsDeep(node.arguments);
+			return;
+		}
+		for (const key in node) {
+			const child = node[key];
+			if (Array.isArray(child)) child.forEach(walk);
+			else if (child && typeof child === "object") walk(child);
+		}
+	}
+	walk(ast);
+	require_utils.writeMap(classMap);
+	return (0, _swc_core.printSync)(ast).code;
+}
+
+//#endregion
+module.exports = bundlerPlugin;

package/dist/webpack.d.cts

@@ -0,0 +1,3 @@
+//#region src/plugins/webpack-plugin.d.ts
+declare function bundlerPlugin(source: string): string;
+export = bundlerPlugin;

package/dist/webpack.d.mts

@@ -0,0 +1,4 @@
+//#region src/plugins/webpack-plugin.d.ts
+declare function bundlerPlugin(source: string): string;
+//#endregion
+export { bundlerPlugin as default };

package/dist/webpack.mjs

@@ -0,0 +1,92 @@
+import { r as writeMap, t as nanoid } from "./utils-B3ZyiKiX.mjs";
+import { parseSync, printSync } from "@swc/core";
+
+//#region src/plugins/webpack-plugin.ts
+const classMap = /* @__PURE__ */ new Map();
+const CLASS_FUNCTIONS = new Set([
+	"cn",
+	"cva",
+	"clsx",
+	"cx",
+	"twMerge",
+	"twJoin",
+	"classnames"
+]);
+function get(cls) {
+	if (!classMap.has(cls)) classMap.set(cls, nanoid());
+	return classMap.get(cls);
+}
+function rewriteString(value) {
+	return value.split(/\s+/).map(get).join(" ");
+}
+function rewriteStringLiteral(node) {
+	const newValue = rewriteString(node.value);
+	node.value = newValue;
+	node.raw = JSON.stringify(newValue);
+}
+function isClassFunction(node) {
+	if (node.type !== "CallExpression") return false;
+	const callee = node.callee;
+	if (callee?.type === "Identifier") return CLASS_FUNCTIONS.has(callee.value);
+	return false;
+}
+function rewriteStringsDeep(node) {
+	if (!node || typeof node !== "object") return;
+	if (node.type === "StringLiteral") {
+		rewriteStringLiteral(node);
+		return;
+	}
+	if (node.type === "TemplateLiteral") {
+		for (const quasi of node.quasis ?? []) if (quasi.raw) {
+			const rewritten = rewriteString(quasi.raw);
+			quasi.raw = rewritten;
+			quasi.cooked = rewritten;
+		}
+		for (const expr of node.expressions ?? []) rewriteStringsDeep(expr);
+		return;
+	}
+	if (node.type === "KeyValueProperty") {
+		rewriteStringsDeep(node.value);
+		return;
+	}
+	if (Array.isArray(node)) {
+		node.forEach(rewriteStringsDeep);
+		return;
+	}
+	for (const key in node) {
+		const child = node[key];
+		if (child && typeof child === "object") rewriteStringsDeep(child);
+	}
+}
+function bundlerPlugin(source) {
+	console.log("[TailwindScramble] Webpack Plugin Initialized");
+	const ast = parseSync(source, {
+		syntax: "typescript",
+		tsx: true,
+		decorators: false
+	});
+	function walk(node) {
+		if (!node || typeof node !== "object") return;
+		if (node.type === "JSXAttribute" && node.name?.type === "Identifier" && node.name.value === "className") {
+			const v = node.value;
+			if (v?.type === "StringLiteral") rewriteStringLiteral(v);
+			if (v?.type === "JSXExpressionContainer") walk(v.expression);
+			return;
+		}
+		if (isClassFunction(node)) {
+			rewriteStringsDeep(node.arguments);
+			return;
+		}
+		for (const key in node) {
+			const child = node[key];
+			if (Array.isArray(child)) child.forEach(walk);
+			else if (child && typeof child === "object") walk(child);
+		}
+	}
+	walk(ast);
+	writeMap(classMap);
+	return printSync(ast).code;
+}
+
+//#endregion
+export { bundlerPlugin as default };

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "tailwind-scramble",
+  "description": "Bundler plugin to scramble Tailwind Classes",
+  "version": "0.1.0",
+  "license": "MIT",
+  "type": "module",
+  "files": [
+    "dist/**",
+    "README.md"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/akshatmittal/tailwind-scramble.git"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    },
+    "./webpack": {
+      "import": "./dist/webpack-plugin.mjs",
+      "require": "./dist/webpack-plugin.cjs"
+    },
+    "./postcss": {
+      "import": "./dist/postcss-plugin.mjs",
+      "require": "./dist/postcss-plugin.cjs"
+    }
+  },
+  "dependencies": {
+    "@changesets/changelog-github": "^0.5.2",
+    "@changesets/cli": "^2.29.8",
+    "@changesets/config": "^3.1.2",
+    "@swc/core": "^1.15.17",
+    "nanoid": "^5.1.6"
+  },
+  "devDependencies": {
+    "@types/node": "^24.10.15",
+    "eslint": "^9.39.3",
+    "tsdown": "^0.21.0-beta.2",
+    "typescript": "^5.9.2"
+  },
+  "peerDependencies": {
+    "postcss": "^8.5.6"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "tailwindcss",
+    "scramble",
+    "tailwind",
+    "shadcn",
+    "bundler"
+  ],
+  "scripts": {
+    "lint": "eslint .",
+    "build": "tsdown",
+    "changeset": "changeset",
+    "version": "changeset version",
+    "release": "changeset publish"
+  }
+}