unplugin-tailwindcss-mangle 0.0.4 → 0.1.0

package/README.md

@@ -15,6 +15,7 @@ mangle tailwindcss utilities plugin
       - [webpack](#webpack)
   - [Options](#options)
     - [classGenerator](#classgenerator)
+    - [include / exclude](#include--exclude)
   - [Notice](#notice)
 
 ## Features
@@ -76,15 +77,23 @@ You will see all class was renamed to `tw-*`
 
 #### webpack
 
-> Experiment, not work right now
-
 ```js
 // esm
 import { webpackPlugin as utwm } from 'unplugin-tailwindcss-mangle'
 // or cjs
 const { webpackPlugin: utwm } = require('unplugin-tailwindcss-mangle')
 // use this webpack plugin
-utwm()
+// for example next.config.js
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  webpack: (config) => {
+    config.plugins.push(utwm())
+    return config
+  }
+}
+
+module.exports = nextConfig
 ```
 
 ## Options
@@ -105,6 +114,12 @@ export interface IClassGeneratorOptions {
 }
 ```
 
+### include / exclude
+
+type: glob string
+
+allow you to control the mangle range of bundles.
+
 ## Notice
 
 This plugin only transform those classes which name contain `-` or `:`, like `w-32`, `before:h-[300px]`,`after:dark:via-[#0141ff]/40`. some classes like `flex`,`relative` will not be mangled.

package/dist/constants.d.ts

@@ -1 +1,2 @@
 export declare const pluginName = "unplugin-tailwindcss-mangle";
+export declare const webpackCacheKey: string;

package/dist/esbuild.js

@@ -2,13 +2,16 @@
 
 var index = require('./index.js');
 require('unplugin');
-require('tailwindcss-patch');
+require('micromatch');
 require('parse5');
 require('@babel/generator');
 require('@babel/parser');
 require('@babel/traverse');
 require('postcss');
 require('postcss-selector-parser');
+require('path');
+require('fs');
+require('tailwindcss-patch');
 
 var esbuild = index.unplugin.esbuild;
 

package/dist/esbuild.mjs

@@ -1,12 +1,15 @@
 import { unplugin } from './index.mjs';
 import 'unplugin';
-import 'tailwindcss-patch';
+import 'micromatch';
 import 'parse5';
 import '@babel/generator';
 import '@babel/parser';
 import '@babel/traverse';
 import 'postcss';
 import 'postcss-selector-parser';
+import 'path';
+import 'fs';
+import 'tailwindcss-patch';
 
 var esbuild = unplugin.esbuild;
 

package/dist/index.js

@@ -3,13 +3,16 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var unplugin$1 = require('unplugin');
-var tailwindcssPatch = require('tailwindcss-patch');
+var micromatch = require('micromatch');
 var parse5 = require('parse5');
 var _generate = require('@babel/generator');
 var parser = require('@babel/parser');
 var _traverse = require('@babel/traverse');
 var postcss = require('postcss');
 var parser$1 = require('postcss-selector-parser');
+var path = require('path');
+var fs = require('fs');
+var tailwindcssPatch = require('tailwindcss-patch');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -17,6 +20,8 @@ var _generate__default = /*#__PURE__*/_interopDefault(_generate);
 var _traverse__default = /*#__PURE__*/_interopDefault(_traverse);
 var postcss__default = /*#__PURE__*/_interopDefault(postcss);
 var parser__default = /*#__PURE__*/_interopDefault(parser$1);
+var path__default = /*#__PURE__*/_interopDefault(path);
+var fs__default = /*#__PURE__*/_interopDefault(fs);
 
 const pluginName = 'unplugin-tailwindcss-mangle';
 
@@ -67,6 +72,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('');
@@ -102,98 +119,15 @@ 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;
-        }
-    }
-    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: []
+function createGlobMatcher(pattern, fallbackValue = false) {
+    if (typeof pattern === 'undefined') {
+        return function (file) {
+            return fallbackValue;
         };
-        this.newClassMap[original] = newClass;
-        this.newClassSize++;
-        return newClass;
     }
+    return function (file) {
+        return micromatch.isMatch(file, pattern);
+    };
 }
 
 ({
@@ -322,6 +256,9 @@ function getDefaultExportFromNamespaceIfPresent(n) {
 }
 const generate = getDefaultExportFromNamespaceIfPresent(_generate__default["default"]);
 const traverse = getDefaultExportFromNamespaceIfPresent(_traverse__default["default"]);
+function makeRegex(str) {
+    return new RegExp('(?<=^|[\\s"])' + escapeStringRegexp(str), 'g');
+}
 function handleValue(str, node, options) {
     const set = options.runtimeSet;
     const clsGen = options.classGenerator;
@@ -335,7 +272,7 @@ function handleValue(str, node, options) {
                 ignoreFlag = node.leadingComments.findIndex((x) => x.value.includes('tw-mangle') && x.value.includes('ignore')) > -1;
             }
             if (!ignoreFlag) {
-                rawStr = rawStr.replace(new RegExp('(?<="|\\s)' + escapeStringRegexp(v), 'g'), clsGen.generateClassName(v).name);
+                rawStr = rawStr.replace(makeRegex(v), clsGen.generateClassName(v).name);
             }
         }
     }
@@ -396,7 +333,105 @@ function cssHandler(rawSource, options) {
     ]).process(rawSource).css;
 }
 
-const unplugin = unplugin$1.createUnplugin((options = {}, meta) => {
+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;
+        }
+    }
+    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);
+    }
     const isMangleClass = (className) => {
         return /[-:]/.test(className);
     };
@@ -412,6 +447,18 @@ const unplugin = unplugin$1.createUnplugin((options = {}, meta) => {
         classSet = set;
         return classSet;
     }
+    return {
+        getCachedClassSet,
+        classGenerator,
+        includeMatcher,
+        excludeMatcher,
+        isInclude
+    };
+}
+
+const outputCachedMap = new Map();
+const unplugin = unplugin$1.createUnplugin((options = {}, meta) => {
+    const { classGenerator, getCachedClassSet, isInclude } = getOptions(options);
     return {
         name: pluginName,
         enforce: 'post',
@@ -425,29 +472,35 @@ const unplugin = unplugin$1.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)) {
+                                chunk.code = jsHandler(chunk.code, {
+                                    runtimeSet,
+                                    classGenerator
+                                }).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
+                                });
+                            }
                         }
                     }
                 }
@@ -456,49 +509,129 @@ const unplugin = unplugin$1.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__default["default"].resolve : path__default["default"].relative;
+                return fn(compiler.context, path__default["default"].resolve(outputPath, file));
+            }
+            function overwriteServerSideAsset(outputPath, file, data) {
+                const abs = getAssetPath(outputPath, file);
+                const rel = getAssetPath(outputPath, file, false);
+                try {
+                    fs__default["default"].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;
+                                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;
+                                    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();
+                        }
+                    });
                 });
             });
         }

package/dist/index.mjs

@@ -1,11 +1,14 @@
 import { createUnplugin } from 'unplugin';
-import { getClassCacheSet } from 'tailwindcss-patch';
+import { isMatch } from 'micromatch';
 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 postcss from 'postcss';
 import parser from 'postcss-selector-parser';
+import path from 'path';
+import fs from 'fs';
+import { getClassCacheSet } from 'tailwindcss-patch';
 
 const pluginName = 'unplugin-tailwindcss-mangle';
 
@@ -56,6 +59,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,98 +106,15 @@ 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;
-        }
-    }
-    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: []
+function createGlobMatcher(pattern, fallbackValue = false) {
+    if (typeof pattern === 'undefined') {
+        return function (file) {
+            return fallbackValue;
         };
-        this.newClassMap[original] = newClass;
-        this.newClassSize++;
-        return newClass;
     }
+    return function (file) {
+        return isMatch(file, pattern);
+    };
 }
 
 ({
@@ -311,6 +243,9 @@ function getDefaultExportFromNamespaceIfPresent(n) {
 }
 const generate = getDefaultExportFromNamespaceIfPresent(_generate);
 const traverse = getDefaultExportFromNamespaceIfPresent(_traverse);
+function makeRegex(str) {
+    return new RegExp('(?<=^|[\\s"])' + escapeStringRegexp(str), 'g');
+}
 function handleValue(str, node, options) {
     const set = options.runtimeSet;
     const clsGen = options.classGenerator;
@@ -324,7 +259,7 @@ function handleValue(str, node, options) {
                 ignoreFlag = node.leadingComments.findIndex((x) => x.value.includes('tw-mangle') && x.value.includes('ignore')) > -1;
             }
             if (!ignoreFlag) {
-                rawStr = rawStr.replace(new RegExp('(?<="|\\s)' + escapeStringRegexp(v), 'g'), clsGen.generateClassName(v).name);
+                rawStr = rawStr.replace(makeRegex(v), clsGen.generateClassName(v).name);
             }
         }
     }
@@ -385,7 +320,105 @@ function cssHandler(rawSource, options) {
     ]).process(rawSource).css;
 }
 
-const unplugin = createUnplugin((options = {}, meta) => {
+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;
+        }
+    }
+    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);
+    }
     const isMangleClass = (className) => {
         return /[-:]/.test(className);
     };
@@ -401,6 +434,18 @@ const unplugin = createUnplugin((options = {}, meta) => {
         classSet = set;
         return classSet;
     }
+    return {
+        getCachedClassSet,
+        classGenerator,
+        includeMatcher,
+        excludeMatcher,
+        isInclude
+    };
+}
+
+const outputCachedMap = new Map();
+const unplugin = createUnplugin((options = {}, meta) => {
+    const { classGenerator, getCachedClassSet, isInclude } = getOptions(options);
     return {
         name: pluginName,
         enforce: 'post',
@@ -414,29 +459,35 @@ 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)) {
+                                chunk.code = jsHandler(chunk.code, {
+                                    runtimeSet,
+                                    classGenerator
+                                }).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
+                                });
+                            }
                         }
                     }
                 }
@@ -445,49 +496,129 @@ 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;
+                                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;
+                                    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();
+                        }
+                    });
                 });
             });
         }

package/dist/js/index.d.ts

@@ -1,4 +1,5 @@
 import type { StringLiteral, TemplateElement } from '@babel/types';
 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;

package/dist/nuxt.js

@@ -2,13 +2,16 @@
 
 var index = require('./index.js');
 require('unplugin');
-require('tailwindcss-patch');
+require('micromatch');
 require('parse5');
 require('@babel/generator');
 require('@babel/parser');
 require('@babel/traverse');
 require('postcss');
 require('postcss-selector-parser');
+require('path');
+require('fs');
+require('tailwindcss-patch');
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.

package/dist/nuxt.mjs

@@ -1,12 +1,15 @@
 import { unplugin } from './index.mjs';
 import 'unplugin';
-import 'tailwindcss-patch';
+import 'micromatch';
 import 'parse5';
 import '@babel/generator';
 import '@babel/parser';
 import '@babel/traverse';
 import 'postcss';
 import 'postcss-selector-parser';
+import 'path';
+import 'fs';
+import 'tailwindcss-patch';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.

package/dist/options.d.ts

@@ -0,0 +1,9 @@
+import type { Options } from './types';
+import ClassGenerator from './classGenerator';
+export declare function getOptions(options?: Options | undefined): {
+    getCachedClassSet: () => Set<string>;
+    classGenerator: ClassGenerator;
+    includeMatcher: (file: string) => boolean;
+    excludeMatcher: (file: string) => boolean;
+    isInclude: (file: string) => boolean;
+};

package/dist/rollup.js

@@ -2,13 +2,16 @@
 
 var index = require('./index.js');
 require('unplugin');
-require('tailwindcss-patch');
+require('micromatch');
 require('parse5');
 require('@babel/generator');
 require('@babel/parser');
 require('@babel/traverse');
 require('postcss');
 require('postcss-selector-parser');
+require('path');
+require('fs');
+require('tailwindcss-patch');
 
 var rollup = index.unplugin.rollup;
 

package/dist/rollup.mjs

@@ -1,12 +1,15 @@
 import { unplugin } from './index.mjs';
 import 'unplugin';
-import 'tailwindcss-patch';
+import 'micromatch';
 import 'parse5';
 import '@babel/generator';
 import '@babel/parser';
 import '@babel/traverse';
 import 'postcss';
 import 'postcss-selector-parser';
+import 'path';
+import 'fs';
+import 'tailwindcss-patch';
 
 var rollup = unplugin.rollup;
 

package/dist/types.d.ts

@@ -24,4 +24,6 @@ export interface IHandlerOptions {
 }
 export interface Options {
     classGenerator?: IClassGeneratorOptions;
+    exclude?: string[];
+    include?: string[];
 }

package/dist/utils.d.ts

@@ -12,3 +12,4 @@ export declare function isRegexp(value: unknown): boolean;
 export declare function isMap(value: unknown): boolean;
 export declare function regExpTest(arr: (string | RegExp)[] | undefined, str: string): boolean;
 export declare function escapeStringRegexp(str: string): string;
+export declare function createGlobMatcher(pattern: string | string[] | undefined, fallbackValue?: boolean): (file: string) => boolean;

package/dist/vite.js

@@ -2,13 +2,16 @@
 
 var index = require('./index.js');
 require('unplugin');
-require('tailwindcss-patch');
+require('micromatch');
 require('parse5');
 require('@babel/generator');
 require('@babel/parser');
 require('@babel/traverse');
 require('postcss');
 require('postcss-selector-parser');
+require('path');
+require('fs');
+require('tailwindcss-patch');
 
 var vite = index.unplugin.vite;
 

package/dist/vite.mjs

@@ -1,12 +1,15 @@
 import { unplugin } from './index.mjs';
 import 'unplugin';
-import 'tailwindcss-patch';
+import 'micromatch';
 import 'parse5';
 import '@babel/generator';
 import '@babel/parser';
 import '@babel/traverse';
 import 'postcss';
 import 'postcss-selector-parser';
+import 'path';
+import 'fs';
+import 'tailwindcss-patch';
 
 var vite = unplugin.vite;
 

package/dist/webpack.js

@@ -2,13 +2,16 @@
 
 var index = require('./index.js');
 require('unplugin');
-require('tailwindcss-patch');
+require('micromatch');
 require('parse5');
 require('@babel/generator');
 require('@babel/parser');
 require('@babel/traverse');
 require('postcss');
 require('postcss-selector-parser');
+require('path');
+require('fs');
+require('tailwindcss-patch');
 
 var webpack = index.unplugin.webpack;
 

package/dist/webpack.mjs

@@ -1,12 +1,15 @@
 import { unplugin } from './index.mjs';
 import 'unplugin';
-import 'tailwindcss-patch';
+import 'micromatch';
 import 'parse5';
 import '@babel/generator';
 import '@babel/parser';
 import '@babel/traverse';
 import 'postcss';
 import 'postcss-selector-parser';
+import 'path';
+import 'fs';
+import 'tailwindcss-patch';
 
 var webpack = unplugin.webpack;
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "unplugin-tailwindcss-mangle",
-  "version": "0.0.4",
-  "description": "mangle tailwindcss utilities class",
+  "version": "0.1.0",
+  "description": "mangle tailwindcss utilities class plugin. support vite and webpack!",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -31,6 +31,11 @@
       "require": "./dist/esbuild.js",
       "import": "./dist/esbuild.mjs"
     },
+    "./nuxt": {
+      "types": "./dist/nuxt.d.ts",
+      "require": "./dist/nuxt.js",
+      "import": "./dist/nuxt.mjs"
+    },
     "./*": "./*"
   },
   "typesVersions": {
@@ -48,7 +53,9 @@
     "tailwindcss",
     "utilities",
     "mangle",
-    "class"
+    "class",
+    "obfuscator",
+    "obfuscation"
   ],
   "author": "SonOfMagic <qq1324318532@gmail.com>",
   "license": "MIT",
@@ -57,14 +64,13 @@
     "@babel/parser": "^7.21.4",
     "@babel/traverse": "^7.21.4",
     "@babel/types": "^7.21.4",
-    "acorn-walk": "^8.2.0",
-    "escodegen": "^2.0.0",
+    "micromatch": "^4.0.5",
     "parse5": "^7.1.2",
-    "postcss": "^8.4.22",
+    "postcss": "^8.4.23",
     "postcss-selector-parser": "^6.0.11",
     "semver": "^7.5.0",
     "unplugin": "^1.3.1",
-    "tailwindcss-patch": "1.0.2"
+    "tailwindcss-patch": "1.0.3"
   },
   "publishConfig": {
     "access": "public",
@@ -73,14 +79,15 @@
   "devDependencies": {
     "@parse5/tools": "^0.1.0",
     "@types/babel__generator": "^7.6.4",
-    "@types/babel__traverse": "^7.18.3",
+    "@types/babel__traverse": "^7.18.4",
     "@types/escodegen": "^0.0.7",
+    "@types/micromatch": "^4.0.2",
     "@types/semver": "^7.3.13",
     "pkg-types": "^1.0.2",
-    "tailwindcss": "^3.3.1",
+    "tailwindcss": "^3.3.2",
     "tslib": "^2.5.0",
-    "vite": "^4.2.2",
-    "webpack": "^5.79.0"
+    "vite": "^4.3.2",
+    "webpack": "^5.80.0"
   },
   "homepage": "https://github.com/sonofmagic/tailwindcss-mangle",
   "repository": {