转义不支持的选择器名称字符

Author: Dog-Egg

package.json

@@ -115,4 +115,4 @@
   "engines": {
     "node": ">=14.0.0"
   }
-}
+}

src/lib/adaptMiniPrograms.js

@@ -0,0 +1,12 @@
+export default function adaptMiniPrograms(context) {
+  const config = context.tailwindConfig
+  return (root) => {
+    if (!config.miniPrograms) return
+
+    // 转义小程序不支持的选择器字符
+    // 例如：.first\:mt-[20px]:first-child -> .first_mt-_20px_:first-child
+    root.walkRules((rule) => {
+      rule.selector = rule.selector.replace(/\\[:\[\]]/g, '_')
+    })
+  }
+}

src/processTailwindFeatures.js

@@ -7,6 +7,7 @@ import resolveDefaultsAtRules from './lib/resolveDefaultsAtRules'
 import collapseAdjacentRules from './lib/collapseAdjacentRules'
 import collapseDuplicateDeclarations from './lib/collapseDuplicateDeclarations'
 import partitionApplyAtRules from './lib/partitionApplyAtRules'
+import adaptMiniPrograms from './lib/adaptMiniPrograms'
 import { createContext } from './lib/setupContextUtils'
 import { issueFlagNotices } from './featureFlags'
 
@@ -52,5 +53,8 @@ export default function processTailwindFeatures(setupContext) {
     resolveDefaultsAtRules(context)(root, result)
     collapseAdjacentRules(context)(root, result)
     collapseDuplicateDeclarations(context)(root, result)
+
+    // 适配小程序
+    adaptMiniPrograms(context)(root, result)
   }
 }

src/vite/index.js

@@ -0,0 +1,28 @@
+export default function modifyClasses() {
+  return {
+    name: 'modify-classes',
+    enforce: 'pre',
+    transform(code, id) {
+      // 仅处理 HTML / Vue / Svelte 文件
+      if (!/\.(html|vue|svelte)$/.test(id)) {
+        return
+      }
+
+      // 替换所有 class="..."
+      const transformed = code.replace(/class\s*=\s*"([^"]+)"/g, (_, classValue) => {
+        const newClasses = classValue
+          .split(/\s+/)
+          .map((cls) => replaceInvalidChars(cls))
+          .join(' ')
+        return `class="${newClasses}"`
+      })
+      return transformed
+    },
+  }
+}
+
+// 自定义替换规则函数
+function replaceInvalidChars(cls) {
+  // 这里按需调整：微信小程序不支持 :, [, ]
+  return cls.replace(/[:\[\]]/g, '_')
+}

tests/mini-programs.test.js

@@ -0,0 +1,38 @@
+import { run, html, css } from './util/run'
+import modifyClasses from '../src/vite'
+
+test('Escape special characters', async () => {
+  const config = {
+    content: [
+      {
+        raw: html`<div class="first:mt-[20rpx]"></div>`,
+      },
+    ],
+    miniPrograms: true,
+  }
+
+  const input = css`
+    @tailwind utilities;
+  `
+  const result = await run(input, config)
+  return expect(result.css).toMatchFormattedCss(css`
+    .first_mt-_20rpx_:first-child {
+      margin-top: 20rpx;
+    }
+  `)
+})
+
+test('vite plugin', async () => {
+  const source = html`
+    <template>
+      <div class="first:mt-[20rpx] hover:bg-gray-100"></div>
+    </template>
+  `
+  expect(modifyClasses().transform(source, 'App.vue')).toMatchInlineSnapshot(`
+    "
+        <template>
+          <div class="first_mt-_20rpx_ hover_bg-gray-100"></div>
+        </template>
+      "
+  `)
+})