unplugin-tailwindcss-mangle 0.0.5 → 0.1.1

package/dist/index.mjs

@@ -1,14 +1,19 @@
 import { createUnplugin } from 'unplugin';
-import { getClassCacheSet } from 'tailwindcss-patch';
+import micromatch from 'micromatch';
+import fs from 'fs';
+import path from 'path';
 import { html, defaultTreeAdapter, parse, serialize } from 'parse5';
-import _generate from '@babel/generator';
-import { parse as parse$1 } from '@babel/parser';
-import _traverse from '@babel/traverse';
+import { transformSync } from '@babel/core';
 import postcss from 'postcss';
 import parser from 'postcss-selector-parser';
+import { getClassCacheSet } from 'tailwindcss-patch';
 
 const pluginName = 'unplugin-tailwindcss-mangle';
 
+const { isMatch } = micromatch;
+const isMangleClass = (className) => {
+    return /[-:]/.test(className);
+};
 function groupBy(arr, cb) {
     if (!Array.isArray(arr)) {
         throw new Error('expected an array for first argument');
@@ -38,7 +43,7 @@ function getGroupedEntries(entries, options = {
         return /\.html?$/.test(file);
     },
     jsMatcher(file) {
-        return /\.js$/.test(file);
+        return /\.[cm]?js$/.test(file);
     }
 }) {
     const { cssMatcher, htmlMatcher, jsMatcher } = options;
@@ -56,6 +61,18 @@ function getGroupedEntries(entries, options = {
             return 'other';
         }
     });
+    if (!groupedEntries.css) {
+        groupedEntries.css = [];
+    }
+    if (!groupedEntries.html) {
+        groupedEntries.html = [];
+    }
+    if (!groupedEntries.js) {
+        groupedEntries.js = [];
+    }
+    if (!groupedEntries.other) {
+        groupedEntries.other = [];
+    }
     return groupedEntries;
 }
 const acceptChars = 'abcdefghijklmnopqrstuvwxyz'.split('');
@@ -91,97 +108,36 @@ function escapeStringRegexp(str) {
     }
     return str.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&').replace(/-/g, '\\x2d');
 }
-
-class ClassGenerator {
-    constructor(opts = {}) {
-        var _a;
-        this.newClassMap = {};
-        this.newClassSize = 0;
-        this.context = {};
-        this.opts = opts;
-        this.classPrefix = (_a = opts.classPrefix) !== null && _a !== void 0 ? _a : 'tw-';
-    }
-    defaultClassGenerate() {
-        const chars = [];
-        let rest = (this.newClassSize - (this.newClassSize % acceptChars.length)) / acceptChars.length;
-        if (rest > 0) {
-            while (true) {
-                rest -= 1;
-                const m = rest % acceptChars.length;
-                const c = acceptChars[m];
-                chars.push(c);
-                rest -= m;
-                if (rest === 0) {
-                    break;
-                }
-                rest /= acceptChars.length;
-            }
-        }
-        const prefixIndex = this.newClassSize % acceptChars.length;
-        const newClassName = `${this.classPrefix}${acceptChars[prefixIndex]}${chars.join('')}`;
-        return newClassName;
-    }
-    ignoreClassName(className) {
-        return regExpTest(this.opts.ignoreClass, className);
-    }
-    includeFilePath(filePath) {
-        const { include } = this.opts;
-        if (Array.isArray(include)) {
-            return regExpTest(include, filePath);
-        }
-        else {
-            return true;
-        }
-    }
-    excludeFilePath(filePath) {
-        const { exclude } = this.opts;
-        if (Array.isArray(exclude)) {
-            return regExpTest(exclude, filePath);
-        }
-        else {
-            return false;
-        }
+function createGlobMatcher(pattern, fallbackValue = false) {
+    if (typeof pattern === 'undefined') {
+        return function (file) {
+            return fallbackValue;
+        };
     }
-    isFileIncluded(filePath) {
-        return this.includeFilePath(filePath) && !this.excludeFilePath(filePath);
+    return function (file) {
+        return isMatch(file, pattern);
+    };
+}
+function getCacheDir(basedir = process.cwd()) {
+    return path.resolve(basedir, 'node_modules/.cache', pluginName);
+}
+function mkCacheDirectory(cwd = process.cwd()) {
+    const cacheDirectory = getCacheDir(cwd);
+    const exists = fs.existsSync(cacheDirectory);
+    if (!exists) {
+        fs.mkdirSync(cacheDirectory, {
+            recursive: true
+        });
     }
-    transformCssClass(className) {
-        const key = stripEscapeSequence(className);
-        const cn = this.newClassMap[key];
-        if (cn)
-            return cn.name;
-        return className;
+    return cacheDirectory;
+}
+function cacheDump(filename, data, basedir) {
+    try {
+        const dir = mkCacheDirectory(basedir);
+        fs.writeFileSync(path.resolve(dir, filename), JSON.stringify(Array.from(data), null, 2), 'utf-8');
     }
-    generateClassName(original) {
-        const opts = this.opts;
-        original = stripEscapeSequence(original);
-        const cn = this.newClassMap[original];
-        if (cn)
-            return cn;
-        let newClassName;
-        if (opts.customGenerate && typeof opts.customGenerate === 'function') {
-            newClassName = opts.customGenerate(original, opts, this.context);
-        }
-        if (!newClassName) {
-            newClassName = this.defaultClassGenerate();
-        }
-        if (opts.reserveClassName && regExpTest(opts.reserveClassName, newClassName)) {
-            if (opts.log) {
-                console.log(`The class name has been reserved. ${newClassName}`);
-            }
-            this.newClassSize++;
-            return this.generateClassName(original);
-        }
-        if (opts.log) {
-            console.log(`Minify class name from ${original} to ${newClassName}`);
-        }
-        const newClass = {
-            name: newClassName,
-            usedBy: []
-        };
-        this.newClassMap[original] = newClass;
-        this.newClassSize++;
-        return newClass;
+    catch (error) {
+        console.log(error);
     }
 }
 
@@ -243,12 +199,12 @@ defaultTreeAdapter.appendChild;
  * @param {ParentNode=} parent Parent node of the current node
  * @return {void}
  */
-function traverse$1(node, visitor, parent) {
+function traverse(node, visitor, parent) {
     const shouldVisitChildren = typeof visitor['pre:node'] !== 'function' ||
         visitor['pre:node'](node, parent) !== false;
     if (shouldVisitChildren && isParentNode(node)) {
         for (const child of node.childNodes) {
-            traverse$1(child, visitor, node);
+            traverse(child, visitor, node);
         }
     }
     if (typeof visitor.node === 'function') {
@@ -281,7 +237,7 @@ function traverse$1(node, visitor, parent) {
 function htmlHandler(rawSource, options) {
     const { runtimeSet, classGenerator } = options;
     const fragment = parse(rawSource);
-    traverse$1(fragment, {
+    traverse(fragment, {
         element(node, parent) {
             const attr = node.attrs.find((x) => x.name === 'class');
             if (attr) {
@@ -306,11 +262,6 @@ function isValidSelector(selector = '') {
 }
 const splitCode = (code) => code.split(/[\s"]+/).filter(isValidSelector);
 
-function getDefaultExportFromNamespaceIfPresent(n) {
-    return n && Object.prototype.hasOwnProperty.call(n, 'default') ? n.default : n;
-}
-const generate = getDefaultExportFromNamespaceIfPresent(_generate);
-const traverse = getDefaultExportFromNamespaceIfPresent(_traverse);
 function makeRegex(str) {
     return new RegExp('(?<=^|[\\s"])' + escapeStringRegexp(str), 'g');
 }
@@ -334,24 +285,33 @@ function handleValue(str, node, options) {
     return rawStr;
 }
 function jsHandler(rawSource, options) {
-    const ast = parse$1(rawSource);
-    const topt = {
-        StringLiteral: {
-            enter(p) {
-                const n = p.node;
-                n.value = handleValue(n.value, n, options);
-            }
-        },
-        TemplateElement: {
-            enter(p) {
-                const n = p.node;
-                n.value.raw = handleValue(n.value.raw, n, options);
+    const result = transformSync(rawSource, {
+        babelrc: false,
+        ast: true,
+        plugins: [
+            () => {
+                return {
+                    visitor: {
+                        StringLiteral: {
+                            enter(p) {
+                                const n = p.node;
+                                n.value = handleValue(n.value, n, options);
+                            }
+                        },
+                        TemplateElement: {
+                            enter(p) {
+                                const n = p.node;
+                                n.value.raw = handleValue(n.value.raw, n, options);
+                            }
+                        }
+                    }
+                };
             }
-        },
-        noScope: true
-    };
-    traverse(ast, topt);
-    return generate(ast);
+        ],
+        sourceMaps: false,
+        configFile: false
+    });
+    return result;
 }
 
 const postcssPlugin = 'postcss-mangle-tailwindcss-plugin';
@@ -366,10 +326,19 @@ const postcssMangleTailwindcssPlugin = (options) => {
         postcssPlugin,
         Rule(rule, helper) {
             rule.selector = parser((selectors) => {
-                selectors.walk((s) => {
+                selectors.walkClasses((s) => {
                     if (s.value) {
                         const hit = newClassMap[s.value];
                         if (hit) {
+                            if (s.parent) {
+                                const idx = s.parent.nodes.indexOf(s);
+                                if (idx > -1) {
+                                    const nextNode = s.parent.nodes[idx + 1];
+                                    if (nextNode && nextNode.type === 'attribute' && nextNode.attribute.indexOf('data-v-') > -1) {
+                                        return;
+                                    }
+                                }
+                            }
                             s.value = hit.name;
                         }
                     }
@@ -388,22 +357,155 @@ function cssHandler(rawSource, options) {
     ]).process(rawSource).css;
 }
 
-const unplugin = createUnplugin((options = {}, meta) => {
-    const isMangleClass = (className) => {
-        return /[-:]/.test(className);
-    };
+class ClassGenerator {
+    newClassMap;
+    newClassSize;
+    context;
+    opts;
+    classPrefix;
+    constructor(opts = {}) {
+        this.newClassMap = {};
+        this.newClassSize = 0;
+        this.context = {};
+        this.opts = opts;
+        this.classPrefix = opts.classPrefix ?? 'tw-';
+    }
+    defaultClassGenerate() {
+        const chars = [];
+        let rest = (this.newClassSize - (this.newClassSize % acceptChars.length)) / acceptChars.length;
+        if (rest > 0) {
+            while (true) {
+                rest -= 1;
+                const m = rest % acceptChars.length;
+                const c = acceptChars[m];
+                chars.push(c);
+                rest -= m;
+                if (rest === 0) {
+                    break;
+                }
+                rest /= acceptChars.length;
+            }
+        }
+        const prefixIndex = this.newClassSize % acceptChars.length;
+        const newClassName = `${this.classPrefix}${acceptChars[prefixIndex]}${chars.join('')}`;
+        return newClassName;
+    }
+    ignoreClassName(className) {
+        return regExpTest(this.opts.ignoreClass, className);
+    }
+    includeFilePath(filePath) {
+        const { include } = this.opts;
+        if (Array.isArray(include)) {
+            return regExpTest(include, filePath);
+        }
+        else {
+            return true;
+        }
+    }
+    excludeFilePath(filePath) {
+        const { exclude } = this.opts;
+        if (Array.isArray(exclude)) {
+            return regExpTest(exclude, filePath);
+        }
+        else {
+            return false;
+        }
+    }
+    isFileIncluded(filePath) {
+        return this.includeFilePath(filePath) && !this.excludeFilePath(filePath);
+    }
+    transformCssClass(className) {
+        const key = stripEscapeSequence(className);
+        const cn = this.newClassMap[key];
+        if (cn)
+            return cn.name;
+        return className;
+    }
+    generateClassName(original) {
+        const opts = this.opts;
+        original = stripEscapeSequence(original);
+        const cn = this.newClassMap[original];
+        if (cn)
+            return cn;
+        let newClassName;
+        if (opts.customGenerate && typeof opts.customGenerate === 'function') {
+            newClassName = opts.customGenerate(original, opts, this.context);
+        }
+        if (!newClassName) {
+            newClassName = this.defaultClassGenerate();
+        }
+        if (opts.reserveClassName && regExpTest(opts.reserveClassName, newClassName)) {
+            if (opts.log) {
+                console.log(`The class name has been reserved. ${newClassName}`);
+            }
+            this.newClassSize++;
+            return this.generateClassName(original);
+        }
+        if (opts.log) {
+            console.log(`Minify class name from ${original} to ${newClassName}`);
+        }
+        const newClass = {
+            name: newClassName,
+            usedBy: []
+        };
+        this.newClassMap[original] = newClass;
+        this.newClassSize++;
+        return newClass;
+    }
+}
+
+function getOptions(options = {}) {
+    const includeMatcher = createGlobMatcher(options.include, true);
+    const excludeMatcher = createGlobMatcher(options.exclude, false);
+    function isInclude(file) {
+        return includeMatcher(file) && !excludeMatcher(file);
+    }
     let classSet;
+    const classSetOutputOptions = {
+        filename: 'classSet.json',
+        type: 'partial'
+    };
+    const classMapOutputOptions = {
+        filename: 'classMap.json'
+    };
+    if (typeof options.classSetOutput === 'object') {
+        Object.assign(classSetOutputOptions, options.classSetOutput);
+    }
+    if (typeof options.classMapOutput === 'object') {
+        Object.assign(classMapOutputOptions, options.classMapOutput);
+    }
     const classGenerator = new ClassGenerator(options.classGenerator);
     function getCachedClassSet() {
         const set = getClassCacheSet();
+        const isOutput = set.size && options.classSetOutput;
+        if (isOutput && classSetOutputOptions.type === 'all') {
+            cacheDump(classSetOutputOptions.filename, set, classSetOutputOptions.dir);
+        }
         set.forEach((c) => {
             if (!isMangleClass(c)) {
                 set.delete(c);
             }
         });
+        if (isOutput && classSetOutputOptions.type === 'partial') {
+            cacheDump(classSetOutputOptions.filename, set, classSetOutputOptions.dir);
+        }
         classSet = set;
         return classSet;
     }
+    return {
+        getCachedClassSet,
+        classGenerator,
+        includeMatcher,
+        excludeMatcher,
+        isInclude,
+        classSetOutputOptions,
+        classMapOutputOptions
+    };
+}
+
+const outputCachedMap = new Map();
+const unplugin = createUnplugin((options = {}, meta) => {
+    const { classGenerator, getCachedClassSet, isInclude, classMapOutputOptions } = getOptions(options);
     return {
         name: pluginName,
         enforce: 'post',
@@ -417,29 +519,38 @@ const unplugin = createUnplugin((options = {}, meta) => {
                     const groupedEntries = getGroupedEntries(Object.entries(bundle));
                     if (Array.isArray(groupedEntries.html) && groupedEntries.html.length) {
                         for (let i = 0; i < groupedEntries.html.length; i++) {
-                            const [, asset] = groupedEntries.html[i];
-                            asset.source = htmlHandler(asset.source.toString(), {
-                                classGenerator,
-                                runtimeSet
-                            });
+                            const [file, asset] = groupedEntries.html[i];
+                            if (isInclude(file)) {
+                                asset.source = htmlHandler(asset.source.toString(), {
+                                    classGenerator,
+                                    runtimeSet
+                                });
+                            }
                         }
                     }
                     if (Array.isArray(groupedEntries.js) && groupedEntries.js.length) {
                         for (let i = 0; i < groupedEntries.js.length; i++) {
-                            const [, chunk] = groupedEntries.js[i];
-                            chunk.code = jsHandler(chunk.code, {
-                                runtimeSet,
-                                classGenerator
-                            }).code;
+                            const [file, chunk] = groupedEntries.js[i];
+                            if (isInclude(file)) {
+                                const code = jsHandler(chunk.code, {
+                                    runtimeSet,
+                                    classGenerator
+                                }).code;
+                                if (code) {
+                                    chunk.code = code;
+                                }
+                            }
                         }
                     }
                     if (Array.isArray(groupedEntries.css) && groupedEntries.css.length) {
                         for (let i = 0; i < groupedEntries.css.length; i++) {
-                            const [, css] = groupedEntries.css[i];
-                            css.source = cssHandler(css.source.toString(), {
-                                classGenerator,
-                                runtimeSet
-                            });
+                            const [file, css] = groupedEntries.css[i];
+                            if (isInclude(file)) {
+                                css.source = cssHandler(css.source.toString(), {
+                                    classGenerator,
+                                    runtimeSet
+                                });
+                            }
                         }
                     }
                 }
@@ -448,51 +559,143 @@ const unplugin = createUnplugin((options = {}, meta) => {
         webpack(compiler) {
             const Compilation = compiler.webpack.Compilation;
             const { ConcatSource } = compiler.webpack.sources;
+            function getAssetPath(outputPath, file, abs = true) {
+                const fn = abs ? path.resolve : path.relative;
+                return fn(compiler.context, path.resolve(outputPath, file));
+            }
+            function overwriteServerSideAsset(outputPath, file, data) {
+                const abs = getAssetPath(outputPath, file);
+                const rel = getAssetPath(outputPath, file, false);
+                try {
+                    fs.writeFileSync(abs, data, 'utf-8');
+                    console.log('[tailwindcss-mangle]: ' + rel + ' overwrited successfully');
+                }
+                catch (error) {
+                    console.log('[tailwindcss-mangle]: ' + rel + ' overwrited fail!');
+                    console.log(error);
+                }
+            }
             compiler.hooks.compilation.tap(pluginName, (compilation) => {
                 compilation.hooks.processAssets.tap({
                     name: pluginName,
                     stage: Compilation.PROCESS_ASSETS_STAGE_SUMMARIZE
                 }, (assets) => {
                     const runtimeSet = getCachedClassSet();
+                    const groupedEntries = getGroupedEntries(Object.entries(assets));
                     if (!runtimeSet.size) {
+                        const css = new Map();
+                        const html = new Map();
+                        const js = new Map();
+                        groupedEntries.css.forEach(([file, source]) => {
+                            css.set(file, source);
+                        });
+                        groupedEntries.html.forEach(([file, source]) => {
+                            html.set(file, source);
+                        });
+                        groupedEntries.js.forEach(([file, source]) => {
+                            js.set(file, source);
+                        });
+                        if (js.size || css.size || html.size) {
+                            outputCachedMap.set(compiler.outputPath, {
+                                css,
+                                html,
+                                js
+                            });
+                        }
                         return;
                     }
-                    const groupedEntries = getGroupedEntries(Object.entries(assets));
-                    if (Array.isArray(groupedEntries.html) && groupedEntries.html.length) {
+                    if (groupedEntries.html.length) {
                         for (let i = 0; i < groupedEntries.html.length; i++) {
                             const [file, asset] = groupedEntries.html[i];
-                            const html = htmlHandler(asset.source().toString(), {
-                                classGenerator,
-                                runtimeSet
-                            });
-                            const source = new ConcatSource(html);
-                            compilation.updateAsset(file, source);
+                            if (isInclude(file)) {
+                                const html = htmlHandler(asset.source().toString(), {
+                                    classGenerator,
+                                    runtimeSet
+                                });
+                                const source = new ConcatSource(html);
+                                compilation.updateAsset(file, source);
+                            }
                         }
                     }
-                    if (Array.isArray(groupedEntries.js) && groupedEntries.js.length) {
+                    if (groupedEntries.js.length) {
                         for (let i = 0; i < groupedEntries.js.length; i++) {
                             const [file, chunk] = groupedEntries.js[i];
-                            const code = jsHandler(chunk.source().toString(), {
-                                runtimeSet,
-                                classGenerator
-                            }).code;
-                            const source = new ConcatSource(code);
-                            compilation.updateAsset(file, source);
+                            if (isInclude(file)) {
+                                const code = jsHandler(chunk.source().toString(), {
+                                    runtimeSet,
+                                    classGenerator
+                                }).code;
+                                if (code) {
+                                    const source = new ConcatSource(code);
+                                    compilation.updateAsset(file, source);
+                                }
+                            }
                         }
                     }
-                    if (Array.isArray(groupedEntries.css) && groupedEntries.css.length) {
+                    if (groupedEntries.css.length) {
                         for (let i = 0; i < groupedEntries.css.length; i++) {
                             const [file, css] = groupedEntries.css[i];
-                            const newCss = cssHandler(css.source().toString(), {
-                                classGenerator,
-                                runtimeSet
-                            });
-                            const source = new ConcatSource(newCss);
-                            compilation.updateAsset(file, source);
+                            if (isInclude(file)) {
+                                const newCss = cssHandler(css.source().toString(), {
+                                    classGenerator,
+                                    runtimeSet
+                                });
+                                const source = new ConcatSource(newCss);
+                                compilation.updateAsset(file, source);
+                            }
                         }
                     }
+                    outputCachedMap.forEach(({ js, html, css }, key) => {
+                        if (html.size) {
+                            html.forEach((asset, file) => {
+                                if (isInclude(file)) {
+                                    const html = htmlHandler(asset.source().toString(), {
+                                        classGenerator,
+                                        runtimeSet
+                                    });
+                                    overwriteServerSideAsset(key, file, html);
+                                }
+                            });
+                            html.clear();
+                        }
+                        if (js.size) {
+                            js.forEach((chunk, file) => {
+                                if (isInclude(file)) {
+                                    const rawCode = chunk.source().toString();
+                                    const code = jsHandler(rawCode, {
+                                        runtimeSet,
+                                        classGenerator
+                                    }).code;
+                                    if (code) {
+                                        overwriteServerSideAsset(key, file, code);
+                                    }
+                                }
+                            });
+                            js.clear();
+                        }
+                        if (css.size) {
+                            css.forEach((style, file) => {
+                                if (isInclude(file)) {
+                                    const newCss = cssHandler(style.source().toString(), {
+                                        classGenerator,
+                                        runtimeSet
+                                    });
+                                    overwriteServerSideAsset(key, file, newCss);
+                                }
+                            });
+                            css.clear();
+                        }
+                    });
                 });
             });
+        },
+        writeBundle() {
+            const entries = Object.entries(classGenerator.newClassMap);
+            if (entries.length && classMapOutputOptions) {
+                cacheDump(classMapOutputOptions.filename, entries.map((x) => {
+                    return [x[0], x[1].name];
+                }), classMapOutputOptions.dir);
+            }
         }
     };
 });

package/dist/js/index.d.ts

@@ -1,5 +1,6 @@
 import type { StringLiteral, TemplateElement } from '@babel/types';
+import { type BabelFileResult } from '@babel/core';
 import type { IHandlerOptions } from '../types';
 export declare function makeRegex(str: string): RegExp;
 export declare function handleValue(str: string, node: StringLiteral | TemplateElement, options: IHandlerOptions): string;
-export declare function jsHandler(rawSource: string, options: IHandlerOptions): import("@babel/generator").GeneratorResult;
+export declare function jsHandler(rawSource: string, options: IHandlerOptions): BabelFileResult;