feat: add classGenerator options

Author: sonofmagic

packages/unplugin-tailwindcss-mangle/src/classGenerator.ts

@@ -17,7 +17,7 @@ class ClassGenerator implements IClassGenerator {
     this.classPrefix = opts.classPrefix ?? 'tw-'
   }
 
-  defaultClassGenerator() {
+  defaultClassGenerate() {
     const chars = []
     let rest = (this.newClassSize - (this.newClassSize % acceptChars.length)) / acceptChars.length
     if (rest > 0) {
@@ -80,11 +80,11 @@ class ClassGenerator implements IClassGenerator {
     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)) {

packages/unplugin-tailwindcss-mangle/src/index.ts

@@ -8,9 +8,8 @@ import ClassGenerator from './classGenerator'
 import { htmlHandler } from './html'
 import { jsHandler } from './js'
 import { cssHandler } from './css'
-import type { } from 'webpack'
+import type {} from 'webpack'
 export const unplugin = createUnplugin((options: Options | undefined = {}, meta) => {
-
   const isMangleClass = (className: string) => {
     // ignore className like 'filter','container'
     // it may be dangerous to mangle/rename all StringLiteral , so use /-/ test for only those with /-/ like:
@@ -19,9 +18,8 @@ export const unplugin = createUnplugin((options: Options | undefined = {}, meta)
   }
   let classSet: Set<string>
   // let cached: boolean
-  const classGenerator = new ClassGenerator()
+  const classGenerator = new ClassGenerator(options.classGenerator)
   function getCachedClassSet() {
-
     const set = getClassCacheSet()
     set.forEach((c) => {
       if (!isMangleClass(c)) {

packages/unplugin-tailwindcss-mangle/src/types.ts

@@ -1,9 +1,5 @@
 import type ClassGenerator from './classGenerator'
 
-export interface Options {
-  // define your plugin options here
-}
-
 export interface IMangleContextClass {
   name: string
   usedBy: any[]
@@ -14,7 +10,7 @@ export interface IMangleOptions {
   reserveClassName?: (string | RegExp)[]
   // ignorePrefix?: string[]
   // ignorePrefixRegExp?: string
-  classGenerator?: (original: string, opts: IMangleOptions, context: Record<string, any>) => string | undefined
+  customGenerate?: (original: string, opts: IMangleOptions, context: Record<string, any>) => string | undefined
   log?: boolean
   exclude?: (string | RegExp)[]
   include?: (string | RegExp)[]
@@ -34,3 +30,7 @@ export interface IHandlerOptions {
   runtimeSet: Set<string>
   classGenerator: ClassGenerator
 }
+
+export interface Options {
+  classGenerator?: IMangleOptions
+}

packages/unplugin-tailwindcss-mangle/test/classGenerator.test.ts

@@ -5,7 +5,7 @@ describe('classGenerator', () => {
     const result: string[] = []
     const clsGen = new ClassGenerator()
     for (let i = 0; i < 26 * 27 + 1; i++) {
-      result.push(clsGen.defaultClassGenerator())
+      result.push(clsGen.defaultClassGenerate())
       clsGen.newClassSize++
     }
     expect(result).toMatchSnapshot()
@@ -14,6 +14,6 @@ describe('classGenerator', () => {
   it('26*27+1', () => {
     const clsGen = new ClassGenerator()
     clsGen.newClassSize = 26 * 27
-    expect(clsGen.defaultClassGenerator()).toBe('tw-aaa')
+    expect(clsGen.defaultClassGenerate()).toBe('tw-aaa')
   })
 })