css-shuffle 1.0.1 → 1.1.0

package/.idea/css-shuffle.iml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="JAVA_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

package/.idea/go.imports.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="GoImports">
+    <option name="excludedPackages">
+      <array>
+        <option value="golang.org/x/net/context" />
+      </array>
+    </option>
+  </component>
+</project>

package/.idea/misc.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectRootManager" version="2" languageLevel="JDK_21" default="true" project-jdk-name="21" project-jdk-type="JavaSDK">
+    <output url="file://$PROJECT_DIR$/out" />
+  </component>
+</project>

package/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/css-shuffle.iml" filepath="$PROJECT_DIR$/.idea/css-shuffle.iml" />
+    </modules>
+  </component>
+</project>

package/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>

package/dist/css-shuffle.d.ts

@@ -6,8 +6,10 @@ export declare class CSSShuffle {
     getMapping(): Map<string, string>;
     getMappingJSON(): string;
     saveMappingJSON(path: string): void;
+    obfuscateJS(js: string): Promise<string>;
     obfuscateCSS(css: string): Promise<string>;
     private obfuscateCSSInHtml;
+    private obfuscateSelector;
     private replaceNamesInHtml;
     obfuscate(input: string, dist?: string): Promise<void>;
     printStatsTable(): void;

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

@@ -1 +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"}
+{"version":3,"file":"css-shuffle.d.ts","sourceRoot":"","sources":["../src/css-shuffle.ts"],"names":[],"mappings":"AAmBA,qBAAa,UAAU;IACnB,OAAO,CAAC,OAAO,CAAiB;IAEhC,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,WAAW,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;IAoIxC,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;YA2BlC,kBAAkB;IAehC,OAAO,CAAC,iBAAiB;YAYX,kBAAkB;IAsC1B,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM;IA0E5C,eAAe;CAclB"}

package/dist/css-shuffle.js

@@ -6,10 +6,16 @@ import prettyBytes from "pretty-bytes";
 import postcss, { Root } from "postcss";
 import selectorParser from "postcss-selector-parser";
 import valueParser from "postcss-value-parser";
+import * as parser from '@babel/parser';
+import _traverse from '@babel/traverse';
+const traverse = (_traverse).default;
+import _generate from '@babel/generator';
+const generate = (_generate).default;
+import * as t from '@babel/types';
 import { Renamer } from "./renamer.js";
+import { isDomElement } from "./javascript-obfuscator.js";
 export class CSSShuffle {
     renamer = new Renamer();
-    // private readonly stats = new Table();
     stats = new Map();
     obfuscateName(originalName) {
         return this.renamer.rename(originalName);
@@ -27,6 +33,127 @@ export class CSSShuffle {
         const mapping = this.getMappingJSON();
         fs.writeFileSync(path, mapping);
     }
+    async obfuscateJS(js) {
+        const ast = parser.parse(js, {
+            sourceType: 'script',
+            plugins: ['classProperties'],
+            errorRecovery: true,
+        });
+        const getStringValue = (node) => {
+            if (t.isStringLiteral(node))
+                return node.value;
+            if (t.isTemplateLiteral(node) && node.quasis.length === 1 && node.expressions.length === 0) {
+                return node.quasis[0].value.cooked || node.quasis[0].value.raw;
+            }
+            return null;
+        };
+        const createStringNode = (originalNode, value) => {
+            if (t.isTemplateLiteral(originalNode)) {
+                return t.templateLiteral([t.templateElement({ raw: value, cooked: value }, true)], []);
+            }
+            return t.stringLiteral(value);
+        };
+        traverse(ast, {
+            CallExpression: (path) => {
+                const { callee, arguments: args } = path.node;
+                if (!t.isMemberExpression(callee))
+                    return;
+                const object = callee.object;
+                const method = callee.property;
+                if (!t.isIdentifier(method))
+                    return;
+                // ── classList.add/remove/toggle/contains/replace ──────────────────
+                if (t.isMemberExpression(object) &&
+                    t.isIdentifier(object.property, { name: 'classList' }) &&
+                    ['add', 'remove', 'toggle', 'contains', 'replace'].includes(method.name) &&
+                    isDomElement(object.object, path.scope) // ← guard
+                ) {
+                    args.forEach((arg, i) => {
+                        const val = getStringValue(arg);
+                        if (val !== null) {
+                            const obf = this.getObfuscateName(val);
+                            if (obf)
+                                args[i] = createStringNode(arg, obf);
+                        }
+                    });
+                }
+                // ── querySelector / querySelectorAll ──────────────────────────────
+                if (['querySelector', 'querySelectorAll'].includes(method.name) &&
+                    args.length === 1 &&
+                    isDomElement(object, path.scope) // ← guard
+                ) {
+                    const val = getStringValue(args[0]);
+                    if (val !== null) {
+                        args[0] = createStringNode(args[0], this.obfuscateSelector(val));
+                    }
+                }
+                // ── getElementById ────────────────────────────────────────────────
+                if (method.name === 'getElementById' &&
+                    args.length === 1 &&
+                    isDomElement(object, path.scope) // ← guard
+                ) {
+                    const val = getStringValue(args[0]);
+                    if (val !== null) {
+                        const obf = this.getObfuscateName(val);
+                        if (obf)
+                            args[0] = createStringNode(args[0], obf);
+                    }
+                }
+                // ── getElementsByClassName ────────────────────────────────────────
+                if (method.name === 'getElementsByClassName' &&
+                    args.length === 1 &&
+                    isDomElement(object, path.scope) // ← guard
+                ) {
+                    const val = getStringValue(args[0]);
+                    if (val !== null) {
+                        const obf = this.getObfuscateName(val);
+                        if (obf)
+                            args[0] = createStringNode(args[0], obf);
+                    }
+                }
+                // ── setAttribute('class'/'id', ...) ───────────────────────────────
+                if (method.name === 'setAttribute' &&
+                    args.length === 2 &&
+                    isDomElement(object, path.scope) // ← guard
+                ) {
+                    const attrName = getStringValue(args[0]);
+                    const attrVal = getStringValue(args[1]);
+                    if (attrName !== null && attrVal !== null) {
+                        if (attrName === 'class') {
+                            const newVal = attrVal
+                                .split(/\s+/)
+                                .map(cls => this.getObfuscateName(cls) || cls)
+                                .join(' ');
+                            args[1] = createStringNode(args[1], newVal);
+                        }
+                        else if (attrName === 'id') {
+                            const obf = this.getObfuscateName(attrVal);
+                            if (obf)
+                                args[1] = createStringNode(args[1], obf);
+                        }
+                    }
+                }
+            },
+            // ── element.className = 'foo bar' ─────────────────────────────────────
+            AssignmentExpression: (path) => {
+                const { left, right } = path.node;
+                if (t.isMemberExpression(left) &&
+                    t.isIdentifier(left.property, { name: 'className' }) &&
+                    isDomElement(left.object, path.scope) // ← guard
+                ) {
+                    const val = getStringValue(right);
+                    if (val !== null) {
+                        const newVal = val
+                            .split(/\s+/)
+                            .map(cls => this.getObfuscateName(cls) || cls)
+                            .join(' ');
+                        path.node.right = createStringNode(right, newVal);
+                    }
+                }
+            },
+        });
+        return generate(ast, { retainLines: true }, js).code;
+    }
     async obfuscateCSS(css) {
         return await postcss([
             (root) => {
@@ -51,15 +178,32 @@ export class CSSShuffle {
             }
         ]).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>`;
+    async obfuscateCSSInHtml(html) {
+        const $ = cheerio.load(html);
+        const styles = $('style').toArray();
+        for (const style of styles) {
+            const $style = $(style);
+            const content = $style.html();
+            if (content) {
+                const obfuscatedContent = await this.obfuscateCSS(content);
+                $style.html(obfuscatedContent);
+            }
+        }
+        return $.html();
+    }
+    // Reuse your existing CSS selector obfuscation logic
+    obfuscateSelector(selector) {
+        return selector
+            .replace(/\.([a-zA-Z0-9_-]+)/g, (_, cls) => {
+            const obf = this.getObfuscateName(cls);
+            return obf ? `.${obf}` : `.${cls}`;
+        })
+            .replace(/#([a-zA-Z0-9_-]+)/g, (_, id) => {
+            const obf = this.getObfuscateName(id);
+            return obf ? `#${obf}` : `#${id}`;
         });
     }
-    replaceNamesInHtml(html) {
+    async replaceNamesInHtml(html) {
         const $ = cheerio.load(html);
         $('[class]').each((_, e) => {
             const classes = $(e).attr('class').split(/\s+/).filter(Boolean);
@@ -79,6 +223,15 @@ export class CSSShuffle {
             const target = href.slice(1);
             $(e).attr('href', '#' + this.getObfuscateName(target));
         });
+        const scripts = $('script').toArray();
+        for (const script of scripts) {
+            const $script = $(script);
+            const content = $script.html();
+            if (content) {
+                const obfuscatedContent = await this.obfuscateJS(content);
+                $script.html(obfuscatedContent);
+            }
+        }
         return $.html();
     }
     async obfuscate(input, dist) {
@@ -113,7 +266,7 @@ export class CSSShuffle {
         // 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);
+            let obfuscatedHtmlContent = await this.obfuscateCSSInHtml(htmlContent);
             fs.writeFileSync(htmlFile, obfuscatedHtmlContent, 'utf-8');
             const oldSize = htmlContent.length;
             const newSize = obfuscatedHtmlContent.length;
@@ -128,7 +281,7 @@ export class CSSShuffle {
         // Export export obfuscated names to HTML
         for (const htmlFile of htmlFiles) {
             const htmlContent = fs.readFileSync(htmlFile, 'utf-8');
-            let newHtmlContent = this.replaceNamesInHtml(htmlContent);
+            let newHtmlContent = await this.replaceNamesInHtml(htmlContent);
             fs.writeFileSync(htmlFile, newHtmlContent, 'utf-8');
             let orginalSize = htmlContent.length;
             const newSize = newHtmlContent.length;

package/dist/javascript-obfuscator.d.ts

@@ -0,0 +1,3 @@
+import * as t from '@babel/types';
+export declare function isDomElement(node: t.Node, scope: any): boolean;
+//# sourceMappingURL=javascript-obfuscator.d.ts.map

package/dist/javascript-obfuscator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"javascript-obfuscator.d.ts","sourceRoot":"","sources":["../src/javascript-obfuscator.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,CAAC,MAAM,cAAc,CAAC;AAiClC,wBAAgB,YAAY,CAAC,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,GAAG,OAAO,CAkE9D"}

package/dist/javascript-obfuscator.js

@@ -0,0 +1,84 @@
+import * as t from '@babel/types';
+// DOM-producing methods that return elements
+const DOM_ELEMENT_SOURCES = new Set([
+    'getElementById',
+    'getElementsByClassName',
+    'getElementsByTagName',
+    'getElementsByName',
+    'querySelector',
+    'querySelectorAll',
+    'createElement',
+    'createElementNS',
+    'closest',
+    'parentElement',
+    'firstElementChild',
+    'lastElementChild',
+    'nextElementSibling',
+    'previousElementSibling',
+]);
+// Properties on DOM elements that return elements
+const DOM_ELEMENT_PROPERTIES = new Set([
+    'parentElement',
+    'firstElementChild',
+    'lastElementChild',
+    'nextElementSibling',
+    'previousElementSibling',
+    'ownerDocument',
+    'body',
+    'head',
+    'documentElement',
+]);
+export function isDomElement(node, scope) {
+    // document.getElementById(...) / document.querySelector(...) inline
+    if (t.isCallExpression(node)) {
+        const callee = node.callee;
+        if (t.isMemberExpression(callee) && t.isIdentifier(callee.property)) {
+            // document.X() or element.X()
+            if (DOM_ELEMENT_SOURCES.has(callee.property.name)) {
+                return true;
+            }
+        }
+        return false;
+    }
+    // document.body / document.head / document.documentElement
+    if (t.isMemberExpression(node)) {
+        if (t.isIdentifier(node.property) && DOM_ELEMENT_PROPERTIES.has(node.property.name)) {
+            return true;
+        }
+        return false;
+    }
+    // Identifier — look up what it was assigned from
+    if (t.isIdentifier(node)) {
+        // Well-known globals
+        if (['document', 'window', 'HTMLElement'].includes(node.name)) {
+            return true;
+        }
+        const binding = scope.getBinding(node.name);
+        if (!binding)
+            return false;
+        const bindingPath = binding.path;
+        // const el = document.querySelector(...)
+        // const el = someEl.closest(...)
+        if (t.isVariableDeclarator(bindingPath.node) && bindingPath.node.init) {
+            return isDomElement(bindingPath.node.init, bindingPath.scope);
+        }
+        // function param: forEach(link => link.addEventListener...)
+        // treat params of callbacks whose parent array is DOM-sourced
+        if (bindingPath.node.type === 'Identifier' && bindingPath.parentPath) {
+            const parent = bindingPath.parentPath.node;
+            // Arrow/function param in .forEach/.map etc on a DOM NodeList/array
+            if (t.isArrowFunctionExpression(parent) || t.isFunctionExpression(parent)) {
+                const callPath = bindingPath.parentPath.parentPath;
+                if (callPath &&
+                    t.isCallExpression(callPath.node) &&
+                    t.isMemberExpression(callPath.node.callee) &&
+                    t.isIdentifier(callPath.node.callee.property) &&
+                    ['forEach', 'map', 'filter', 'find'].includes(callPath.node.callee.property.name)) {
+                    // Check if the array/NodeList being iterated is DOM-sourced
+                    return isDomElement(callPath.node.callee.object, callPath.scope);
+                }
+            }
+        }
+    }
+    return false;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "css-shuffle",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Tool for obfuscating and randomizing all CSS classes and ID names in your HTML, CSS files.",
   "main": "dist/index.js",
   "type": "module",
@@ -18,6 +18,10 @@
   },
   "homepage": "https://github.com/M3DZIK/css-shuffle#readme",
   "dependencies": {
+    "@babel/generator": "^7.29.1",
+    "@babel/parser": "^7.29.2",
+    "@babel/traverse": "^7.29.0",
+    "@babel/types": "^7.29.0",
     "cheerio": "^1.1.2",
     "console-table-printer": "^2.14.6",
     "globby": "^14.1.0",
@@ -27,6 +31,8 @@
     "pretty-bytes": "^7.0.1"
   },
   "devDependencies": {
+    "@types/babel__generator": "^7.27.0",
+    "@types/babel__traverse": "^7.28.0",
     "@types/css-tree": "^2.3.10",
     "@types/node": "^24.3.0",
     "astro": "^5.13.3",