unplugin-tailwindcss-mangle 0.1.2 → 0.1.4

package/README.md

@@ -105,11 +105,13 @@ custom class generator, if you want to custom class name (default 'tw-*'), use t
 ```js
 export interface IClassGeneratorOptions {
   reserveClassName?: (string | RegExp)[]
+  // custom generate class name
   customGenerate?: (original: string, opts: IClassGeneratorOptions, context: Record<string, any>) => string | undefined
   log?: boolean
   exclude?: (string | RegExp)[]
   include?: (string | RegExp)[]
   ignoreClass?: (string | RegExp)[]
+  // default 'tw-',for example: tw-a,tw-b, you can set any you want, like '','ice-'
   classPrefix?: string
 }
 ```

package/dist/esbuild.js

@@ -5,10 +5,7 @@ require('unplugin');
 require('micromatch');
 require('fs');
 require('path');
-require('parse5');
-require('@babel/core');
-require('postcss');
-require('postcss-selector-parser');
+require('tailwindcss-mangle-core');
 require('tailwindcss-patch');
 
 var esbuild = index.unplugin.esbuild;

package/dist/esbuild.mjs

@@ -3,10 +3,7 @@ import 'unplugin';
 import 'micromatch';
 import 'fs';
 import 'path';
-import 'parse5';
-import '@babel/core';
-import 'postcss';
-import 'postcss-selector-parser';
+import 'tailwindcss-mangle-core';
 import 'tailwindcss-patch';
 
 var esbuild = unplugin.esbuild;

package/dist/index.js

@@ -6,10 +6,7 @@ var unplugin$1 = require('unplugin');
 var micromatch = require('micromatch');
 var fs = require('fs');
 var path = require('path');
-var parse5 = require('parse5');
-var core = require('@babel/core');
-var postcss = require('postcss');
-var parser = require('postcss-selector-parser');
+var tailwindcssMangleCore = require('tailwindcss-mangle-core');
 var tailwindcssPatch = require('tailwindcss-patch');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -17,8 +14,6 @@ function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e };
 var micromatch__default = /*#__PURE__*/_interopDefault(micromatch);
 var fs__default = /*#__PURE__*/_interopDefault(fs);
 var path__default = /*#__PURE__*/_interopDefault(path);
-var postcss__default = /*#__PURE__*/_interopDefault(postcss);
-var parser__default = /*#__PURE__*/_interopDefault(parser);
 
 const pluginName = 'unplugin-tailwindcss-mangle';
 
@@ -87,39 +82,6 @@ function getGroupedEntries(entries, options = {
     }
     return groupedEntries;
 }
-const acceptChars = 'abcdefghijklmnopqrstuvwxyz'.split('');
-function stripEscapeSequence(words) {
-    return words.replace(/\\/g, '');
-}
-function isRegexp(value) {
-    return Object.prototype.toString.call(value) === '[object RegExp]';
-}
-function regExpTest(arr = [], str) {
-    if (Array.isArray(arr)) {
-        for (let i = 0; i < arr.length; i++) {
-            const item = arr[i];
-            if (typeof item === 'string') {
-                if (item === str) {
-                    return true;
-                }
-            }
-            else if (isRegexp(item)) {
-                item.lastIndex = 0;
-                if (item.test(str)) {
-                    return true;
-                }
-            }
-        }
-        return false;
-    }
-    throw new TypeError("paramater 'arr' should be a Array of Regexp | String !");
-}
-function escapeStringRegexp(str) {
-    if (typeof str !== 'string') {
-        throw new TypeError('Expected a string');
-    }
-    return str.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&').replace(/-/g, '\\x2d');
-}
 function createGlobMatcher(pattern, fallbackValue = false) {
     if (typeof pattern === 'undefined') {
         return function (file) {
@@ -153,319 +115,6 @@ function cacheDump(filename, data, basedir) {
     }
 }
 
-({
-    HTML: parse5.html.NS.HTML,
-    XML: parse5.html.NS.XML,
-    MATHML: parse5.html.NS.MATHML,
-    SVG: parse5.html.NS.SVG,
-    XLINK: parse5.html.NS.XLINK,
-    XMLNS: parse5.html.NS.XMLNS
-});
-
-/**
- * Determines if a given node is a document or not
- * @param {Node} node Node to test
- * @return {boolean}
- */
-function isDocument(node) {
-    return node.nodeName === '#document';
-}
-/**
- * Determines if a given node is a document fragment or not
- * @param {Node} node Node to test
- * @return {boolean}
- */
-function isDocumentFragment(node) {
-    return node.nodeName === '#document-fragment';
-}
-/**
- * Determines if a given node is a template node or not
- * @param {Node} node Node to test
- * @return {boolean}
- */
-function isTemplateNode(node) {
-    return node.nodeName === 'template';
-}
-const isElementNode = parse5.defaultTreeAdapter.isElementNode;
-const isCommentNode = parse5.defaultTreeAdapter.isCommentNode;
-const isDocumentTypeNode = parse5.defaultTreeAdapter.isDocumentTypeNode;
-const isTextNode = parse5.defaultTreeAdapter.isTextNode;
-/**
- * Determines if a given node is a parent or not
- * @param {Node} node Node to test
- * @return {boolean}
- */
-function isParentNode(node) {
-    return (isDocument(node) ||
-        isDocumentFragment(node) ||
-        isElementNode(node) ||
-        isTemplateNode(node));
-}
-
-parse5.defaultTreeAdapter.appendChild;
-
-/**
- * Traverses the tree of a given node
- * @param {Node} node Node to traverse
- * @param {Visitor} visitor Visitor to apply
- * @param {ParentNode=} parent Parent node of the current node
- * @return {void}
- */
-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(child, visitor, node);
-        }
-    }
-    if (typeof visitor.node === 'function') {
-        visitor.node(node, parent);
-    }
-    if (typeof visitor.document === 'function' && isDocument(node)) {
-        visitor.document(node);
-    }
-    if (typeof visitor.documentFragment === 'function' &&
-        isDocumentFragment(node)) {
-        visitor.documentFragment(node, parent);
-    }
-    if (typeof visitor.element === 'function' && isElementNode(node)) {
-        visitor.element(node, parent);
-    }
-    if (typeof visitor.template === 'function' && isTemplateNode(node)) {
-        visitor.template(node, parent);
-    }
-    if (typeof visitor.comment === 'function' && isCommentNode(node)) {
-        visitor.comment(node, parent);
-    }
-    if (typeof visitor.text === 'function' && isTextNode(node)) {
-        visitor.text(node, parent);
-    }
-    if (typeof visitor.documentType === 'function' && isDocumentTypeNode(node)) {
-        visitor.documentType(node, parent);
-    }
-}
-
-function htmlHandler(rawSource, options) {
-    const { runtimeSet, classGenerator } = options;
-    const fragment = parse5.parse(rawSource);
-    traverse(fragment, {
-        element(node, parent) {
-            const attr = node.attrs.find((x) => x.name === 'class');
-            if (attr) {
-                const arr = attr.value.split(/\s/).filter((x) => x);
-                attr.value = arr
-                    .map((x) => {
-                    if (runtimeSet.has(x)) {
-                        return classGenerator.generateClassName(x).name;
-                    }
-                    return x;
-                })
-                    .join(' ');
-            }
-        }
-    });
-    return parse5.serialize(fragment);
-}
-
-const validateFilterRE = /[\w\u00A0-\uFFFF-_:%-?]/;
-function isValidSelector(selector = '') {
-    return validateFilterRE.test(selector);
-}
-const splitCode = (code) => code.split(/[\s"]+/).filter(isValidSelector);
-
-function makeRegex(str) {
-    return new RegExp('(?<=^|[\\s"])' + escapeStringRegexp(str), 'g');
-}
-function handleValue(str, node, options) {
-    const set = options.runtimeSet;
-    const clsGen = options.classGenerator;
-    const arr = splitCode(str);
-    let rawStr = str;
-    for (let i = 0; i < arr.length; i++) {
-        const v = arr[i];
-        if (set.has(v)) {
-            let ignoreFlag = false;
-            if (Array.isArray(node.leadingComments)) {
-                ignoreFlag = node.leadingComments.findIndex((x) => x.value.includes('tw-mangle') && x.value.includes('ignore')) > -1;
-            }
-            if (!ignoreFlag) {
-                rawStr = rawStr.replace(makeRegex(v), clsGen.generateClassName(v).name);
-            }
-        }
-    }
-    return rawStr;
-}
-function jsHandler(rawSource, options) {
-    const result = core.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);
-                            }
-                        }
-                    }
-                };
-            }
-        ],
-        sourceMaps: false,
-        configFile: false
-    });
-    return result;
-}
-
-const postcssPlugin = 'postcss-mangle-tailwindcss-plugin';
-const postcssMangleTailwindcssPlugin = (options) => {
-    let newClassMap = {};
-    if (options) {
-        if (options.newClassMap) {
-            newClassMap = options.newClassMap;
-        }
-    }
-    return {
-        postcssPlugin,
-        Rule(rule, helper) {
-            rule.selector = parser__default["default"]((selectors) => {
-                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;
-                        }
-                    }
-                });
-            }).processSync(rule.selector);
-        }
-    };
-};
-postcssMangleTailwindcssPlugin.postcss = true;
-
-function cssHandler(rawSource, options) {
-    return postcss__default["default"]([
-        postcssMangleTailwindcssPlugin({
-            newClassMap: options.classGenerator.newClassMap
-        })
-    ]).process(rawSource).css;
-}
-
-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);
@@ -473,6 +122,7 @@ function getOptions(options = {}) {
         return includeMatcher(file) && !excludeMatcher(file);
     }
     let classSet;
+    const twPatcher = new tailwindcssPatch.TailwindcssPatcher();
     const classSetOutputOptions = {
         filename: 'classSet.json',
         type: 'partial'
@@ -486,9 +136,9 @@ function getOptions(options = {}) {
     if (typeof options.classMapOutput === 'object') {
         Object.assign(classMapOutputOptions, options.classMapOutput);
     }
-    const classGenerator = new ClassGenerator(options.classGenerator);
+    const classGenerator = new tailwindcssMangleCore.ClassGenerator(options.classGenerator);
     function getCachedClassSet() {
-        const set = tailwindcssPatch.getClassCacheSet();
+        const set = twPatcher.getClassSet();
         const isOutput = set.size && options.classSetOutput;
         if (isOutput && classSetOutputOptions.type === 'all') {
             cacheDump(classSetOutputOptions.filename, set, classSetOutputOptions.dir);
@@ -511,7 +161,8 @@ function getOptions(options = {}) {
         excludeMatcher,
         isInclude,
         classSetOutputOptions,
-        classMapOutputOptions
+        classMapOutputOptions,
+        twPatcher
     };
 }
 
@@ -533,7 +184,7 @@ const unplugin = unplugin$1.createUnplugin((options = {}, meta) => {
                         for (let i = 0; i < groupedEntries.html.length; i++) {
                             const [file, asset] = groupedEntries.html[i];
                             if (isInclude(file)) {
-                                asset.source = htmlHandler(asset.source.toString(), {
+                                asset.source = tailwindcssMangleCore.htmlHandler(asset.source.toString(), {
                                     classGenerator,
                                     runtimeSet
                                 });
@@ -544,7 +195,7 @@ const unplugin = unplugin$1.createUnplugin((options = {}, meta) => {
                         for (let i = 0; i < groupedEntries.js.length; i++) {
                             const [file, chunk] = groupedEntries.js[i];
                             if (isInclude(file)) {
-                                const code = jsHandler(chunk.code, {
+                                const code = tailwindcssMangleCore.jsHandler(chunk.code, {
                                     runtimeSet,
                                     classGenerator
                                 }).code;
@@ -558,7 +209,7 @@ const unplugin = unplugin$1.createUnplugin((options = {}, meta) => {
                         for (let i = 0; i < groupedEntries.css.length; i++) {
                             const [file, css] = groupedEntries.css[i];
                             if (isInclude(file)) {
-                                css.source = cssHandler(css.source.toString(), {
+                                css.source = tailwindcssMangleCore.cssHandler(css.source.toString(), {
                                     classGenerator,
                                     runtimeSet
                                 });
@@ -569,7 +220,7 @@ const unplugin = unplugin$1.createUnplugin((options = {}, meta) => {
             }
         },
         webpack(compiler) {
-            const Compilation = compiler.webpack.Compilation;
+            const { NormalModule, Compilation } = compiler.webpack;
             const { ConcatSource } = compiler.webpack.sources;
             function getAssetPath(outputPath, file, abs = true) {
                 const fn = abs ? path__default["default"].resolve : path__default["default"].relative;
@@ -587,7 +238,22 @@ const unplugin = unplugin$1.createUnplugin((options = {}, meta) => {
                     console.log(error);
                 }
             }
+            const twmCssloader = path__default["default"].resolve(__dirname, 'twm-css.js');
             compiler.hooks.compilation.tap(pluginName, (compilation) => {
+                NormalModule.getCompilationHooks(compilation).loader.tap(pluginName, (loaderContext, module) => {
+                    const idx = module.loaders.findIndex((x) => x.loader.includes('css-loader'));
+                    if (idx > -1) {
+                        module.loaders.splice(idx + 1, 0, {
+                            loader: twmCssloader,
+                            options: {
+                                classGenerator,
+                                getCachedClassSet
+                            },
+                            ident: null,
+                            type: null
+                        });
+                    }
+                });
                 compilation.hooks.processAssets.tap({
                     name: pluginName,
                     stage: Compilation.PROCESS_ASSETS_STAGE_SUMMARIZE
@@ -620,7 +286,7 @@ const unplugin = unplugin$1.createUnplugin((options = {}, meta) => {
                         for (let i = 0; i < groupedEntries.html.length; i++) {
                             const [file, asset] = groupedEntries.html[i];
                             if (isInclude(file)) {
-                                const html = htmlHandler(asset.source().toString(), {
+                                const html = tailwindcssMangleCore.htmlHandler(asset.source().toString(), {
                                     classGenerator,
                                     runtimeSet
                                 });
@@ -633,7 +299,7 @@ const unplugin = unplugin$1.createUnplugin((options = {}, meta) => {
                         for (let i = 0; i < groupedEntries.js.length; i++) {
                             const [file, chunk] = groupedEntries.js[i];
                             if (isInclude(file)) {
-                                const code = jsHandler(chunk.source().toString(), {
+                                const code = tailwindcssMangleCore.jsHandler(chunk.source().toString(), {
                                     runtimeSet,
                                     classGenerator
                                 }).code;
@@ -648,7 +314,7 @@ const unplugin = unplugin$1.createUnplugin((options = {}, meta) => {
                         for (let i = 0; i < groupedEntries.css.length; i++) {
                             const [file, css] = groupedEntries.css[i];
                             if (isInclude(file)) {
-                                const newCss = cssHandler(css.source().toString(), {
+                                const newCss = tailwindcssMangleCore.cssHandler(css.source().toString(), {
                                     classGenerator,
                                     runtimeSet
                                 });
@@ -661,7 +327,7 @@ const unplugin = unplugin$1.createUnplugin((options = {}, meta) => {
                         if (html.size) {
                             html.forEach((asset, file) => {
                                 if (isInclude(file)) {
-                                    const html = htmlHandler(asset.source().toString(), {
+                                    const html = tailwindcssMangleCore.htmlHandler(asset.source().toString(), {
                                         classGenerator,
                                         runtimeSet
                                     });
@@ -674,7 +340,7 @@ const unplugin = unplugin$1.createUnplugin((options = {}, meta) => {
                             js.forEach((chunk, file) => {
                                 if (isInclude(file)) {
                                     const rawCode = chunk.source().toString();
-                                    const code = jsHandler(rawCode, {
+                                    const code = tailwindcssMangleCore.jsHandler(rawCode, {
                                         runtimeSet,
                                         classGenerator
                                     }).code;
@@ -688,7 +354,7 @@ const unplugin = unplugin$1.createUnplugin((options = {}, meta) => {
                         if (css.size) {
                             css.forEach((style, file) => {
                                 if (isInclude(file)) {
-                                    const newCss = cssHandler(style.source().toString(), {
+                                    const newCss = tailwindcssMangleCore.cssHandler(style.source().toString(), {
                                         classGenerator,
                                         runtimeSet
                                     });

package/dist/index.mjs

@@ -2,11 +2,8 @@ import { createUnplugin } from 'unplugin';
 import micromatch from 'micromatch';
 import fs from 'fs';
 import path from 'path';
-import { html, defaultTreeAdapter, parse, serialize } from 'parse5';
-import { transformSync } from '@babel/core';
-import postcss from 'postcss';
-import parser from 'postcss-selector-parser';
-import { getClassCacheSet } from 'tailwindcss-patch';
+import { ClassGenerator, htmlHandler, jsHandler, cssHandler } from 'tailwindcss-mangle-core';
+import { TailwindcssPatcher } from 'tailwindcss-patch';
 
 const pluginName = 'unplugin-tailwindcss-mangle';
 
@@ -75,39 +72,6 @@ function getGroupedEntries(entries, options = {
     }
     return groupedEntries;
 }
-const acceptChars = 'abcdefghijklmnopqrstuvwxyz'.split('');
-function stripEscapeSequence(words) {
-    return words.replace(/\\/g, '');
-}
-function isRegexp(value) {
-    return Object.prototype.toString.call(value) === '[object RegExp]';
-}
-function regExpTest(arr = [], str) {
-    if (Array.isArray(arr)) {
-        for (let i = 0; i < arr.length; i++) {
-            const item = arr[i];
-            if (typeof item === 'string') {
-                if (item === str) {
-                    return true;
-                }
-            }
-            else if (isRegexp(item)) {
-                item.lastIndex = 0;
-                if (item.test(str)) {
-                    return true;
-                }
-            }
-        }
-        return false;
-    }
-    throw new TypeError("paramater 'arr' should be a Array of Regexp | String !");
-}
-function escapeStringRegexp(str) {
-    if (typeof str !== 'string') {
-        throw new TypeError('Expected a string');
-    }
-    return str.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&').replace(/-/g, '\\x2d');
-}
 function createGlobMatcher(pattern, fallbackValue = false) {
     if (typeof pattern === 'undefined') {
         return function (file) {
@@ -141,319 +105,6 @@ function cacheDump(filename, data, basedir) {
     }
 }
 
-({
-    HTML: html.NS.HTML,
-    XML: html.NS.XML,
-    MATHML: html.NS.MATHML,
-    SVG: html.NS.SVG,
-    XLINK: html.NS.XLINK,
-    XMLNS: html.NS.XMLNS
-});
-
-/**
- * Determines if a given node is a document or not
- * @param {Node} node Node to test
- * @return {boolean}
- */
-function isDocument(node) {
-    return node.nodeName === '#document';
-}
-/**
- * Determines if a given node is a document fragment or not
- * @param {Node} node Node to test
- * @return {boolean}
- */
-function isDocumentFragment(node) {
-    return node.nodeName === '#document-fragment';
-}
-/**
- * Determines if a given node is a template node or not
- * @param {Node} node Node to test
- * @return {boolean}
- */
-function isTemplateNode(node) {
-    return node.nodeName === 'template';
-}
-const isElementNode = defaultTreeAdapter.isElementNode;
-const isCommentNode = defaultTreeAdapter.isCommentNode;
-const isDocumentTypeNode = defaultTreeAdapter.isDocumentTypeNode;
-const isTextNode = defaultTreeAdapter.isTextNode;
-/**
- * Determines if a given node is a parent or not
- * @param {Node} node Node to test
- * @return {boolean}
- */
-function isParentNode(node) {
-    return (isDocument(node) ||
-        isDocumentFragment(node) ||
-        isElementNode(node) ||
-        isTemplateNode(node));
-}
-
-defaultTreeAdapter.appendChild;
-
-/**
- * Traverses the tree of a given node
- * @param {Node} node Node to traverse
- * @param {Visitor} visitor Visitor to apply
- * @param {ParentNode=} parent Parent node of the current node
- * @return {void}
- */
-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(child, visitor, node);
-        }
-    }
-    if (typeof visitor.node === 'function') {
-        visitor.node(node, parent);
-    }
-    if (typeof visitor.document === 'function' && isDocument(node)) {
-        visitor.document(node);
-    }
-    if (typeof visitor.documentFragment === 'function' &&
-        isDocumentFragment(node)) {
-        visitor.documentFragment(node, parent);
-    }
-    if (typeof visitor.element === 'function' && isElementNode(node)) {
-        visitor.element(node, parent);
-    }
-    if (typeof visitor.template === 'function' && isTemplateNode(node)) {
-        visitor.template(node, parent);
-    }
-    if (typeof visitor.comment === 'function' && isCommentNode(node)) {
-        visitor.comment(node, parent);
-    }
-    if (typeof visitor.text === 'function' && isTextNode(node)) {
-        visitor.text(node, parent);
-    }
-    if (typeof visitor.documentType === 'function' && isDocumentTypeNode(node)) {
-        visitor.documentType(node, parent);
-    }
-}
-
-function htmlHandler(rawSource, options) {
-    const { runtimeSet, classGenerator } = options;
-    const fragment = parse(rawSource);
-    traverse(fragment, {
-        element(node, parent) {
-            const attr = node.attrs.find((x) => x.name === 'class');
-            if (attr) {
-                const arr = attr.value.split(/\s/).filter((x) => x);
-                attr.value = arr
-                    .map((x) => {
-                    if (runtimeSet.has(x)) {
-                        return classGenerator.generateClassName(x).name;
-                    }
-                    return x;
-                })
-                    .join(' ');
-            }
-        }
-    });
-    return serialize(fragment);
-}
-
-const validateFilterRE = /[\w\u00A0-\uFFFF-_:%-?]/;
-function isValidSelector(selector = '') {
-    return validateFilterRE.test(selector);
-}
-const splitCode = (code) => code.split(/[\s"]+/).filter(isValidSelector);
-
-function makeRegex(str) {
-    return new RegExp('(?<=^|[\\s"])' + escapeStringRegexp(str), 'g');
-}
-function handleValue(str, node, options) {
-    const set = options.runtimeSet;
-    const clsGen = options.classGenerator;
-    const arr = splitCode(str);
-    let rawStr = str;
-    for (let i = 0; i < arr.length; i++) {
-        const v = arr[i];
-        if (set.has(v)) {
-            let ignoreFlag = false;
-            if (Array.isArray(node.leadingComments)) {
-                ignoreFlag = node.leadingComments.findIndex((x) => x.value.includes('tw-mangle') && x.value.includes('ignore')) > -1;
-            }
-            if (!ignoreFlag) {
-                rawStr = rawStr.replace(makeRegex(v), clsGen.generateClassName(v).name);
-            }
-        }
-    }
-    return rawStr;
-}
-function jsHandler(rawSource, 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);
-                            }
-                        }
-                    }
-                };
-            }
-        ],
-        sourceMaps: false,
-        configFile: false
-    });
-    return result;
-}
-
-const postcssPlugin = 'postcss-mangle-tailwindcss-plugin';
-const postcssMangleTailwindcssPlugin = (options) => {
-    let newClassMap = {};
-    if (options) {
-        if (options.newClassMap) {
-            newClassMap = options.newClassMap;
-        }
-    }
-    return {
-        postcssPlugin,
-        Rule(rule, helper) {
-            rule.selector = parser((selectors) => {
-                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;
-                        }
-                    }
-                });
-            }).processSync(rule.selector);
-        }
-    };
-};
-postcssMangleTailwindcssPlugin.postcss = true;
-
-function cssHandler(rawSource, options) {
-    return postcss([
-        postcssMangleTailwindcssPlugin({
-            newClassMap: options.classGenerator.newClassMap
-        })
-    ]).process(rawSource).css;
-}
-
-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);
@@ -461,6 +112,7 @@ function getOptions(options = {}) {
         return includeMatcher(file) && !excludeMatcher(file);
     }
     let classSet;
+    const twPatcher = new TailwindcssPatcher();
     const classSetOutputOptions = {
         filename: 'classSet.json',
         type: 'partial'
@@ -476,7 +128,7 @@ function getOptions(options = {}) {
     }
     const classGenerator = new ClassGenerator(options.classGenerator);
     function getCachedClassSet() {
-        const set = getClassCacheSet();
+        const set = twPatcher.getClassSet();
         const isOutput = set.size && options.classSetOutput;
         if (isOutput && classSetOutputOptions.type === 'all') {
             cacheDump(classSetOutputOptions.filename, set, classSetOutputOptions.dir);
@@ -499,7 +151,8 @@ function getOptions(options = {}) {
         excludeMatcher,
         isInclude,
         classSetOutputOptions,
-        classMapOutputOptions
+        classMapOutputOptions,
+        twPatcher
     };
 }
 
@@ -557,7 +210,7 @@ const unplugin = createUnplugin((options = {}, meta) => {
             }
         },
         webpack(compiler) {
-            const Compilation = compiler.webpack.Compilation;
+            const { NormalModule, Compilation } = compiler.webpack;
             const { ConcatSource } = compiler.webpack.sources;
             function getAssetPath(outputPath, file, abs = true) {
                 const fn = abs ? path.resolve : path.relative;
@@ -575,7 +228,22 @@ const unplugin = createUnplugin((options = {}, meta) => {
                     console.log(error);
                 }
             }
+            const twmCssloader = path.resolve(__dirname, 'twm-css.js');
             compiler.hooks.compilation.tap(pluginName, (compilation) => {
+                NormalModule.getCompilationHooks(compilation).loader.tap(pluginName, (loaderContext, module) => {
+                    const idx = module.loaders.findIndex((x) => x.loader.includes('css-loader'));
+                    if (idx > -1) {
+                        module.loaders.splice(idx + 1, 0, {
+                            loader: twmCssloader,
+                            options: {
+                                classGenerator,
+                                getCachedClassSet
+                            },
+                            ident: null,
+                            type: null
+                        });
+                    }
+                });
                 compilation.hooks.processAssets.tap({
                     name: pluginName,
                     stage: Compilation.PROCESS_ASSETS_STAGE_SUMMARIZE

package/dist/loader/twm-css.d.ts

@@ -0,0 +1,6 @@
+import * as webpack from 'webpack';
+import { ClassGenerator } from 'tailwindcss-mangle-core';
+export default function cssloader(this: webpack.LoaderContext<{
+    classGenerator: ClassGenerator;
+    getCachedClassSet: (() => Set<string>) | undefined;
+}>, content: string): string;

package/dist/nuxt.js

@@ -5,10 +5,7 @@ require('unplugin');
 require('micromatch');
 require('fs');
 require('path');
-require('parse5');
-require('@babel/core');
-require('postcss');
-require('postcss-selector-parser');
+require('tailwindcss-mangle-core');
 require('tailwindcss-patch');
 
 function nuxt (options = {}, nuxt) {

package/dist/nuxt.mjs

@@ -3,10 +3,7 @@ import 'unplugin';
 import 'micromatch';
 import 'fs';
 import 'path';
-import 'parse5';
-import '@babel/core';
-import 'postcss';
-import 'postcss-selector-parser';
+import 'tailwindcss-mangle-core';
 import 'tailwindcss-patch';
 
 function nuxt (options = {}, nuxt) {

package/dist/options.d.ts

@@ -1,5 +1,6 @@
 import type { Options, ClassSetOutputOptions, ClassMapOutputOptions } from './types';
-import ClassGenerator from './classGenerator';
+import { TailwindcssPatcher } from 'tailwindcss-patch';
+import { ClassGenerator } from 'tailwindcss-mangle-core';
 export declare function getOptions(options?: Options | undefined): {
     getCachedClassSet: () => Set<string>;
     classGenerator: ClassGenerator;
@@ -8,4 +9,5 @@ export declare function getOptions(options?: Options | undefined): {
     isInclude: (file: string) => boolean;
     classSetOutputOptions: ClassSetOutputOptions;
     classMapOutputOptions: ClassMapOutputOptions;
+    twPatcher: TailwindcssPatcher;
 };

package/dist/rollup.js

@@ -5,10 +5,7 @@ require('unplugin');
 require('micromatch');
 require('fs');
 require('path');
-require('parse5');
-require('@babel/core');
-require('postcss');
-require('postcss-selector-parser');
+require('tailwindcss-mangle-core');
 require('tailwindcss-patch');
 
 var rollup = index.unplugin.rollup;

package/dist/rollup.mjs

@@ -3,10 +3,7 @@ import 'unplugin';
 import 'micromatch';
 import 'fs';
 import 'path';
-import 'parse5';
-import '@babel/core';
-import 'postcss';
-import 'postcss-selector-parser';
+import 'tailwindcss-mangle-core';
 import 'tailwindcss-patch';
 
 var rollup = unplugin.rollup;

package/dist/twm-css.js

@@ -0,0 +1,19 @@
+'use strict';
+
+var tailwindcssMangleCore = require('tailwindcss-mangle-core');
+
+function cssloader(content) {
+    this.cacheable && this.cacheable();
+    const opt = this.getOptions();
+    if (opt.getCachedClassSet) {
+        const runtimeSet = opt.getCachedClassSet();
+        return tailwindcssMangleCore.cssHandler(content, {
+            classGenerator: opt.classGenerator,
+            runtimeSet,
+            scene: 'loader'
+        });
+    }
+    return content;
+}
+
+module.exports = cssloader;

package/dist/twm-css.mjs

@@ -0,0 +1,17 @@
+import { cssHandler } from 'tailwindcss-mangle-core';
+
+function cssloader(content) {
+    this.cacheable && this.cacheable();
+    const opt = this.getOptions();
+    if (opt.getCachedClassSet) {
+        const runtimeSet = opt.getCachedClassSet();
+        return cssHandler(content, {
+            classGenerator: opt.classGenerator,
+            runtimeSet,
+            scene: 'loader'
+        });
+    }
+    return content;
+}
+
+export { cssloader as default };

package/dist/types.d.ts

@@ -1,4 +1,4 @@
-import type ClassGenerator from './classGenerator';
+import type { ClassGenerator } from 'tailwindcss-mangle-core';
 export interface IClassGeneratorContextItem {
     name: string;
     usedBy: any[];
@@ -21,6 +21,9 @@ export interface IHandlerOptions {
     runtimeSet: Set<string>;
     classGenerator: ClassGenerator;
 }
+export interface ICssHandlerOptions extends IHandlerOptions {
+    scene?: 'loader' | 'process';
+}
 export interface ClassSetOutputOptions {
     filename: string;
     dir?: string;

package/dist/vite.js

@@ -5,10 +5,7 @@ require('unplugin');
 require('micromatch');
 require('fs');
 require('path');
-require('parse5');
-require('@babel/core');
-require('postcss');
-require('postcss-selector-parser');
+require('tailwindcss-mangle-core');
 require('tailwindcss-patch');
 
 var vite = index.unplugin.vite;

package/dist/vite.mjs

@@ -3,10 +3,7 @@ import 'unplugin';
 import 'micromatch';
 import 'fs';
 import 'path';
-import 'parse5';
-import '@babel/core';
-import 'postcss';
-import 'postcss-selector-parser';
+import 'tailwindcss-mangle-core';
 import 'tailwindcss-patch';
 
 var vite = unplugin.vite;

package/dist/webpack.js

@@ -5,10 +5,7 @@ require('unplugin');
 require('micromatch');
 require('fs');
 require('path');
-require('parse5');
-require('@babel/core');
-require('postcss');
-require('postcss-selector-parser');
+require('tailwindcss-mangle-core');
 require('tailwindcss-patch');
 
 var webpack = index.unplugin.webpack;

package/dist/webpack.mjs

@@ -3,10 +3,7 @@ import 'unplugin';
 import 'micromatch';
 import 'fs';
 import 'path';
-import 'parse5';
-import '@babel/core';
-import 'postcss';
-import 'postcss-selector-parser';
+import 'tailwindcss-mangle-core';
 import 'tailwindcss-patch';
 
 var webpack = unplugin.webpack;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "unplugin-tailwindcss-mangle",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "mangle tailwindcss utilities class plugin. support vite and webpack!",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -60,31 +60,22 @@
   "author": "SonOfMagic <qq1324318532@gmail.com>",
   "license": "MIT",
   "dependencies": {
-    "@babel/core": "^7.21.4",
-    "@babel/types": "^7.21.4",
     "micromatch": "^4.0.5",
-    "parse5": "^7.1.2",
-    "postcss": "^8.4.23",
-    "postcss-selector-parser": "^6.0.11",
-    "semver": "^7.5.0",
     "unplugin": "^1.3.1",
-    "tailwindcss-patch": "^1.1.0"
+    "tailwindcss-mangle-core": "^1.0.0",
+    "tailwindcss-patch": "^1.1.1"
   },
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
   "devDependencies": {
-    "@parse5/tools": "^0.1.0",
-    "@types/babel__core": "^7.20.0",
-    "@types/escodegen": "^0.0.7",
     "@types/micromatch": "^4.0.2",
-    "@types/semver": "^7.3.13",
-    "pkg-types": "^1.0.2",
+    "simple-functional-loader": "^1.2.1",
     "tailwindcss": "^3.3.2",
     "tslib": "^2.5.0",
-    "vite": "^4.3.3",
-    "webpack": "^5.81.0"
+    "vite": "^4.3.5",
+    "webpack": "^5.82.1"
   },
   "homepage": "https://github.com/sonofmagic/tailwindcss-mangle",
   "repository": {
@@ -96,7 +87,7 @@
     "build": "cross-env NODE_ENV=production rollup -c",
     "dev:tsc": "tsc -p tsconfig.json --sourceMap",
     "build:tsc": "tsc -p tsconfig.json",
-    "test": "jest",
+    "_test": "jest",
     "_prepare": "tw-patch"
   }
 }

package/dist/classGenerator.d.ts

@@ -1,17 +0,0 @@
-import type { IClassGeneratorOptions, IClassGeneratorContextItem, IClassGenerator } from './types';
-declare class ClassGenerator implements IClassGenerator {
-    newClassMap: Record<string, IClassGeneratorContextItem>;
-    newClassSize: number;
-    context: Record<string, any>;
-    opts: IClassGeneratorOptions;
-    classPrefix: string;
-    constructor(opts?: IClassGeneratorOptions);
-    defaultClassGenerate(): string;
-    ignoreClassName(className: string): boolean;
-    includeFilePath(filePath: string): boolean;
-    excludeFilePath(filePath: string): boolean;
-    isFileIncluded(filePath: string): boolean;
-    transformCssClass(className: string): string;
-    generateClassName(original: string): IClassGeneratorContextItem;
-}
-export default ClassGenerator;

package/dist/css/index.d.ts

@@ -1,2 +0,0 @@
-import { IHandlerOptions } from '@/types';
-export declare function cssHandler(rawSource: string, options: IHandlerOptions): string;

package/dist/css/plugins.d.ts

@@ -1,7 +0,0 @@
-import { IClassGeneratorContextItem } from '@/types';
-import type { PluginCreator } from 'postcss';
-export type PostcssMangleTailwindcssPlugin = PluginCreator<{
-    newClassMap: Record<string, IClassGeneratorContextItem>;
-}>;
-declare const postcssMangleTailwindcssPlugin: PostcssMangleTailwindcssPlugin;
-export { postcssMangleTailwindcssPlugin };

package/dist/html/index.d.ts

@@ -1,2 +0,0 @@
-import { IHandlerOptions } from '@/types';
-export declare function htmlHandler(rawSource: string, options: IHandlerOptions): string;

package/dist/js/index.d.ts

@@ -1,6 +0,0 @@
-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): BabelFileResult;

package/dist/js/split.d.ts

@@ -1,3 +0,0 @@
-export declare const validateFilterRE: RegExp;
-export declare function isValidSelector(selector?: string): selector is string;
-export declare const splitCode: (code: string) => string[];