unplugin-tailwindcss-mangle 1.2.6 → 2.0.0

package/dist/index.mjs

@@ -1,364 +1,335 @@
 import { createUnplugin } from 'unplugin';
-import micromatch from 'micromatch';
 import fs from 'node:fs';
-import path from 'node:path';
-import { groupBy, defaultMangleClassFilter } from 'tailwindcss-mangle-shared';
-export { defaultMangleClassFilter } from 'tailwindcss-mangle-shared';
-import { ClassGenerator, htmlHandler, jsHandler, cssHandler } from 'tailwindcss-mangle-core';
-import { TailwindcssPatcher } from 'tailwindcss-patch';
-
-const pluginName = 'unplugin-tailwindcss-mangle';
+import path, { resolve } from 'node:path';
+import { groupBy, ClassGenerator, defaultMangleClassFilter } from '@tailwindcss-mangle/shared';
+import { getDefaultUserConfig, getConfig } from '@tailwindcss-mangle/config';
+import { sort } from 'fast-sort';
+import { htmlHandler, cssHandler, jsHandler, preProcessJs } from '@tailwindcss-mangle/core';
+import micromatch from 'micromatch';
 
-const { isMatch } = micromatch;
-function getGroupedEntries(entries, options = {
-    cssMatcher(file) {
-        return /\.css$/.test(file);
-    },
-    htmlMatcher(file) {
-        return /\.html?$/.test(file);
-    },
-    jsMatcher(file) {
-        return /\.[cm]?js$/.test(file);
+function isObject(value) {
+  return value !== null && typeof value === "object";
+}
+function _defu(baseObject, defaults, namespace = ".", merger) {
+  if (!isObject(defaults)) {
+    return _defu(baseObject, {}, namespace, merger);
+  }
+  const object = Object.assign({}, defaults);
+  for (const key in baseObject) {
+    if (key === "__proto__" || key === "constructor") {
+      continue;
     }
-}) {
-    const { cssMatcher, htmlMatcher, jsMatcher } = options;
-    const groupedEntries = groupBy(entries, ([file]) => {
-        if (cssMatcher(file)) {
-            return 'css';
-        }
-        else if (htmlMatcher(file)) {
-            return 'html';
-        }
-        else if (jsMatcher(file)) {
-            return 'js';
-        }
-        else {
-            return 'other';
-        }
-    });
-    if (!groupedEntries.css) {
-        groupedEntries.css = [];
+    const value = baseObject[key];
+    if (value === null || value === void 0) {
+      continue;
     }
-    if (!groupedEntries.html) {
-        groupedEntries.html = [];
+    if (merger && merger(object, key, value, namespace)) {
+      continue;
     }
-    if (!groupedEntries.js) {
-        groupedEntries.js = [];
+    if (Array.isArray(value) && Array.isArray(object[key])) {
+      object[key] = [...value, ...object[key]];
+    } else if (isObject(value) && isObject(object[key])) {
+      object[key] = _defu(
+        value,
+        object[key],
+        (namespace ? `${namespace}.` : "") + key.toString(),
+        merger
+      );
+    } else {
+      object[key] = value;
     }
-    if (!groupedEntries.other) {
-        groupedEntries.other = [];
+  }
+  return object;
+}
+function createDefu(merger) {
+  return (...arguments_) => (
+    // eslint-disable-next-line unicorn/no-array-reduce
+    arguments_.reduce((p, c) => _defu(p, c, "", merger), {})
+  );
+}
+const defu = createDefu();
+
+const pluginName = "unplugin-tailwindcss-mangle";
+
+const { isMatch } = micromatch;
+function getGroupedEntries(entries, options = {
+  cssMatcher(file) {
+    return /\.css$/.test(file);
+  },
+  htmlMatcher(file) {
+    return /\.html?$/.test(file);
+  },
+  jsMatcher(file) {
+    return /\.[cm]?js$/.test(file);
+  }
+}) {
+  const { cssMatcher, htmlMatcher, jsMatcher } = options;
+  const groupedEntries = groupBy(entries, ([file]) => {
+    if (cssMatcher(file)) {
+      return "css";
+    } else if (htmlMatcher(file)) {
+      return "html";
+    } else if (jsMatcher(file)) {
+      return "js";
+    } else {
+      return "other";
     }
-    return groupedEntries;
+  });
+  if (!groupedEntries.css) {
+    groupedEntries.css = [];
+  }
+  if (!groupedEntries.html) {
+    groupedEntries.html = [];
+  }
+  if (!groupedEntries.js) {
+    groupedEntries.js = [];
+  }
+  if (!groupedEntries.other) {
+    groupedEntries.other = [];
+  }
+  return groupedEntries;
 }
 function createGlobMatcher(pattern, fallbackValue = false) {
-    if (pattern === undefined) {
-        return function (file) {
-            return fallbackValue;
-        };
-    }
-    return function (file) {
-        return isMatch(file, pattern);
+  if (pattern === void 0) {
+    return function() {
+      return fallbackValue;
     };
+  }
+  return function(file) {
+    return isMatch(file, pattern);
+  };
 }
 function getCacheDir(basedir = process.cwd()) {
-    return path.resolve(basedir, 'node_modules/.cache', pluginName);
+  return path.resolve(basedir, "node_modules/.cache", pluginName);
 }
 function mkCacheDirectory(cwd = process.cwd()) {
-    const cacheDirectory = getCacheDir(cwd);
-    const exists = fs.existsSync(cacheDirectory);
-    if (!exists) {
-        fs.mkdirSync(cacheDirectory, {
-            recursive: true
-        });
-    }
-    return cacheDirectory;
+  const cacheDirectory = getCacheDir(cwd);
+  const exists = fs.existsSync(cacheDirectory);
+  if (!exists) {
+    fs.mkdirSync(cacheDirectory, {
+      recursive: true
+    });
+  }
+  return cacheDirectory;
 }
 function cacheDump(filename, data, basedir) {
-    try {
-        const dir = mkCacheDirectory(basedir);
-        fs.writeFileSync(path.resolve(dir, filename), JSON.stringify([...data], undefined, 2), 'utf8');
-    }
-    catch (error) {
-        console.log(error);
-    }
+  try {
+    const dir = mkCacheDirectory(basedir);
+    fs.writeFileSync(path.resolve(dir, filename), JSON.stringify([...data], void 0, 2), "utf8");
+  } catch (error) {
+    console.log(error);
+  }
 }
 
-function getOptions(options = {}) {
-    const includeMatcher = createGlobMatcher(options.include, true);
-    const excludeMatcher = createGlobMatcher(options.exclude, false);
-    const currentMangleClassFilter = options.mangleClassFilter ?? defaultMangleClassFilter;
-    function isInclude(file) {
-        return includeMatcher(file) && !excludeMatcher(file);
+function getOptions(opts = {}) {
+  const {
+    include,
+    exclude,
+    disabled,
+    mangleClassFilter,
+    classMapOutput,
+    classGenerator: classGeneratorOptions,
+    classListPath: _classListPath
+  } = defu(opts, {
+    include: ["**/*.{js,jsx,ts,tsx,svelte,vue}"],
+    exclude: ["**/*.{css,scss,less,sass,postcss,html,htm}"],
+    disabled: process.env.NODE_ENV === "development"
+  });
+  const includeMatcher = createGlobMatcher(include, true);
+  const excludeMatcher = createGlobMatcher(exclude, false);
+  const currentMangleClassFilter = mangleClassFilter ?? defaultMangleClassFilter;
+  function isInclude(file) {
+    return includeMatcher(file) && !excludeMatcher(file);
+  }
+  const classSet = /* @__PURE__ */ new Set();
+  const replaceMap = /* @__PURE__ */ new Map();
+  let userConfig = getDefaultUserConfig();
+  const classMapOutputOptions = {
+    filename: "classMap.json"
+  };
+  if (typeof classMapOutput === "object") {
+    Object.assign(classMapOutputOptions, classMapOutput);
+  }
+  const classGenerator = new ClassGenerator(classGeneratorOptions);
+  function getCachedClassSet() {
+    return classSet;
+  }
+  function getReplaceMap() {
+    return replaceMap;
+  }
+  async function initConfig() {
+    const { config } = await getConfig();
+    userConfig = config;
+    let classListPath = "";
+    if (userConfig) {
+      classListPath = resolve(process.cwd(), userConfig.patch?.output?.filename);
     }
-    let classSet;
-    const twPatcher = new TailwindcssPatcher();
-    const classSetOutputOptions = {
-        filename: 'classSet.json',
-        type: 'partial'
-    };
-    const classMapOutputOptions = {
-        filename: 'classMap.json'
-    };
-    if (typeof options.classSetOutput === 'object') {
-        Object.assign(classSetOutputOptions, options.classSetOutput);
+    if (_classListPath) {
+      classListPath = _classListPath;
     }
-    if (typeof options.classMapOutput === 'object') {
-        Object.assign(classMapOutputOptions, options.classMapOutput);
-    }
-    const classGenerator = new ClassGenerator(options.classGenerator);
-    function getCachedClassSet() {
-        const set = twPatcher.getClassSet();
-        const isOutput = set.size > 0 && options.classSetOutput;
-        if (isOutput && classSetOutputOptions.type === 'all') {
-            cacheDump(classSetOutputOptions.filename, set, classSetOutputOptions.dir);
+    if (classListPath && fs.existsSync(classListPath)) {
+      const rawClassList = fs.readFileSync(classListPath, "utf8");
+      const list = JSON.parse(rawClassList);
+      const classList = sort(list).desc((c) => c.length);
+      for (const className of classList) {
+        if (currentMangleClassFilter(className)) {
+          classSet.add(className);
         }
-        for (const c of set) {
-            if (!currentMangleClassFilter(c)) {
-                set.delete(c);
-            }
-        }
-        if (isOutput && classSetOutputOptions.type === 'partial') {
-            cacheDump(classSetOutputOptions.filename, set, classSetOutputOptions.dir);
-        }
-        classSet = set;
-        return classSet;
+      }
     }
-    return {
-        getCachedClassSet,
-        classGenerator,
-        includeMatcher,
-        excludeMatcher,
-        isInclude,
-        classSetOutputOptions,
-        classMapOutputOptions,
-        twPatcher,
-        jsHandlerOptions: (options.jsHandlerOptions ?? {}),
-        htmlHandlerOptions: (options.htmlHandlerOptions ?? {}),
-        cssHandlerOptions: (options.cssHandlerOptions ?? {})
-    };
+    for (const cls of classSet) {
+      classGenerator.generateClassName(cls);
+    }
+    for (const x of Object.entries(classGenerator.newClassMap)) {
+      replaceMap.set(x[0], x[1].name);
+    }
+    return config;
+  }
+  function addToUsedBy(key, file) {
+    const hit = classGenerator.newClassMap[key];
+    if (hit) {
+      hit.usedBy.add(file);
+    }
+  }
+  return {
+    getCachedClassSet,
+    classGenerator,
+    includeMatcher,
+    excludeMatcher,
+    isInclude,
+    classMapOutputOptions,
+    initConfig,
+    getReplaceMap,
+    addToUsedBy,
+    disabled,
+    htmlHandler,
+    cssHandler,
+    jsHandler,
+    preProcessJs
+  };
 }
 
-const outputCachedMap = new Map();
-const unplugin = createUnplugin((options = {}, meta) => {
-    const { classGenerator, getCachedClassSet, isInclude, classMapOutputOptions, htmlHandlerOptions, jsHandlerOptions, cssHandlerOptions } = getOptions(options);
+const unplugin = createUnplugin((options = {}) => {
+  const { isInclude, initConfig, getReplaceMap, classGenerator, addToUsedBy, classMapOutputOptions, disabled, htmlHandler, cssHandler, jsHandler, preProcessJs } = getOptions(options);
+  if (disabled) {
     return {
-        name: pluginName,
-        enforce: 'post',
-        vite: {
-            generateBundle: {
-                handler(options, bundle, isWrite) {
-                    const runtimeSet = getCachedClassSet();
-                    if (runtimeSet.size === 0) {
-                        return;
-                    }
-                    const groupedEntries = getGroupedEntries(Object.entries(bundle));
-                    if (Array.isArray(groupedEntries.html) && groupedEntries.html.length > 0) {
-                        for (let i = 0; i < groupedEntries.html.length; i++) {
-                            const [file, asset] = groupedEntries.html[i];
-                            if (isInclude(file)) {
-                                asset.source = htmlHandler(asset.source.toString(), {
-                                    ...htmlHandlerOptions,
-                                    classGenerator,
-                                    runtimeSet
-                                });
-                            }
-                        }
-                    }
-                    if (Array.isArray(groupedEntries.js) && groupedEntries.js.length > 0) {
-                        for (let i = 0; i < groupedEntries.js.length; i++) {
-                            const [file, chunk] = groupedEntries.js[i];
-                            if (isInclude(file)) {
-                                const code = jsHandler(chunk.code, {
-                                    ...jsHandlerOptions,
-                                    runtimeSet,
-                                    classGenerator
-                                }).code;
-                                if (code) {
-                                    chunk.code = code;
-                                }
-                            }
-                        }
-                    }
-                    if (Array.isArray(groupedEntries.css) && groupedEntries.css.length > 0) {
-                        for (let i = 0; i < groupedEntries.css.length; i++) {
-                            const [file, css] = groupedEntries.css[i];
-                            if (isInclude(file)) {
-                                css.source = cssHandler(css.source.toString(), {
-                                    ...cssHandlerOptions,
-                                    classGenerator,
-                                    runtimeSet
-                                });
-                            }
-                        }
-                    }
-                }
-            }
-        },
-        webpack(compiler) {
-            const { NormalModule, Compilation } = compiler.webpack;
-            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));
+      name: pluginName
+    };
+  }
+  return {
+    name: pluginName,
+    enforce: "pre",
+    async buildStart() {
+      await initConfig();
+    },
+    transformInclude(id) {
+      return isInclude(id);
+    },
+    transform(code, id) {
+      const replaceMap = getReplaceMap();
+      if (id.endsWith(".js") || id.endsWith(".ts") || id.endsWith(".tsx") || id.endsWith(".jsx")) {
+        const str = preProcessJs({
+          code,
+          replaceMap,
+          addToUsedBy,
+          id
+        });
+        return str;
+      } else {
+        for (const [key, value] of replaceMap) {
+          code = code.replaceAll(key, value);
+        }
+      }
+      return code;
+    },
+    vite: {
+      generateBundle: {
+        async handler(options2, bundle) {
+          const replaceMap = getReplaceMap();
+          const groupedEntries = getGroupedEntries(Object.entries(bundle));
+          if (Array.isArray(groupedEntries.css) && groupedEntries.css.length > 0) {
+            for (let i = 0; i < groupedEntries.css.length; i++) {
+              const [file, cssSource] = groupedEntries.css[i];
+              const { css } = await cssHandler(cssSource.source.toString(), {
+                file,
+                replaceMap,
+                classGenerator
+              });
+              cssSource.source = css;
             }
-            function overwriteServerSideAsset(outputPath, file, data) {
-                const abs = getAssetPath(outputPath, file);
-                const rel = getAssetPath(outputPath, file, false);
-                try {
-                    fs.writeFileSync(abs, data, 'utf8');
-                    console.log('[tailwindcss-mangle]: ' + rel + ' overwrited successfully');
-                }
-                catch (error) {
-                    console.log('[tailwindcss-mangle]: ' + rel + ' overwrited fail!');
-                    console.log(error);
+          }
+        }
+      }
+    },
+    webpack(compiler) {
+      const { Compilation, sources } = compiler.webpack;
+      const { ConcatSource } = sources;
+      compiler.hooks.compilation.tap(pluginName, (compilation) => {
+        compilation.hooks.processAssets.tapPromise(
+          {
+            name: pluginName,
+            stage: Compilation.PROCESS_ASSETS_STAGE_SUMMARIZE
+          },
+          async (assets) => {
+            const replaceMap = getReplaceMap();
+            const groupedEntries = getGroupedEntries(Object.entries(assets));
+            if (groupedEntries.js.length > 0) {
+              for (let i = 0; i < groupedEntries.js.length; i++) {
+                const [file, chunk] = groupedEntries.js[i];
+                const code = jsHandler(chunk.source().toString(), {
+                  replaceMap,
+                  classGenerator
+                }).code;
+                if (code) {
+                  const source = new ConcatSource(code);
+                  compilation.updateAsset(file, source);
                 }
+              }
             }
-            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
-                        });
-                    }
+            if (groupedEntries.css.length > 0) {
+              for (let i = 0; i < groupedEntries.css.length; i++) {
+                const [file, cssSource] = groupedEntries.css[i];
+                const { css } = await cssHandler(cssSource.source().toString(), {
+                  replaceMap,
+                  file,
+                  classGenerator
                 });
-                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 === 0) {
-                        const css = new Map();
-                        const html = new Map();
-                        const js = new Map();
-                        for (const [file, source] of groupedEntries.css) {
-                            css.set(file, source);
-                        }
-                        for (const [file, source] of groupedEntries.html) {
-                            html.set(file, source);
-                        }
-                        for (const [file, source] of groupedEntries.js) {
-                            js.set(file, source);
-                        }
-                        if (js.size > 0 || css.size > 0 || html.size > 0) {
-                            outputCachedMap.set(compiler.outputPath, {
-                                css,
-                                html,
-                                js
-                            });
-                        }
-                        return;
-                    }
-                    if (groupedEntries.html.length > 0) {
-                        for (let i = 0; i < groupedEntries.html.length; i++) {
-                            const [file, asset] = groupedEntries.html[i];
-                            if (isInclude(file)) {
-                                const html = htmlHandler(asset.source().toString(), {
-                                    ...htmlHandlerOptions,
-                                    classGenerator,
-                                    runtimeSet
-                                });
-                                const source = new ConcatSource(html);
-                                compilation.updateAsset(file, source);
-                            }
-                        }
-                    }
-                    if (groupedEntries.js.length > 0) {
-                        for (let i = 0; i < groupedEntries.js.length; i++) {
-                            const [file, chunk] = groupedEntries.js[i];
-                            if (isInclude(file)) {
-                                const code = jsHandler(chunk.source().toString(), {
-                                    ...jsHandlerOptions,
-                                    runtimeSet,
-                                    classGenerator
-                                }).code;
-                                if (code) {
-                                    const source = new ConcatSource(code);
-                                    compilation.updateAsset(file, source);
-                                }
-                            }
-                        }
-                    }
-                    if (groupedEntries.css.length > 0) {
-                        for (let i = 0; i < groupedEntries.css.length; i++) {
-                            const [file, css] = groupedEntries.css[i];
-                            if (isInclude(file)) {
-                                const newCss = cssHandler(css.source().toString(), {
-                                    ...cssHandlerOptions,
-                                    classGenerator,
-                                    runtimeSet
-                                });
-                                const source = new ConcatSource(newCss);
-                                compilation.updateAsset(file, source);
-                            }
-                        }
-                    }
-                    for (const [key, { js, html, css }] of outputCachedMap.entries()) {
-                        if (html.size > 0) {
-                            for (const [file, asset] of html.entries()) {
-                                if (isInclude(file)) {
-                                    const html = htmlHandler(asset.source().toString(), {
-                                        ...htmlHandlerOptions,
-                                        classGenerator,
-                                        runtimeSet
-                                    });
-                                    overwriteServerSideAsset(key, file, html);
-                                }
-                            }
-                            html.clear();
-                        }
-                        if (js.size > 0) {
-                            for (const [file, chunk] of js.entries()) {
-                                if (isInclude(file)) {
-                                    const rawCode = chunk.source().toString();
-                                    const code = jsHandler(rawCode, {
-                                        ...jsHandlerOptions,
-                                        runtimeSet,
-                                        classGenerator
-                                    }).code;
-                                    if (code) {
-                                        overwriteServerSideAsset(key, file, code);
-                                    }
-                                }
-                            }
-                            js.clear();
-                        }
-                        if (css.size > 0) {
-                            for (const [file, style] of css.entries()) {
-                                if (isInclude(file)) {
-                                    const newCss = cssHandler(style.source().toString(), {
-                                        ...cssHandlerOptions,
-                                        classGenerator,
-                                        runtimeSet
-                                    });
-                                    overwriteServerSideAsset(key, file, newCss);
-                                }
-                            }
-                            css.clear();
-                        }
-                    }
+                const source = new ConcatSource(css);
+                compilation.updateAsset(file, source);
+              }
+            }
+            if (groupedEntries.html.length > 0) {
+              for (let i = 0; i < groupedEntries.html.length; i++) {
+                const [file, asset] = groupedEntries.html[i];
+                const html = htmlHandler(asset.source().toString(), {
+                  classGenerator,
+                  replaceMap
                 });
-            });
-        },
-        writeBundle() {
-            const entries = Object.entries(classGenerator.newClassMap);
-            if (entries.length > 0 && classMapOutputOptions) {
-                cacheDump(classMapOutputOptions.filename, entries.map((x) => {
-                    return [x[0], x[1].name];
-                }), classMapOutputOptions.dir);
+                const source = new ConcatSource(html);
+                compilation.updateAsset(file, source);
+              }
             }
-        }
-    };
+          }
+        );
+      });
+    },
+    writeBundle() {
+      const entries = Object.entries(classGenerator.newClassMap);
+      if (entries.length > 0 && classMapOutputOptions) {
+        cacheDump(
+          classMapOutputOptions.filename,
+          entries.map((x) => {
+            return {
+              origin: x[0],
+              replacement: x[1].name,
+              usedBy: [...x[1].usedBy]
+            };
+          }),
+          classMapOutputOptions.dir
+        );
+      }
+    }
+  };
 });
-const vitePlugin = unplugin.vite;
-const webpackPlugin = unplugin.webpack;
 
-export { unplugin, vitePlugin, webpackPlugin };
+export { unplugin as default };