unplugin-tailwindcss-mangle 1.2.7 → 2.0.1

package/README.md

@@ -8,14 +8,13 @@ mangle tailwindcss utilities plugin
   - [Features](#features)
   - [Usage](#usage)
     - [1. Install Package](#1-install-package)
-    - [2. Run patch script](#2-run-patch-script)
+    - [2. Run install script](#2-run-install-script)
     - [3. add `prepare` script in your `package.json`](#3-add-prepare-script-in-your-packagejson)
-    - [4. register this plugin](#4-register-this-plugin)
+    - [4. Run extract command](#4-run-extract-command)
+    - [5. Register this plugin](#5-register-this-plugin)
       - [vite](#vite)
       - [webpack](#webpack)
   - [Options](#options)
-    - [classGenerator](#classgenerator)
-    - [include / exclude](#include--exclude)
   - [Notice](#notice)
 
 ## Features
@@ -35,21 +34,33 @@ mangle tailwindcss utilities plugin
 <npm|yarn|pnpm> i -D unplugin-tailwindcss-mangle tailwindcss-patch
 ```
 
-### 2. Run patch script
+### 2. Run install script
 
 ```sh
-npx tw-patch
+npx tw-patch install
 ```
 
 ### 3. add `prepare` script in your `package.json`
 
 ```json
   "scripts": {
-    "prepare": "tw-patch"
+    "prepare": "tw-patch install"
   },
 ```
 
-### 4. register this plugin
+### 4. Run extract command
+
+cd to the same directory as `package.son` and `tailwind.config.js`, then run:
+
+```sh
+npx tw-patch extract
+```
+
+> See more options in [tailwindcss-patch](https://github.com/sonofmagic/tailwindcss-mangle/tree/main/packages/tailwindcss-patch)
+
+Then there will generate a json file:  `.tw-patch/tw-class-list.json`
+
+### 5. Register this plugin
 
 #### vite
 
@@ -57,7 +68,7 @@ npx tw-patch
 // for example: vue vite project
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-import { vitePlugin as utwm } from 'unplugin-tailwindcss-mangle'
+import utwm from 'unplugin-tailwindcss-mangle/vite'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue(), utwm()]
@@ -81,7 +92,7 @@ You will see all class was renamed to `tw-*`
 // esm
 import { webpackPlugin as utwm } from 'unplugin-tailwindcss-mangle'
 // or cjs
-const { webpackPlugin: utwm } = require('unplugin-tailwindcss-mangle')
+const utwm = require('unplugin-tailwindcss-mangle/webpack')
 // use this webpack plugin
 // for example next.config.js
 const { defineConfig } = require('@vue/cli-service')
@@ -89,7 +100,9 @@ const { defineConfig } = require('@vue/cli-service')
 module.exports = defineConfig({
   transpileDependencies: true,
   configureWebpack: (config) => {
-    config.plugins.push(utwm())
+    if (process.env.NODE_ENV === 'production') {
+      config.plugins.push(utwm())
+    }
   }
 })
 
@@ -97,34 +110,12 @@ module.exports = defineConfig({
 
 ## Options
 
-### classGenerator
-
-custom class generator, if you want to custom class name (default 'tw-*'), use this options
-
-```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
-}
-```
-
-### include / exclude
-
-Type: `string | string[]`  
-
-Default: `undefined`
-
-`glob string` allow you to control the mangle range of bundles.
+[types.ts]('./src/types.ts')
 
 ## Notice
 
+By default, only the build will take effect. Due to some restrictions, it cannot take effect in the development mode.
+
 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.
 
 because plugin will **traverse** all `html class attr` and `js StringLiteral` to find `utilities` generated by `tailwindcss`.

package/dist/esbuild.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+const index = require('./index.cjs');
+require('node:fs');
+require('node:path');
+require('@tailwindcss-mangle/shared');
+require('@tailwindcss-mangle/config');
+require('fast-sort');
+require('@tailwindcss-mangle/core');
+require('micromatch');
+require('unplugin');
+
+const esbuild = index.esbuild;
+
+module.exports = esbuild;

package/dist/esbuild.d.ts

@@ -1,2 +1,7 @@
-declare const _default: (options?: import("./types").Options | undefined) => import("esbuild").Plugin;
-export default _default;
+import * as esbuild from 'esbuild';
+import { O as Options } from './types-3f814672.js';
+import '@tailwindcss-mangle/shared';
+
+declare const _default: (options?: Options | undefined) => esbuild.Plugin;
+
+export { _default as default };

package/dist/esbuild.mjs

@@ -1,12 +1,13 @@
-import { unplugin } from './index.mjs';
-import 'unplugin';
-import 'micromatch';
+import unplugin from './index.mjs';
 import 'node:fs';
 import 'node:path';
-import 'tailwindcss-mangle-shared';
-import 'tailwindcss-mangle-core';
-import 'tailwindcss-patch';
+import '@tailwindcss-mangle/shared';
+import '@tailwindcss-mangle/config';
+import 'fast-sort';
+import '@tailwindcss-mangle/core';
+import 'micromatch';
+import 'unplugin';
 
-var esbuild = unplugin.esbuild;
+const esbuild = unplugin.esbuild;
 
 export { esbuild as default };

package/dist/index.cjs

@@ -0,0 +1,343 @@
+'use strict';
+
+const unplugin$1 = require('unplugin');
+const fs = require('node:fs');
+const path = require('node:path');
+const shared = require('@tailwindcss-mangle/shared');
+const config = require('@tailwindcss-mangle/config');
+const fastSort = require('fast-sort');
+const core = require('@tailwindcss-mangle/core');
+const micromatch = require('micromatch');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
+
+const fs__default = /*#__PURE__*/_interopDefaultCompat(fs);
+const path__default = /*#__PURE__*/_interopDefaultCompat(path);
+const micromatch__default = /*#__PURE__*/_interopDefaultCompat(micromatch);
+
+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 value = baseObject[key];
+    if (value === null || value === void 0) {
+      continue;
+    }
+    if (merger && merger(object, key, value, namespace)) {
+      continue;
+    }
+    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;
+    }
+  }
+  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__default;
+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 = shared.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 = [];
+  }
+  if (!groupedEntries.html) {
+    groupedEntries.html = [];
+  }
+  if (!groupedEntries.js) {
+    groupedEntries.js = [];
+  }
+  if (!groupedEntries.other) {
+    groupedEntries.other = [];
+  }
+  return groupedEntries;
+}
+function createGlobMatcher(pattern, fallbackValue = false) {
+  if (pattern === void 0) {
+    return function() {
+      return fallbackValue;
+    };
+  }
+  return function(file) {
+    return isMatch(file, pattern);
+  };
+}
+function getCacheDir(basedir = process.cwd()) {
+  return path__default.resolve(basedir, "node_modules/.cache", pluginName);
+}
+function mkCacheDirectory(cwd = process.cwd()) {
+  const cacheDirectory = getCacheDir(cwd);
+  const exists = fs__default.existsSync(cacheDirectory);
+  if (!exists) {
+    fs__default.mkdirSync(cacheDirectory, {
+      recursive: true
+    });
+  }
+  return cacheDirectory;
+}
+function cacheDump(filename, data, basedir) {
+  try {
+    const dir = mkCacheDirectory(basedir);
+    fs__default.writeFileSync(path__default.resolve(dir, filename), JSON.stringify([...data], void 0, 2), "utf8");
+  } catch (error) {
+    console.log(error);
+  }
+}
+
+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 ?? shared.defaultMangleClassFilter;
+  function isInclude(file) {
+    return includeMatcher(file) && !excludeMatcher(file);
+  }
+  const classSet = /* @__PURE__ */ new Set();
+  const replaceMap = /* @__PURE__ */ new Map();
+  let userConfig = config.getDefaultUserConfig();
+  const classMapOutputOptions = {
+    filename: "classMap.json"
+  };
+  if (typeof classMapOutput === "object") {
+    Object.assign(classMapOutputOptions, classMapOutput);
+  }
+  const classGenerator = new shared.ClassGenerator(classGeneratorOptions);
+  function getCachedClassSet() {
+    return classSet;
+  }
+  function getReplaceMap() {
+    return replaceMap;
+  }
+  async function initConfig() {
+    const { config: config$1 } = await config.getConfig();
+    userConfig = config$1;
+    let classListPath = "";
+    if (userConfig) {
+      classListPath = path.resolve(process.cwd(), userConfig.patch?.output?.filename);
+    }
+    if (_classListPath) {
+      classListPath = _classListPath;
+    }
+    if (classListPath && fs__default.existsSync(classListPath)) {
+      const rawClassList = fs__default.readFileSync(classListPath, "utf8");
+      const list = JSON.parse(rawClassList);
+      const classList = fastSort.sort(list).desc((c) => c.length);
+      for (const className of classList) {
+        if (currentMangleClassFilter(className)) {
+          classSet.add(className);
+        }
+      }
+    }
+    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$1;
+  }
+  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: core.htmlHandler,
+    cssHandler: core.cssHandler,
+    jsHandler: core.jsHandler,
+    preProcessJs: core.preProcessJs
+  };
+}
+
+const unplugin = unplugin$1.createUnplugin((options = {}) => {
+  const { isInclude, initConfig, getReplaceMap, classGenerator, addToUsedBy, classMapOutputOptions, disabled, htmlHandler, cssHandler, jsHandler, preProcessJs } = getOptions(options);
+  if (disabled) {
+    return {
+      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;
+            }
+          }
+        }
+      }
+    },
+    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);
+                }
+              }
+            }
+            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
+                });
+                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
+                });
+                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
+        );
+      }
+    }
+  };
+});
+
+module.exports = unplugin;

package/dist/index.d.ts

@@ -1,5 +1,7 @@
-import type { Options } from './types';
-export { defaultMangleClassFilter } from 'tailwindcss-mangle-shared';
-export declare const unplugin: import("unplugin").UnpluginInstance<Options | undefined, boolean>;
-export declare const vitePlugin: (options?: Options | undefined) => import("vite").Plugin | import("vite").Plugin[];
-export declare const webpackPlugin: (options?: Options | undefined) => import("webpack").WebpackPluginInstance;
+import * as _unplugin from 'unplugin';
+import { O as Options } from './types-3f814672.js';
+import '@tailwindcss-mangle/shared';
+
+declare const unplugin: _unplugin.UnpluginInstance<Options | undefined, boolean>;
+
+export { unplugin as default };