unplugin-tailwindcss-mangle 0.0.3 → 0.0.4

package/README.md

@@ -13,6 +13,8 @@ mangle tailwindcss utilities plugin
     - [4. register this plugin](#4-register-this-plugin)
       - [vite](#vite)
       - [webpack](#webpack)
+  - [Options](#options)
+    - [classGenerator](#classgenerator)
   - [Notice](#notice)
 
 ## Features
@@ -74,6 +76,8 @@ 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'
@@ -83,6 +87,24 @@ const { webpackPlugin: utwm } = require('unplugin-tailwindcss-mangle')
 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.

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/index.js

@@ -112,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) {
@@ -170,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) {
@@ -322,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
@@ -392,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) => {

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) => {

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "unplugin-tailwindcss-mangle",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "mangle tailwindcss utilities class",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",