unplugin-tailwindcss-mangle 0.0.2 → 0.0.4

package/README.md

@@ -1,96 +1,121 @@
-# unplugin-tailwindcss-mangle
-
-mangle tailwindcss utilities plugin
-
-> Now Support `vite` and `webpack`
-
-- [unplugin-tailwindcss-mangle](#unplugin-tailwindcss-mangle)
-  - [Features](#features)
-  - [Usage](#usage)
-    - [1. Install Package](#1-install-package)
-    - [2. Run patch script](#2-run-patch-script)
-    - [3. add `prepare` script in your `package.json`](#3-add-prepare-script-in-your-packagejson)
-    - [4. register this plugin](#4-register-this-plugin)
-      - [vite](#vite)
-      - [webpack](#webpack)
-  - [Notice](#notice)
-
-## Features
-
-```html
-<!-- before -->
-<div class="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex"></div>
-<!-- after -->
-<div class="tw-g tw-h tw-i tw-d tw-e tw-j tw-k tw-l"></div>
-```
-
-## Usage
-
-### 1. Install Package
-
-```sh
-<npm|yarn|pnpm> i -D unplugin-tailwindcss-mangle tailwindcss-patch
-```
-
-### 2. Run patch script
-
-```sh
-npx tw-patch
-```
-
-### 3. add `prepare` script in your `package.json`
-
-```json
-  "scripts": {
-    "prepare": "tw-patch"
-  },
-```
-
-### 4. register this plugin
-
-#### vite
-
-```js
-// for example: vue vite project
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import utwm from 'unplugin-tailwindcss-mangle'
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [vue(), utwm.vite()]
-})
-```
-
-then run script:
-
-```sh
-# generate bundle
-yarn build
-# preview
-yarn preview
-```
-
-You will see all class was renamed to `tw-*`
-
-#### webpack
-
-```js
-import utwm from 'unplugin-tailwindcss-mangle'
-// use this webpack plugin
-utwm.webpack()
-```
-
-## 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.
-
-because plugin will **traverse** all `html class attr` and `js StringLiteral` to find `utilities` generated by `tailwindcss`.
-
-it's dangerous to mangle some `js StringLiteral` like:
-
-```js
-const innerHTML = "i'm flex and relative and grid"
-document.body.innerHTML = innerHTML
-```
-
-so only strings with `-` or `:` will be transformed.
+# unplugin-tailwindcss-mangle
+
+mangle tailwindcss utilities plugin
+
+> Now Support `vite` and `webpack`
+
+- [unplugin-tailwindcss-mangle](#unplugin-tailwindcss-mangle)
+  - [Features](#features)
+  - [Usage](#usage)
+    - [1. Install Package](#1-install-package)
+    - [2. Run patch script](#2-run-patch-script)
+    - [3. add `prepare` script in your `package.json`](#3-add-prepare-script-in-your-packagejson)
+    - [4. register this plugin](#4-register-this-plugin)
+      - [vite](#vite)
+      - [webpack](#webpack)
+  - [Options](#options)
+    - [classGenerator](#classgenerator)
+  - [Notice](#notice)
+
+## Features
+
+```html
+<!-- before -->
+<div class="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex"></div>
+<!-- after -->
+<div class="tw-g tw-h tw-i tw-d tw-e tw-j tw-k tw-l"></div>
+```
+
+## Usage
+
+### 1. Install Package
+
+```sh
+<npm|yarn|pnpm> i -D unplugin-tailwindcss-mangle tailwindcss-patch
+```
+
+### 2. Run patch script
+
+```sh
+npx tw-patch
+```
+
+### 3. add `prepare` script in your `package.json`
+
+```json
+  "scripts": {
+    "prepare": "tw-patch"
+  },
+```
+
+### 4. register this plugin
+
+#### vite
+
+```js
+// for example: vue vite project
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { vitePlugin as utwm } from 'unplugin-tailwindcss-mangle'
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue(), utwm()]
+})
+```
+
+then run script:
+
+```sh
+# generate bundle
+yarn build
+# preview
+yarn preview
+```
+
+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()
+```
+
+## Options
+
+### classGenerator
+
+custom class generator, if you want to custom class name (default 'tw-*'), use this options
+
+```js
+export interface IClassGeneratorOptions {
+  reserveClassName?: (string | RegExp)[]
+  customGenerate?: (original: string, opts: IClassGeneratorOptions, context: Record<string, any>) => string | undefined
+  log?: boolean
+  exclude?: (string | RegExp)[]
+  include?: (string | RegExp)[]
+  ignoreClass?: (string | RegExp)[]
+  classPrefix?: string
+}
+```
+
+## 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.
+
+because plugin will **traverse** all `html class attr` and `js StringLiteral` to find `utilities` generated by `tailwindcss`.
+
+it's dangerous to mangle some `js StringLiteral` like:
+
+```js
+const innerHTML = "i'm flex and relative and grid"
+document.body.innerHTML = innerHTML
+```
+
+so only strings with `-` or `:` will be transformed.

package/dist/classGenerator.d.ts

@@ -1,17 +1,17 @@
-import type { IMangleOptions, IMangleContextClass, IClassGenerator } from './types';
+import type { IClassGeneratorOptions, IClassGeneratorContextItem, IClassGenerator } from './types';
 declare class ClassGenerator implements IClassGenerator {
-    newClassMap: Record<string, IMangleContextClass>;
+    newClassMap: Record<string, IClassGeneratorContextItem>;
     newClassSize: number;
     context: Record<string, any>;
-    opts: IMangleOptions;
+    opts: IClassGeneratorOptions;
     classPrefix: string;
-    constructor(opts?: IMangleOptions);
-    defaultClassGenerator(): 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): IMangleContextClass;
+    generateClassName(original: string): IClassGeneratorContextItem;
 }
 export default ClassGenerator;

package/dist/css/plugins.d.ts

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

package/dist/esbuild.js

@@ -10,6 +10,6 @@ require('@babel/traverse');
 require('postcss');
 require('postcss-selector-parser');
 
-var esbuild = index.esbuild;
+var esbuild = index.unplugin.esbuild;
 
 module.exports = esbuild;

package/dist/esbuild.mjs

@@ -1,4 +1,4 @@
-import unplugin from './index.mjs';
+import { unplugin } from './index.mjs';
 import 'unplugin';
 import 'tailwindcss-patch';
 import 'parse5';

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 import type { Options } from './types';
-declare const unplugin: import("unplugin").UnpluginInstance<Options | undefined, boolean>;
-export default unplugin;
+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;

package/dist/index.js

@@ -1,5 +1,7 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var unplugin$1 = require('unplugin');
 var tailwindcssPatch = require('tailwindcss-patch');
 var parse5 = require('parse5');
@@ -110,7 +112,7 @@ class ClassGenerator {
         this.opts = opts;
         this.classPrefix = (_a = opts.classPrefix) !== null && _a !== void 0 ? _a : 'tw-';
     }
-    defaultClassGenerator() {
+    defaultClassGenerate() {
         const chars = [];
         let rest = (this.newClassSize - (this.newClassSize % acceptChars.length)) / acceptChars.length;
         if (rest > 0) {
@@ -168,11 +170,11 @@ class ClassGenerator {
         if (cn)
             return cn;
         let newClassName;
-        if (opts.classGenerator) {
-            newClassName = opts.classGenerator(original, opts, this.context);
+        if (opts.customGenerate && typeof opts.customGenerate === 'function') {
+            newClassName = opts.customGenerate(original, opts, this.context);
         }
         if (!newClassName) {
-            newClassName = this.defaultClassGenerator();
+            newClassName = this.defaultClassGenerate();
         }
         if (opts.reserveClassName && regExpTest(opts.reserveClassName, newClassName)) {
             if (opts.log) {
@@ -320,29 +322,38 @@ function getDefaultExportFromNamespaceIfPresent(n) {
 }
 const generate = getDefaultExportFromNamespaceIfPresent(_generate__default["default"]);
 const traverse = getDefaultExportFromNamespaceIfPresent(_traverse__default["default"]);
-function jsHandler(rawSource, options) {
-    const ast = parser.parse(rawSource);
+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(new RegExp('(?<="|\\s)' + escapeStringRegexp(v), 'g'), clsGen.generateClassName(v).name);
+            }
+        }
+    }
+    return rawStr;
+}
+function jsHandler(rawSource, options) {
+    const ast = parser.parse(rawSource);
     const topt = {
         StringLiteral: {
             enter(p) {
                 const n = p.node;
-                const arr = splitCode(n.value);
-                let rawStr = n.value;
-                for (let i = 0; i < arr.length; i++) {
-                    const v = arr[i];
-                    if (set.has(v)) {
-                        let ignoreFlag = false;
-                        if (Array.isArray(n.leadingComments)) {
-                            ignoreFlag = n.leadingComments.findIndex((x) => x.value.includes('tw-mangle') && x.value.includes('ignore')) > -1;
-                        }
-                        if (!ignoreFlag) {
-                            rawStr = rawStr.replace(new RegExp(escapeStringRegexp(v), 'g'), clsGen.generateClassName(v).name);
-                        }
-                    }
-                }
-                n.value = rawStr;
+                n.value = handleValue(n.value, n, options);
+            }
+        },
+        TemplateElement: {
+            enter(p) {
+                const n = p.node;
+                n.value.raw = handleValue(n.value.raw, n, options);
             }
         },
         noScope: true
@@ -390,7 +401,7 @@ const unplugin = unplugin$1.createUnplugin((options = {}, meta) => {
         return /[-:]/.test(className);
     };
     let classSet;
-    const classGenerator = new ClassGenerator();
+    const classGenerator = new ClassGenerator(options.classGenerator);
     function getCachedClassSet() {
         const set = tailwindcssPatch.getClassCacheSet();
         set.forEach((c) => {
@@ -493,5 +504,9 @@ const unplugin = unplugin$1.createUnplugin((options = {}, meta) => {
         }
     };
 });
+const vitePlugin = unplugin.vite;
+const webpackPlugin = unplugin.webpack;
 
-module.exports = unplugin;
+exports.unplugin = unplugin;
+exports.vitePlugin = vitePlugin;
+exports.webpackPlugin = webpackPlugin;

package/dist/index.mjs

@@ -101,7 +101,7 @@ class ClassGenerator {
         this.opts = opts;
         this.classPrefix = (_a = opts.classPrefix) !== null && _a !== void 0 ? _a : 'tw-';
     }
-    defaultClassGenerator() {
+    defaultClassGenerate() {
         const chars = [];
         let rest = (this.newClassSize - (this.newClassSize % acceptChars.length)) / acceptChars.length;
         if (rest > 0) {
@@ -159,11 +159,11 @@ class ClassGenerator {
         if (cn)
             return cn;
         let newClassName;
-        if (opts.classGenerator) {
-            newClassName = opts.classGenerator(original, opts, this.context);
+        if (opts.customGenerate && typeof opts.customGenerate === 'function') {
+            newClassName = opts.customGenerate(original, opts, this.context);
         }
         if (!newClassName) {
-            newClassName = this.defaultClassGenerator();
+            newClassName = this.defaultClassGenerate();
         }
         if (opts.reserveClassName && regExpTest(opts.reserveClassName, newClassName)) {
             if (opts.log) {
@@ -311,29 +311,38 @@ function getDefaultExportFromNamespaceIfPresent(n) {
 }
 const generate = getDefaultExportFromNamespaceIfPresent(_generate);
 const traverse = getDefaultExportFromNamespaceIfPresent(_traverse);
-function jsHandler(rawSource, options) {
-    const ast = parse$1(rawSource);
+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(new RegExp('(?<="|\\s)' + escapeStringRegexp(v), 'g'), clsGen.generateClassName(v).name);
+            }
+        }
+    }
+    return rawStr;
+}
+function jsHandler(rawSource, options) {
+    const ast = parse$1(rawSource);
     const topt = {
         StringLiteral: {
             enter(p) {
                 const n = p.node;
-                const arr = splitCode(n.value);
-                let rawStr = n.value;
-                for (let i = 0; i < arr.length; i++) {
-                    const v = arr[i];
-                    if (set.has(v)) {
-                        let ignoreFlag = false;
-                        if (Array.isArray(n.leadingComments)) {
-                            ignoreFlag = n.leadingComments.findIndex((x) => x.value.includes('tw-mangle') && x.value.includes('ignore')) > -1;
-                        }
-                        if (!ignoreFlag) {
-                            rawStr = rawStr.replace(new RegExp(escapeStringRegexp(v), 'g'), clsGen.generateClassName(v).name);
-                        }
-                    }
-                }
-                n.value = rawStr;
+                n.value = handleValue(n.value, n, options);
+            }
+        },
+        TemplateElement: {
+            enter(p) {
+                const n = p.node;
+                n.value.raw = handleValue(n.value.raw, n, options);
             }
         },
         noScope: true
@@ -381,7 +390,7 @@ const unplugin = createUnplugin((options = {}, meta) => {
         return /[-:]/.test(className);
     };
     let classSet;
-    const classGenerator = new ClassGenerator();
+    const classGenerator = new ClassGenerator(options.classGenerator);
     function getCachedClassSet() {
         const set = getClassCacheSet();
         set.forEach((c) => {
@@ -484,5 +493,7 @@ const unplugin = createUnplugin((options = {}, meta) => {
         }
     };
 });
+const vitePlugin = unplugin.vite;
+const webpackPlugin = unplugin.webpack;
 
-export { unplugin as default };
+export { unplugin, vitePlugin, webpackPlugin };

package/dist/js/index.d.ts

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

@@ -38,11 +38,11 @@ function __awaiter(thisArg, _arguments, P, generator) {
 function nuxt (options = {}, nuxt) {
     nuxt.hook('webpack:config', (config) => __awaiter(this, void 0, void 0, function* () {
         config.plugins = config.plugins || [];
-        config.plugins.unshift(index.webpack(options));
+        config.plugins.unshift(index.unplugin.webpack(options));
     }));
     nuxt.hook('vite:extendConfig', (config) => __awaiter(this, void 0, void 0, function* () {
         config.plugins = config.plugins || [];
-        config.plugins.push(index.vite(options));
+        config.plugins.push(index.unplugin.vite(options));
     }));
 }
 

package/dist/nuxt.mjs

@@ -1,4 +1,4 @@
-import unplugin from './index.mjs';
+import { unplugin } from './index.mjs';
 import 'unplugin';
 import 'tailwindcss-patch';
 import 'parse5';

package/dist/rollup.js

@@ -10,6 +10,6 @@ require('@babel/traverse');
 require('postcss');
 require('postcss-selector-parser');
 
-var rollup = index.rollup;
+var rollup = index.unplugin.rollup;
 
 module.exports = rollup;

package/dist/rollup.mjs

@@ -1,4 +1,4 @@
-import unplugin from './index.mjs';
+import { unplugin } from './index.mjs';
 import 'unplugin';
 import 'tailwindcss-patch';
 import 'parse5';

package/dist/types.d.ts

@@ -1,13 +1,11 @@
 import type ClassGenerator from './classGenerator';
-export interface Options {
-}
-export interface IMangleContextClass {
+export interface IClassGeneratorContextItem {
     name: string;
     usedBy: any[];
 }
-export interface IMangleOptions {
+export interface IClassGeneratorOptions {
     reserveClassName?: (string | RegExp)[];
-    classGenerator?: (original: string, opts: IMangleOptions, context: Record<string, any>) => string | undefined;
+    customGenerate?: (original: string, opts: IClassGeneratorOptions, context: Record<string, any>) => string | undefined;
     log?: boolean;
     exclude?: (string | RegExp)[];
     include?: (string | RegExp)[];
@@ -15,7 +13,7 @@ export interface IMangleOptions {
     classPrefix?: string;
 }
 export interface IClassGenerator {
-    newClassMap: Record<string, IMangleContextClass>;
+    newClassMap: Record<string, IClassGeneratorContextItem>;
     newClassSize: number;
     context: Record<string, any>;
 }
@@ -24,3 +22,6 @@ export interface IHandlerOptions {
     runtimeSet: Set<string>;
     classGenerator: ClassGenerator;
 }
+export interface Options {
+    classGenerator?: IClassGeneratorOptions;
+}

package/dist/utils.d.ts

@@ -1,4 +1,4 @@
-import type { IMangleOptions, IClassGenerator } from './types';
+import type { IClassGeneratorOptions, IClassGenerator } from './types';
 export declare function groupBy<T>(arr: T[], cb: (arg: T) => string): Record<string, T[]>;
 export declare function getGroupedEntries<T>(entries: [string, T][], options?: {
     cssMatcher(file: string): boolean;
@@ -7,7 +7,7 @@ export declare function getGroupedEntries<T>(entries: [string, T][], options?: {
 }): Record<"css" | "html" | "js" | "other", [string, T][]>;
 export declare const acceptChars: string[];
 export declare function stripEscapeSequence(words: string): string;
-export declare const validate: (opts: IMangleOptions, classGenerator: IClassGenerator) => void;
+export declare const validate: (opts: IClassGeneratorOptions, classGenerator: IClassGenerator) => void;
 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;

package/dist/vite.js

@@ -10,6 +10,6 @@ require('@babel/traverse');
 require('postcss');
 require('postcss-selector-parser');
 
-var vite = index.vite;
+var vite = index.unplugin.vite;
 
 module.exports = vite;

package/dist/vite.mjs

@@ -1,4 +1,4 @@
-import unplugin from './index.mjs';
+import { unplugin } from './index.mjs';
 import 'unplugin';
 import 'tailwindcss-patch';
 import 'parse5';

package/dist/webpack.js

@@ -10,6 +10,6 @@ require('@babel/traverse');
 require('postcss');
 require('postcss-selector-parser');
 
-var webpack = index.webpack;
+var webpack = index.unplugin.webpack;
 
 module.exports = webpack;

package/dist/webpack.mjs

@@ -1,4 +1,4 @@
-import unplugin from './index.mjs';
+import { unplugin } from './index.mjs';
 import 'unplugin';
 import 'tailwindcss-patch';
 import 'parse5';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "unplugin-tailwindcss-mangle",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "mangle tailwindcss utilities class",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -64,7 +64,7 @@
     "postcss-selector-parser": "^6.0.11",
     "semver": "^7.5.0",
     "unplugin": "^1.3.1",
-    "tailwindcss-patch": "1.0.1"
+    "tailwindcss-patch": "1.0.2"
   },
   "publishConfig": {
     "access": "public",