Added 'customAttributes' configuration to support custom class attribute names (#75)

Author: uxuip

package.json

@@ -60,11 +60,12 @@
     },
     "homepage": "https://github.com/dcasia/mini-program-tailwind#readme",
     "devDependencies": {
-        "@rollup/plugin-commonjs": "^21.0.2",
+        "@rollup/plugin-commonjs": "^21.1.0",
         "@rollup/plugin-multi-entry": "^4.1.0",
         "@rollup/plugin-typescript": "^8.3.1",
         "@tarojs/service": "^3.4.9",
         "@types/jest": "^27.4.1",
+        "@types/micromatch": "^4.0.2",
         "@typescript-eslint/eslint-plugin": "^5.13.0",
         "@typescript-eslint/parser": "^5.13.0",
         "eslint": "^8.10.0",
@@ -75,14 +76,16 @@
         "rollup": "^2.68.0",
         "rollup-plugin-dts": "^4.2.1",
         "tslib": "^2.4.0",
+        "typescript": "^4.7.4",
         "vite": "^2.9.9",
         "webpack": "^5.69.1"
     },
     "dependencies": {
         "@babel/core": "^7.17.5",
         "@vivaxy/wxml": "^2.1.0",
+        "micromatch": "^4.0.5",
         "postcss": "^8.4.7",
         "webpack-sources": "^1.4.3",
         "windicss-webpack-plugin": "^1.7.2"
     }
-}
+}

rollup.config.ts

@@ -1,5 +1,6 @@
 import { defineConfig } from 'rollup'
 import typescript from '@rollup/plugin-typescript'
+import commonjs from '@rollup/plugin-commonjs'
 
 export default defineConfig([
     {
@@ -34,6 +35,7 @@ export default defineConfig([
             '@vivaxy/wxml',
             'webpack-sources',
             'windicss-webpack-plugin',
+            'micromatch',
         ],
         plugins: [
             typescript(
@@ -51,6 +53,7 @@ export default defineConfig([
             'postcss',
             '@babel/core',
             '@vivaxy/wxml',
+            'micromatch',
         ],
         plugins: [
             typescript(
@@ -68,11 +71,13 @@ export default defineConfig([
             '@babel/core',
             '@vivaxy/wxml',
             'postcss',
+            'micromatch',
         ],
         plugins: [
             typescript(
                 { tsconfig: './tsconfig.json' },
             ),
+            commonjs(),
         ],
     },
     // {

src/interfaces.ts

@@ -8,6 +8,7 @@ export interface Options {
         spaceBetweenItems?: string[],
         divideItems?: string[],
         customComponents?: string[],
+        customAttributes?: Record<string, string | string[]>,
     },
 }
 

src/template-handler.ts

@@ -1,14 +1,15 @@
 import * as wxml from '@vivaxy/wxml'
+import micromatch from 'micromatch'
 import { handleCharacters } from './utilities'
 import { FileType } from './enum'
 import { replaceStringLiteralPlugin } from './babel'
 import * as babel from '@babel/core'
+import type { Options } from './interfaces'
 
 const matchScriptsInsideClassNames = /({{)(.+?)(}})/g
 const replaceMarker = '__MP_TW_PLUGIN_REPLACE__'
 
-export function handleTemplate(rawSource: string) {
-
+export function handleTemplate(rawSource: string, options?: Options) {
     const parsed = wxml.parse(rawSource)
 
     wxml.traverse(parsed, node => {
@@ -23,6 +24,28 @@ export function handleTemplate(rawSource: string) {
                 node.attributes.virtualHostClass = node.attributes.class
             }
 
+            if (options?.utilitiesSettings?.customAttributes) {
+
+                for (const [match, attrs] of Object.entries(options.utilitiesSettings.customAttributes)) {
+
+                    if (/^[\w-]+$/.test(match) ? match === node.tagName : micromatch.isMatch(node.tagName, match)) {
+                        const _attrs = Array.isArray(attrs) ? attrs : [attrs]
+    
+                        for (const attrKey of _attrs) {
+
+                            // skip class because it has already been converted
+                            if (attrKey === 'class') continue
+
+                            if (node.attributes[attrKey]) {
+                                node.attributes[attrKey] = handleClassNameInTemplate(node.attributes[attrKey])
+                            }
+
+                        }
+                    }
+
+                }
+
+            }
         }
 
     })

src/universal-handler.ts

@@ -10,7 +10,7 @@ export function handleSource(fileType: FileType, source: string, options?: Optio
     }
 
     if (fileType === FileType.Template) {
-        return handleTemplate(source)
+        return handleTemplate(source, options)
     }
 
 }

test/index.test.ts

@@ -73,3 +73,33 @@ test('css value infer', () => {
     expect(handledTemplate).toBe('.h--0-d-5px- {height: 0.5px;}')
 
 })
+
+test('customAttributes', () => {
+
+    const template = `<view class="w-[0.5px] w-0.5px w-[2rpx] w-2rpx" custom-class="w-[2rpx]"></view>`
+    const handledTemplate = handleSource('template', template, {
+        utilitiesSettings: {
+            customAttributes: {
+                'view': ['class', 'custom-class'],
+            }
+        }
+    })
+
+    expect(handledTemplate).toBe('<view class="w--0-d-5px- w-0-d-5px w--2rpx- w-2rpx" custom-class="w--2rpx-"></view>')
+
+})
+
+test('customAttributes match', () => {
+
+    const template = `<custom-component class="w-[0.5px] w-0.5px w-[2rpx] w-2rpx" custom-class="w-[2rpx]"></custom-component>`
+    const handledTemplate = handleSource('template', template, {
+        utilitiesSettings: {
+            customAttributes: {
+                'custom-*': ['custom-class'],
+            }
+        }
+    })
+
+    expect(handledTemplate).toBe('<custom-component class="w--0-d-5px- w-0-d-5px w--2rpx- w-2rpx" custom-class="w--2rpx-"></custom-component>')
+
+})

tsconfig.json

@@ -5,7 +5,8 @@
       // optional - in general it's a good practice to decouple declaration files from your actual transpiled JavaScript files
       "declarationDir": "dts",
       // optional if you're using babel to transpile TS - JS
-      "emitDeclarationOnly": true
+      "emitDeclarationOnly": true,
+      "esModuleInterop": true
     },
     "include": ["src/**/*"]
 }