Refactor class name match method in the ideal way

examples/taro/react/config/index.js

@@ -13,7 +13,8 @@ const config = {
   outputRoot: 'dist',
   plugins: [
       ['@dcasia/mini-program-tailwind-webpack-plugin/dist/taro', {
-        enableRpx: true
+        enableRpx: true,
+        enableDebugLog: true
       }]
   ],
   defineConstants: {

examples/taro/react/package.json

@@ -47,7 +47,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.8.0",
-    "@dcasia/mini-program-tailwind-webpack-plugin": "^1.3.3",
+    "@dcasia/mini-program-tailwind-webpack-plugin": "^1.3.4",
     "@tarojs/mini-runner": "3.4.9",
     "@tarojs/webpack-runner": "3.4.9",
     "@types/react": "^17.0.2",

examples/taro/react/yarn.lock

@@ -1080,10 +1080,10 @@
     "@babel/helper-validator-identifier" "^7.16.7"
     "to-fast-properties" "^2.0.0"
 
-"@dcasia/mini-program-tailwind-webpack-plugin@^1.3.3":
-  "integrity" "sha512-b6h4AlOqnF7LLo5HDY3uLeuofILEtP1LkDVmKkTKj7Y60UdreaDlGXPGznfd9x8KDy1iCqWQjNysFaDu/ZUfWA=="
-  "resolved" "https://registry.npmjs.org/@dcasia/mini-program-tailwind-webpack-plugin/-/mini-program-tailwind-webpack-plugin-1.3.3.tgz"
-  "version" "1.3.3"
+"@dcasia/mini-program-tailwind-webpack-plugin@^1.3.4":
+  "integrity" "sha512-es0DHytywUapkRceV7GnvfbjNUWet2dfFnRmPPT9P7szVWHcY9H6bUF6zQXQmvx2HYcZNTwQyDM3umjF9q+lgg=="
+  "resolved" "https://registry.npmjs.org/@dcasia/mini-program-tailwind-webpack-plugin/-/mini-program-tailwind-webpack-plugin-1.3.4.tgz"
+  "version" "1.3.4"
   dependencies:
     "@babel/core" "^7.17.5"
     "@vivaxy/wxml" "^2.1.0"

examples/taro/vue-2/config/index.js

@@ -12,7 +12,8 @@ const config = {
   outputRoot: 'dist',
   plugins: [
     ['@dcasia/mini-program-tailwind-webpack-plugin/dist/taro', {
-        enableRpx: true
+        enableRpx: true,
+        enableDebugLog: true
     }]
   ],
   defineConstants: {

examples/taro/vue-2/package.json

@@ -46,7 +46,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.8.0",
-    "@dcasia/mini-program-tailwind-webpack-plugin": "^1.3.3",
+    "@dcasia/mini-program-tailwind-webpack-plugin": "^1.3.4",
     "@tarojs/mini-runner": "3.4.9",
     "@tarojs/webpack-runner": "3.4.9",
     "@types/webpack-env": "^1.13.6",

examples/taro/vue-2/yarn.lock

@@ -1080,10 +1080,10 @@
     "@babel/helper-validator-identifier" "^7.16.7"
     "to-fast-properties" "^2.0.0"
 
-"@dcasia/mini-program-tailwind-webpack-plugin@^1.3.3":
-  "integrity" "sha512-b6h4AlOqnF7LLo5HDY3uLeuofILEtP1LkDVmKkTKj7Y60UdreaDlGXPGznfd9x8KDy1iCqWQjNysFaDu/ZUfWA=="
-  "resolved" "https://registry.npmjs.org/@dcasia/mini-program-tailwind-webpack-plugin/-/mini-program-tailwind-webpack-plugin-1.3.3.tgz"
-  "version" "1.3.3"
+"@dcasia/mini-program-tailwind-webpack-plugin@^1.3.4":
+  "integrity" "sha512-es0DHytywUapkRceV7GnvfbjNUWet2dfFnRmPPT9P7szVWHcY9H6bUF6zQXQmvx2HYcZNTwQyDM3umjF9q+lgg=="
+  "resolved" "https://registry.npmjs.org/@dcasia/mini-program-tailwind-webpack-plugin/-/mini-program-tailwind-webpack-plugin-1.3.4.tgz"
+  "version" "1.3.4"
   dependencies:
     "@babel/core" "^7.17.5"
     "@vivaxy/wxml" "^2.1.0"

examples/taro/vue-3/config/index.js

@@ -12,7 +12,8 @@ const config = {
   outputRoot: 'dist',
   plugins: [
     ['@dcasia/mini-program-tailwind-webpack-plugin/dist/taro', {
-        enableRpx: true
+        enableRpx: true,
+        enableDebugLog: true
     }]
   ],
   defineConstants: {

examples/taro/vue-3/package.json

@@ -44,7 +44,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.8.0",
-    "@dcasia/mini-program-tailwind-webpack-plugin": "^1.3.3",
+    "@dcasia/mini-program-tailwind-webpack-plugin": "^1.3.4",
     "@tarojs/mini-runner": "3.4.9",
     "@tarojs/webpack-runner": "3.4.9",
     "@types/webpack-env": "^1.13.6",

examples/taro/vue-3/yarn.lock

@@ -1080,10 +1080,10 @@
     "@babel/helper-validator-identifier" "^7.16.7"
     "to-fast-properties" "^2.0.0"
 
-"@dcasia/mini-program-tailwind-webpack-plugin@^1.3.3":
-  "integrity" "sha512-b6h4AlOqnF7LLo5HDY3uLeuofILEtP1LkDVmKkTKj7Y60UdreaDlGXPGznfd9x8KDy1iCqWQjNysFaDu/ZUfWA=="
-  "resolved" "https://registry.npmjs.org/@dcasia/mini-program-tailwind-webpack-plugin/-/mini-program-tailwind-webpack-plugin-1.3.3.tgz"
-  "version" "1.3.3"
+"@dcasia/mini-program-tailwind-webpack-plugin@^1.3.4":
+  "integrity" "sha512-es0DHytywUapkRceV7GnvfbjNUWet2dfFnRmPPT9P7szVWHcY9H6bUF6zQXQmvx2HYcZNTwQyDM3umjF9q+lgg=="
+  "resolved" "https://registry.npmjs.org/@dcasia/mini-program-tailwind-webpack-plugin/-/mini-program-tailwind-webpack-plugin-1.3.4.tgz"
+  "version" "1.3.4"
   dependencies:
     "@babel/core" "^7.17.5"
     "@vivaxy/wxml" "^2.1.0"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dcasia/mini-program-tailwind-webpack-plugin",
-  "version": "1.3.3",
+  "version": "1.3.4",
   "description": "让你的小程序用上原汁原味的 Tailwind/Windi CSS",
   "keywords": ["miniprogram", "mini-program", "tailwindcss", "windicss", "wechat", "taro", "css", "postcss"],
   "main": "dist/index.js",
@@ -23,7 +23,9 @@
     "test": "jest",
     "lint": "eslint . --ext .ts --fix",
     "build": "rollup --config rollup.config.ts",
-    "prepare": "npm run build"
+    "prepare": "npm run build",
+    "publish": "npm publish --public",
+    "publish:beta": "npm publish --public --tag beta"
   },
   "repository": {
     "type": "git",

src/babel/index.ts

@@ -2,21 +2,31 @@ import { FileType, TaroFramework } from '../enum'
 import { handleCharacters } from '../utilities'
 import { PluginItem } from '@babel/core'
 import * as babel from '@babel/core'
-import { handleClassNameWithCurlyBraces } from '../template-handler'
+import { handleClassNameInTemplate } from '../template-handler'
 
 let classFieldsChanges: [string, string][] = []
 
 const classFieldName = {
     [ TaroFramework.React ]: [ 'className' ],
     [ TaroFramework.Vue2 ]: [ 'class', 'staticClass' ],
-    [ TaroFramework.Vue3 ]: [ 'class', 'staticClass' ],
+    [ TaroFramework.Vue3 ]: [ 'class' ],
 }
 
-function logClassFieldsChange(rawContent: string, newContent: string) {
+function isIdentifierTheClassField(path: babel.NodePath<babel.types.ObjectProperty>, framework: TaroFramework) {
+
+    const targetClassFieldName = classFieldName[ framework ] || []
+    const key = path.get('key')
+    const keyName = key.isIdentifier() && key.node.name
+
+    return targetClassFieldName.includes(keyName)
+
+}
+
+function recordClassNameChanges(rawContent: string, newContent: string) {
     classFieldsChanges.push([ rawContent, newContent ])
 }
 
-function cleanClassFieldsChanges() {
+function cleanClassNameChanges() {
     classFieldsChanges = []
 }
 
@@ -44,36 +54,42 @@ export function replaceStringLiteralPlugin({ types: t }): PluginItem {
 
 export function replaceClassFieldsValuePlugin({ types: t }): PluginItem {
 
+    let isVisitingClassNameField = false
+
     return {
         visitor: {
-            StringLiteral(path, state) {
 
-                const targetClassFieldName = classFieldName[ state.opts.framework ] || []
+            /**
+             * Assuming there shouldn't have nested class fields in any cases
+             */
+            ObjectProperty: {
+                enter(path, state) {
 
-                const keyNode = path.key === 'value' && path.parentPath.isObjectProperty() && path.parentPath.get('key') // universal class: 'test'
-                    || (path.parentPath.isArrayExpression() && path.parentPath.parentPath.isObjectProperty() && path.parentPath.parentPath.get('key')) // vue class: ['test', 'test']
-                    || (path.parentPath.isMemberExpression() && path.parentPath.parentPath.isCallExpression() && path.parentPath.parentPath.parentPath.isObjectProperty() && path.parentPath.parentPath.parentPath.get('key')) // react className: 'test'.concat('test-1', 'test-2')
-                    || (path.parentPath.isCallExpression() && path.parentPath.parentPath.isObjectProperty() && path.parentPath.parentPath.get('key')) // react className: 'test'.concat('test-1', 'test-2')
-                    || (path.parentPath.isConditionalExpression() && path.parentPath.parentPath.isCallExpression() && path.parentPath.parentPath.parentPath.isObjectProperty() && path.parentPath.parentPath.parentPath.get('key')) // react className: 'test'.concat(true ? 'test-1' : '')
-                    || (path.key === 'key' && path.parentPath.findParent(path => path.isObjectProperty())?.get('key')) // vue class: ['test', {'test': true}] or class: {'test': true}
-                    || (path.parentPath.isArrayExpression() && path.parentPath.findParent(path => path.isObjectProperty())?.get('key')) // vue class: Object(['test'])
+                    if (isIdentifierTheClassField(path, state.opts.framework)) {
+                        isVisitingClassNameField = true
+                    }
 
-                if (keyNode && !Array.isArray(keyNode)) {
+                },
+                exit(path, state) {
 
-                    const foundClassName = targetClassFieldName.find(name => keyNode.isIdentifier?.({ name }))
+                    if (isIdentifierTheClassField(path, state.opts.framework)) {
+                        isVisitingClassNameField = false
+                    }
 
-                    if (foundClassName) {
+                },
+            },
+            StringLiteral(path) {
 
-                        const rawContent = path.node.value
-                        const newContent = handleClassNameWithCurlyBraces(rawContent)
+                if (isVisitingClassNameField) {
 
-                        if (newContent !== rawContent) {
+                    const rawContent = path.node.value
+                    const newContent = handleClassNameInTemplate(rawContent)
 
-                            logClassFieldsChange(rawContent, newContent)
-                            path.replaceWith(t.stringLiteral(newContent))
-                            path.skip()
+                    if (newContent !== rawContent) {
 
-                        }
+                        recordClassNameChanges(rawContent, newContent)
+                        path.replaceWith(t.stringLiteral(newContent))
+                        path.skip()
 
                     }
 
@@ -87,7 +103,7 @@ export function replaceClassFieldsValuePlugin({ types: t }): PluginItem {
 
 export function collectRawAndModified(rawContent: string, framework: TaroFramework) {
 
-    cleanClassFieldsChanges()
+    cleanClassNameChanges()
 
     babel.transformSync(rawContent, {
         plugins: [

src/taro/wepack-plugin.ts

@@ -47,6 +47,12 @@ export default class TaroVNodeTailwindWebpackPlugin implements WebpackPluginInst
                     TaroVNodeTailwindWebpackPlugin.pluginName,
                     modules => {
 
+                        let startTime = 0
+
+                        if (this.options.enableDebugLog) {
+                            startTime = Date.now()
+                        }
+
                         for (const module of Array.from(modules)) {
 
                             for (const charc of this.moduleCharcs) {
@@ -63,15 +69,24 @@ export default class TaroVNodeTailwindWebpackPlugin implements WebpackPluginInst
 
                         }
 
+                        if (this.options.enableDebugLog) {
+                            console.log('[mini-program-tailwind-plugin]: Class names collection benchmark', `${ Date.now() - startTime }ms`)
+                        }
+
                     },
                 )
 
                 compilation.hooks.afterOptimizeAssets.tap(
                     TaroVNodeTailwindWebpackPlugin.pluginName,
                     assets => {
 
+                        let startTime = 0
+
                         if (this.options.enableDebugLog) {
+
+                            startTime = Date.now()
                             console.log('[mini-program-tailwind-plugin]: Collected', rawVsModifiedPairs)
+
                         }
 
                         for (const pathname in assets) {
@@ -135,6 +150,10 @@ export default class TaroVNodeTailwindWebpackPlugin implements WebpackPluginInst
 
                         }
 
+                        if (this.options.enableDebugLog) {
+                            console.log('[mini-program-tailwind-plugin]: Class names replacement benchmark', `${ Date.now() - startTime }ms`)
+                        }
+
                     },
 
                 )

src/template-handler.ts

@@ -16,7 +16,7 @@ export function handleTemplate(rawSource: string) {
         if (node.type === wxml.NODE_TYPES.ELEMENT) {
 
             if (node.attributes.class) {
-                node.attributes.class = handleClassNameWithCurlyBraces(node.attributes.class)
+                node.attributes.class = handleClassNameInTemplate(node.attributes.class)
             }
 
         }
@@ -27,7 +27,7 @@ export function handleTemplate(rawSource: string) {
 
 }
 
-export function handleClassNameWithCurlyBraces(raw) {
+export function handleClassNameInTemplate(raw) {
 
     const scriptsMatchResults = Array.from(raw.matchAll(matchScriptsInsideClassNames))