css-shuffle 1.0.1

package/.github/workflows/npm.yml

@@ -0,0 +1,22 @@
+name: Publish Package to npmjs
+on:
+  release:
+    types: [published]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      id-token: write
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20.x'
+          registry-url: 'https://registry.npmjs.org'
+      - run: npm ci
+      - run: npm run build
+      - run: npm publish --provenance --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Oskar Karpiński
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,99 @@
+# CSS Shuffle
+
+**CSS Shuffle** is a tool for obfuscating CSS and HTML files by randomizing all CSS class names, IDs, and CSS custom properties (variables).  
+
+---
+
+## Features
+
+- Obfuscates all CSS class names, IDs, and custom properties (variables)
+- Updates references in HTML (`class`, `id`, and inline style attributes)
+- Handles both external CSS files and inline `<style>` tags in HTML
+- Outputs a mapping file for reference
+
+---
+
+## Installation
+
+```sh
+npm install css-shuffle
+```
+
+---
+
+## Usage
+
+### Astro
+
+`astro.config.mjs`
+
+```js
+// ...
+import { astro as cssShuffle } from 'css-shuffle'
+
+export default defineConfig({
+    // ...
+    integrations: [
+        // ...
+        cssShuffle()
+    ]
+});
+```
+
+### Custom
+
+```js
+import { CSSShuffle } from "css-shuffle";
+
+const cssShuffler = new CSSShuffle();
+await cssShuffler.obfuscate("./input-directory", "./output-directory");
+```
+
+- `input-directory`: Path to your source files (HTML and CSS)
+- `output-directory`: Path where the obfuscated website files will be written
+
+**Example:**
+
+```js
+await cssShuffler.obfuscate("./public", "./dist");
+```
+
+---
+
+## How It Works
+
+1. **Copies** all files from the input directory to the output directory.
+2. **Obfuscates** all CSS class names, IDs, and variables in CSS files and inline `<style>` tags.
+3. **Replaces** all references in HTML (`class`, `id`, and inline style attributes).
+4. **Outputs** the obfuscated files and a mapping (see below).
+
+---
+
+## Mapping
+
+You can get the mapping of original to obfuscated names:
+
+```js
+console.log(cssShuffler.getMappingJSON());
+```
+
+---
+
+## Requirements
+
+- Node.js
+- npm, yarn or something else
+
+---
+
+## License
+
+MIT
+
+---
+
+**Note:**
+This tool is intended for code obfuscation and not for security. Use responsibly!
+
+After obfuscation, **please thoroughly check your obfuscated website for any bugs or issues**.  
+If you notice anything not working as expected, or if you find a bug caused by the obfuscation process, **please create an issue** in the repository with details and, if possible, steps to reproduce.

package/dist/astro.d.ts

@@ -0,0 +1,3 @@
+import type { AstroIntegration } from 'astro';
+export default function cssShuffleIntegration(): AstroIntegration;
+//# sourceMappingURL=astro.d.ts.map

package/dist/astro.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"astro.d.ts","sourceRoot":"","sources":["../src/astro.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAK9C,MAAM,CAAC,OAAO,UAAU,qBAAqB,IAAI,gBAAgB,CAgBhE"}

package/dist/astro.js

@@ -0,0 +1,16 @@
+import { fileURLToPath } from 'url';
+import { CSSShuffle } from './css-shuffle.js';
+export default function cssShuffleIntegration() {
+    return {
+        name: "css-shuffle",
+        hooks: {
+            "astro:build:done": async ({ dir }) => {
+                const dist = fileURLToPath(dir);
+                const cssShuffler = new CSSShuffle();
+                await cssShuffler.obfuscate(dist);
+                cssShuffler.printStatsTable();
+                cssShuffler.saveMappingJSON(`${dist}/../mapping.json`);
+            },
+        },
+    };
+}

package/dist/css-shuffle.d.ts

@@ -0,0 +1,15 @@
+export declare class CSSShuffle {
+    private renamer;
+    private readonly stats;
+    private obfuscateName;
+    private getObfuscateName;
+    getMapping(): Map<string, string>;
+    getMappingJSON(): string;
+    saveMappingJSON(path: string): void;
+    obfuscateCSS(css: string): Promise<string>;
+    private obfuscateCSSInHtml;
+    private replaceNamesInHtml;
+    obfuscate(input: string, dist?: string): Promise<void>;
+    printStatsTable(): void;
+}
+//# sourceMappingURL=css-shuffle.d.ts.map

package/dist/css-shuffle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"css-shuffle.d.ts","sourceRoot":"","sources":["../src/css-shuffle.ts"],"names":[],"mappings":"AAWA,qBAAa,UAAU;IACnB,OAAO,CAAC,OAAO,CAAiB;IAIhC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAA4D;IAElF,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,gBAAgB;IAIxB,UAAU,IAAI,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC;IAIjC,cAAc,IAAI,MAAM;IAIxB,eAAe,CAAC,IAAI,EAAE,MAAM;IAMtB,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;IA2BhD,OAAO,CAAC,kBAAkB;IAS1B,OAAO,CAAC,kBAAkB;IA4BpB,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM;IA0E5C,eAAe;CAclB"}

package/dist/css-shuffle.js

@@ -0,0 +1,160 @@
+import fs from "fs";
+import { globby } from "globby";
+import * as cheerio from "cheerio";
+import { Table } from "console-table-printer";
+import prettyBytes from "pretty-bytes";
+import postcss, { Root } from "postcss";
+import selectorParser from "postcss-selector-parser";
+import valueParser from "postcss-value-parser";
+import { Renamer } from "./renamer.js";
+export class CSSShuffle {
+    renamer = new Renamer();
+    // private readonly stats = new Table();
+    stats = new Map();
+    obfuscateName(originalName) {
+        return this.renamer.rename(originalName);
+    }
+    getObfuscateName(key) {
+        return this.renamer.get(key);
+    }
+    getMapping() {
+        return this.renamer.renames;
+    }
+    getMappingJSON() {
+        return JSON.stringify(Object.fromEntries(this.getMapping()), null, 2);
+    }
+    saveMappingJSON(path) {
+        const mapping = this.getMappingJSON();
+        fs.writeFileSync(path, mapping);
+    }
+    async obfuscateCSS(css) {
+        return await postcss([
+            (root) => {
+                root.walkRules(rule => {
+                    rule.selector = selectorParser(selectors => {
+                        selectors.walkClasses(node => { node.value = this.obfuscateName(node.value); });
+                        selectors.walkIds(node => { node.value = this.obfuscateName(node.value); });
+                    }).processSync(rule.selector);
+                });
+                root.walkDecls(decl => {
+                    if (decl.prop.startsWith("--")) {
+                        decl.prop = `--${this.obfuscateName(decl.prop.substring(2))}`;
+                    }
+                    const parsedValue = valueParser(decl.value);
+                    parsedValue.walk(node => {
+                        if (node.type === 'function' && node.value === 'var' && node.nodes[0]) {
+                            node.nodes[0].value = `--${this.obfuscateName(node.nodes[0].value.substring(2))}`;
+                        }
+                    });
+                    decl.value = parsedValue.toString();
+                });
+            }
+        ]).process(css, { from: undefined }).then(result => result.css);
+    }
+    obfuscateCSSInHtml(html) {
+        const styleTagRegex = /<style[^>]*>([\s\S]*?)<\/style>/gi;
+        return html.replace(styleTagRegex, (_, p1) => {
+            let styleContent = p1;
+            styleContent = this.obfuscateCSS(styleContent);
+            return `<style>${styleContent}</style>`;
+        });
+    }
+    replaceNamesInHtml(html) {
+        const $ = cheerio.load(html);
+        $('[class]').each((_, e) => {
+            const classes = $(e).attr('class').split(/\s+/).filter(Boolean);
+            const newClasses = classes.map(cls => this.getObfuscateName(cls) || cls);
+            $(e).attr('class', newClasses.join(' '));
+        });
+        $('[id]').each((_, e) => {
+            const id = $(e).attr('id');
+            $(e).attr('id', this.getObfuscateName(id));
+        });
+        $('[for]').each((_, e) => {
+            const id = $(e).attr('for');
+            $(e).attr('for', this.getObfuscateName(id));
+        });
+        $('a[href^="#"]').each((_, e) => {
+            const href = $(e).attr('href');
+            const target = href.slice(1);
+            $(e).attr('href', '#' + this.getObfuscateName(target));
+        });
+        return $.html();
+    }
+    async obfuscate(input, dist) {
+        if (dist == undefined) {
+            dist = input;
+        }
+        if (input != dist) {
+            // copy files from input dir to output dir
+            if (fs.existsSync(dist)) {
+                fs.rmSync(dist, { recursive: true, force: true });
+            }
+            fs.mkdirSync(dist, { recursive: true });
+            fs.cpSync(input, dist, { recursive: true });
+        }
+        const htmlFiles = await globby(['**/*.html'], { cwd: dist, absolute: true });
+        const cssFiles = await globby(['**/*.css'], { cwd: dist, absolute: true });
+        // Obfuscate CSS files
+        for (const cssFile of cssFiles) {
+            const cssContent = fs.readFileSync(cssFile, 'utf-8');
+            const obfuscatedCss = await this.obfuscateCSS(cssContent);
+            fs.writeFileSync(cssFile, obfuscatedCss, 'utf-8');
+            const oldSize = cssContent.length;
+            const newSize = obfuscatedCss.length;
+            if (oldSize != newSize) {
+                const fileName = cssFile.replace(dist, '');
+                this.stats.set(fileName, {
+                    orginalSize: oldSize,
+                    newSize: newSize
+                });
+            }
+        }
+        // Obfuscate CSS in <style> tag in HTML files
+        for (const htmlFile of htmlFiles) {
+            const htmlContent = fs.readFileSync(htmlFile, 'utf-8');
+            let obfuscatedHtmlContent = this.obfuscateCSSInHtml(htmlContent);
+            fs.writeFileSync(htmlFile, obfuscatedHtmlContent, 'utf-8');
+            const oldSize = htmlContent.length;
+            const newSize = obfuscatedHtmlContent.length;
+            if (oldSize != newSize) {
+                const fileName = htmlFile.replace(dist, '');
+                this.stats.set(fileName, {
+                    orginalSize: oldSize,
+                    newSize: newSize
+                });
+            }
+        }
+        // Export export obfuscated names to HTML
+        for (const htmlFile of htmlFiles) {
+            const htmlContent = fs.readFileSync(htmlFile, 'utf-8');
+            let newHtmlContent = this.replaceNamesInHtml(htmlContent);
+            fs.writeFileSync(htmlFile, newHtmlContent, 'utf-8');
+            let orginalSize = htmlContent.length;
+            const newSize = newHtmlContent.length;
+            if (orginalSize != newSize) {
+                const fileName = htmlFile.replace(dist, '');
+                // this file maybe already obfuscated so get the really orginal file size
+                const fileStats = this.stats.get(fileName);
+                if (fileStats != undefined)
+                    orginalSize = fileStats.orginalSize;
+                this.stats.set(fileName, {
+                    orginalSize: orginalSize,
+                    newSize: newSize
+                });
+            }
+        }
+    }
+    printStatsTable() {
+        const table = new Table();
+        this.stats.forEach((stats, file) => {
+            table.addRow({
+                File: file,
+                'Original Size': prettyBytes(stats.orginalSize),
+                'New Size': prettyBytes(stats.newSize),
+                Reduced: `${(((stats.orginalSize - stats.newSize) / stats.orginalSize) * 100) | 0}%`,
+            });
+        });
+        table.printTable();
+    }
+}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { CSSShuffle } from "./css-shuffle.js";
+export { default as astro } from "./astro.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,YAAY,CAAC"}

package/dist/index.js

@@ -0,0 +1,2 @@
+export { CSSShuffle } from "./css-shuffle.js";
+export { default as astro } from "./astro.js";

package/dist/renamer.d.ts

@@ -0,0 +1,8 @@
+export declare class Renamer {
+    private nextIndex;
+    /** Map of original names to their new obfuscated names */
+    readonly renames: Map<string, string>;
+    rename(key: string): string;
+    get(key: string): string;
+}
+//# sourceMappingURL=renamer.d.ts.map

package/dist/renamer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renamer.d.ts","sourceRoot":"","sources":["../src/renamer.ts"],"names":[],"mappings":"AAGA,qBAAa,OAAO;IAChB,OAAO,CAAC,SAAS,CAAK;IAEtB,0DAA0D;IAC1D,QAAQ,CAAC,OAAO,sBAA6B;IAE7C,MAAM,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM;IAyB3B,GAAG,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM;CAK3B"}

package/dist/renamer.js

@@ -0,0 +1,32 @@
+const START_CHARS = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
+const NEXT_CHARS = START_CHARS + '0123456789';
+export class Renamer {
+    nextIndex = 0;
+    /** Map of original names to their new obfuscated names */
+    renames = new Map();
+    rename(key) {
+        if (this.renames.has(key)) {
+            return this.renames.get(key);
+        }
+        let index = this.nextIndex;
+        let name = '';
+        // First character
+        name = START_CHARS[index % START_CHARS.length] + name;
+        index = Math.floor(index / START_CHARS.length);
+        // Subsequent characters
+        while (index > 0) {
+            index--; // Adjust for 0-based index
+            name = NEXT_CHARS[index % NEXT_CHARS.length] + name;
+            index = Math.floor(index / NEXT_CHARS.length);
+        }
+        this.renames.set(key, name);
+        this.nextIndex++;
+        return name;
+    }
+    get(key) {
+        let value = this.renames.get(key);
+        if (value == undefined)
+            return key;
+        return value;
+    }
+}

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "css-shuffle",
+  "version": "1.0.1",
+  "description": "Tool for obfuscating and randomizing all CSS classes and ID names in your HTML, CSS files.",
+  "main": "dist/index.js",
+  "type": "module",
+  "scripts": {
+    "build": "tsc"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/M3DZIK/css-shuffle.git"
+  },
+  "author": "Oskar Karpiński",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/M3DZIK/css-shuffle/issues"
+  },
+  "homepage": "https://github.com/M3DZIK/css-shuffle#readme",
+  "dependencies": {
+    "cheerio": "^1.1.2",
+    "console-table-printer": "^2.14.6",
+    "globby": "^14.1.0",
+    "postcss": "^8.5.6",
+    "postcss-selector-parser": "^7.1.0",
+    "postcss-value-parser": "^4.2.0",
+    "pretty-bytes": "^7.0.1"
+  },
+  "devDependencies": {
+    "@types/css-tree": "^2.3.10",
+    "@types/node": "^24.3.0",
+    "astro": "^5.13.3",
+    "typescript": "^5.9.2"
+  }
+}

package/tsconfig.json

@@ -0,0 +1,44 @@
+{
+  // Visit https://aka.ms/tsconfig to read more about this file
+  "compilerOptions": {
+    // File Layout
+    "rootDir": "./src",
+    "outDir": "./dist",
+
+    // Environment Settings
+    // See also https://aka.ms/tsconfig/module
+    "module": "nodenext",
+    "target": "esnext",
+    // "types": [],
+    // For nodejs:
+    // "lib": ["esnext"],
+    "types": ["node"],
+    // and npm install -D @types/node
+
+    // Other Outputs
+    // "sourceMap": true,
+    "declaration": true,
+    "declarationMap": true,
+
+    // Stricter Typechecking Options
+    "noUncheckedIndexedAccess": true,
+    // "exactOptionalPropertyTypes": true,
+
+    // Style Options
+    // "noImplicitReturns": true,
+    // "noImplicitOverride": true,
+    // "noUnusedLocals": true,
+    // "noUnusedParameters": true,
+    // "noFallthroughCasesInSwitch": true,
+    // "noPropertyAccessFromIndexSignature": true,
+
+    // Recommended Options
+    "strict": false,
+    // "jsx": "react-jsx",
+    "verbatimModuleSyntax": true,
+    "isolatedModules": true,
+    "noUncheckedSideEffectImports": true,
+    "moduleDetection": "force",
+    "skipLibCheck": true,
+  }
+}