css-mangle-webpack-plugin - npm Package Compare versions

Comparing version 1.0.0-alpha13 to 1.0.0-alpha14

dist/core/mangler_reference.js

@@ -89,3 +89,5 @@ (function (factory) {
             if (asset.syntaxType == mangler_asset_1.ManglerAssetType.SCRIPT) {
-                return this.transformScript(t1, context);
+                const t2 = this.transformScript(t1, context);
+                const t3 = this.transformLiteral(t2, context);
+                return t3;
             }
@@ -137,8 +139,40 @@ else {
             };
-            parser.setPropertyByName("className", (oldName) => getIdentifier(".", context.parent.classMangler, oldName));
-            parser.setPropertyByName("id", (oldName) => getIdentifier("#", context.parent.idMangler, oldName));
+            const classNameBuilder = (oldName) => {
+                return getIdentifier(".", context.parent.classMangler, oldName);
+            };
+            const idNameBuilder = (oldName) => {
+                return getIdentifier("#", context.parent.idMangler, oldName);
+            };
+            parser.setPropertyByName("className", classNameBuilder);
+            parser.setPropertyByName("id", idNameBuilder);
             return parser.code;
         }
+        /** TODO: About document.querySelector, document.querySelectorAll */
+        transformLiteral(syntaxText, context) {
+            const iRegexpInst = /(?<=\w.(getElementById)\(")\s*[\w-]+?\s*(?=\")/g;
+            const cRegexpInst = /(?<=\w.(getElementsByClassName)\(")\s*[\w-]+?\s*(?=\")/g;
+            const iRegexpList = Array.from(syntaxText.matchAll(iRegexpInst));
+            const cRegexpList = Array.from(syntaxText.matchAll(cRegexpInst));
+            const objectList = [
+                ...iRegexpList.map(r => { return { type: "id", instance: r }; }),
+                ...cRegexpList.map(r => { return { type: "class", instance: r }; }),
+            ];
+            let replacedLength = 0;
+            for (const object of objectList) {
+                const global = object.instance;
+                const index = global.index + replacedLength;
+                const oldName = global[0];
+                const newName = object.type == "id"
+                    ? context.parent.idMangler.CSSPropertyOf(oldName, "#")
+                    : context.parent.classMangler.CSSPropertyOf(oldName, ".");
+                if (newName) {
+                    const result = string_1.StringUtil.replaceRange(syntaxText, index, index + oldName.length, newName.replace("#", "").replace(".", ""));
+                    replacedLength += string_1.StringUtil.replacedLength(syntaxText, result);
+                    syntaxText = result;
+                }
+            }
+            return syntaxText;
+        }
     }
     exports.CSSQueryReference = CSSQueryReference;
 });

dist/core/mangler_script.js

@@ -23,3 +23,3 @@ (function (factory) {
             recast.visit(this.ast, {
-                visitProperty: (path) => {
+                visitProperty(path) {
                     const kName = path.node.key["name"];
@@ -34,7 +34,2 @@ const value = path.node.value;
         }
-        /*
-        setPropertyLiteralByNode(path: NodePath<recast.types.ASTNode>) {
-            console.log(path.value);
-        }
-        */
         get code() {
@@ -41,0 +36,0 @@ return recast.print(this.ast).code;

dist/types/core/mangler_reference.d.ts

@@ -20,2 +20,4 @@ import { Mangler } from "./mangler";
     transformScript(sources: string, context: ManglerContext<CSSQueryManglerContext>): string;
+    /** TODO: About document.querySelector, document.querySelectorAll */
+    transformLiteral(syntaxText: string, context: ManglerContext<CSSQueryManglerContext>): string;
 }

package.json

@@ -6,3 +6,3 @@ {
   "author": "Dev Ttangkong",
-  "version": "1.0.0-alpha13",
+  "version": "1.0.0-alpha14",
   "license": "MIT",
@@ -9,0 +9,0 @@ "main": "./dist/index.js",

README.md

@@ -8,3 +8,3 @@ <div align="center">
             <th>Version</th>
-            <th>v1.0.0-alpha13</th>
+            <th>v1.0.0-alpha14</th>
           </tr>
@@ -15,3 +15,3 @@ </tbody>
 
-# Description
+# Introduction
 This webpack plugin package is a CSS mangler that globally optimizes and shortens identifier names.
@@ -18,0 +18,0 @@

src/core/mangler_reference.ts

@@ -109,3 +109,5 @@ import { StringUtil } from "../utils/string";
         if (asset.syntaxType == ManglerAssetType.SCRIPT) {
-            return this.transformScript(t1, context);
+            const t2 = this.transformScript(t1, context);
+            const t3 = this.transformLiteral(t2, context);
+            return t3;
         } else {
@@ -180,7 +182,52 @@ return t1;
 
-        parser.setPropertyByName("className", (oldName) => getIdentifier(".", context.parent.classMangler, oldName));
-        parser.setPropertyByName("id", (oldName) => getIdentifier("#", context.parent.idMangler, oldName));
+        const classNameBuilder = (oldName: string) => {
+            return getIdentifier(".", context.parent.classMangler, oldName);
+        }
 
+        const idNameBuilder = (oldName: string) => {
+            return getIdentifier("#", context.parent.idMangler, oldName);
+        }
+
+        parser.setPropertyByName("className", classNameBuilder);
+        parser.setPropertyByName("id", idNameBuilder);
+
         return parser.code;
     }
+
+    /** TODO: About document.querySelector, document.querySelectorAll */
+    transformLiteral(syntaxText: string, context: ManglerContext<CSSQueryManglerContext>): string {
+        const iRegexpInst = /(?<=\w.(getElementById)\(")\s*[\w-]+?\s*(?=\")/g;
+        const cRegexpInst = /(?<=\w.(getElementsByClassName)\(")\s*[\w-]+?\s*(?=\")/g;
+        const iRegexpList = Array.from(syntaxText.matchAll(iRegexpInst));
+        const cRegexpList = Array.from(syntaxText.matchAll(cRegexpInst));
+        const objectList = [
+            ...iRegexpList.map(r => {return {type: "id", instance: r}}),
+            ...cRegexpList.map(r => {return {type: "class", instance: r}}),
+        ];
+
+        let replacedLength = 0;
+
+        for (const object of objectList) {
+            const global = object.instance;
+            const index = global.index + replacedLength;
+            const oldName = global[0];
+            const newName = object.type == "id"
+                ? context.parent.idMangler.CSSPropertyOf(oldName, "#")
+                : context.parent.classMangler.CSSPropertyOf(oldName, ".")
+
+            if (newName) {
+                const result = StringUtil.replaceRange(
+                    syntaxText,
+                    index,
+                    index + oldName.length,
+                    newName.replace("#", "").replace(".", "")
+                );
+
+                replacedLength += StringUtil.replacedLength(syntaxText, result);
+                syntaxText = result;
+            }
+        }
+
+        return syntaxText;
+    }
 }

src/core/mangler_script.ts

@@ -14,4 +14,4 @@ import { ManglerRenameBuilder } from "../types";
         recast.visit(this.ast, {
-            visitProperty: (path) => {
-                const kName: string = path.node.key["name"];
+            visitProperty(path) {
+                const kName = path.node.key["name"];
                 const value = path.node.value;
@@ -28,8 +28,2 @@
 
-    /*
-    setPropertyLiteralByNode(path: NodePath<recast.types.ASTNode>) {
-        console.log(path.value);
-    }
-    */
-
     get code(): string {
@@ -36,0 +30,0 @@ return recast.print(this.ast).code;

No alert changes

Improved metrics

Total package byte prevSize

99735

increased by3.65%

Lines of code

2094

increased by3.2%

No dependency changes