feat: add postprocess transformSelector

MellowCo · Jul 11, 2022 · 853028e · 853028e
1 parent a6bff17
commit 853028e
Show file tree

Hide file tree

Showing 8 changed files with 75 additions and 992 deletions.
diff --git a/README.md b/README.md
@@ -107,7 +107,6 @@ yarn add -D unocss @unocss/webpack unplugin-transform-wx-class unocss-preset-wxa
 const UnoCSS = require('unocss/webpack').default
 const presetWxapp = require('unocss-preset-wxapp').default
 const transformWxClass = require('unplugin-transform-wx-class/webpack')
-const transformSelector = require('unplugin-transform-wx-class/transformSelector')
 
 module.exports = {
   configureWebpack: {
@@ -122,10 +121,6 @@ module.exports = {
             'center': 'flex justify-center items-center',
           },
         ],
-        postprocess: (css) => {
-          css.selector = transformSelector(css.selector)
-          return css
-        },
       }),
       transformWxClass(),
     ],
@@ -168,7 +163,6 @@ yarn add -D unocss @unocss/webpack unplugin-transform-wx-class unocss-preset-wxa
 const UnoCSS = require('unocss/webpack').default
 const presetWxapp = require('unocss-preset-wxapp').default
 const transformWxClass = require('unplugin-transform-wx-class/webpack')
-const transformSelector = require('unplugin-transform-wx-class/transformSelector')
 
 const config = {
   mini: {
@@ -185,10 +179,6 @@ const config = {
               'center': 'flex justify-center items-center',
             },
           ],
-          postprocess: (css) => {
-            css.selector = transformSelector(css.selector)
-            return css
-          },
         }))
       chain
         .plugin('transformWxClass')
@@ -209,10 +199,6 @@ const config = {
               'center': 'flex justify-center items-center',
             },
           ],
-          postprocess: (css) => {
-            css.selector = transformSelector(css.selector)
-            return css
-          },
         }))
       chain
         .plugin('transformWxClass')
@@ -256,7 +242,6 @@ yarn add -D unocss @unocss/webpack unplugin-transform-wx-class unocss-preset-wxa
 const UnoCSS = require('unocss/webpack').default
 const presetWxapp = require('unocss-preset-wxapp').default
 const transformWxClass = require('unplugin-transform-wx-class/webpack')
-const transformSelector = require('unplugin-transform-wx-class/transformSelector')
 
 const config = {
   mini: {
@@ -273,10 +258,6 @@ const config = {
               'center': 'flex justify-center items-center',
             },
           ],
-          postprocess: (css) => {
-            css.selector = transformSelector(css.selector)
-            return css
-          },
         }))
       chain
         .plugin('transformWxClass')
@@ -297,10 +278,6 @@ const config = {
               'center': 'flex justify-center items-center',
             },
           ],
-          postprocess: (css) => {
-            css.selector = transformSelector(css.selector)
-            return css
-          },
         }))
       chain
         .plugin('transformWxClass')
@@ -343,7 +320,6 @@ yarn add -D unocss @unocss/webpack unplugin-transform-wx-class unocss-preset-wxa
 const UnoCSS = require('unocss/webpack').default
 const presetWxapp = require('unocss-preset-wxapp').default
 const transformWxClass = require('unplugin-transform-wx-class/webpack')
-const transformSelector = require('unplugin-transform-wx-class/transformSelector')
 
 const config = {
   mini: {
@@ -360,10 +336,6 @@ const config = {
               'center': 'flex justify-center items-center',
             },
           ],
-          postprocess: (css) => {
-            css.selector = transformSelector(css.selector)
-            return css
-          },
         }))
       chain
         .plugin('transformWxClass')
@@ -436,7 +408,7 @@ import { defineConfig } from 'vite'
 import uni from '@dcloudio/vite-plugin-uni'
 import Unocss from 'unocss/vite'
 import presetWxapp from 'unocss-preset-wxapp'
-import { transformSelector, transformWxClass } from 'unplugin-transform-wx-class/vite'
+import transformWxClass  from 'unplugin-transform-wx-class/vite'
 
 export default defineConfig({
   plugins: [
@@ -451,10 +423,6 @@ export default defineConfig({
           'center': 'flex justify-center items-center',
         },
       ],
-      postprocess: (css) => {
-        css.selector = transformSelector(css.selector)
-        return css
-      },
     }),
     transformWxClass(),
   ],

diff --git a/package.json b/package.json
@@ -66,9 +66,12 @@
     "test": "vitest",
     "uniapp3": "npm -C examples/uniapp_vue3 run dev:mp-weixin",
     "uniapp2": "nr build &&npm -C examples/uniapp_vue2 run dev:mp-weixin",
+    "taro": "nr build &&npm -C examples/taro_react run dev:weapp",
+    "taro_vue2": "nr build &&npm -C examples/taro_vue2 run dev:weapp",
+    "taro_vue3": "nr build &&npm -C examples/taro_vue3 run dev:weapp",
     "uniapp3:h5": "npm run build && npm -C examples/uniapp_vue3 run dev:h5",
     "prepublishOnly": "nr build",
-    "release": "bumpp && npm publish"
+    "release": "bumpp"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.25.2",
@@ -78,7 +81,7 @@
     "typescript": "^4.7.4",
     "unbuild": "^0.7.4",
     "vite": "^2.9.14",
-    "vitest": "^0.17.1"
+    "vitest": "^0.18.0"
   },
   "dependencies": {
     "@unocss/core": "^0.44.0"

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/index.ts b/src/index.ts
@@ -1,8 +1,9 @@
-import type { Postprocessor, Preset, PresetOptions } from '@unocss/core'
+import type { Preset, PresetOptions } from '@unocss/core'
 import { preflights } from './preflights'
 import { rules } from './rules'
 import type { Theme, ThemeAnimation } from './theme'
 import { theme } from './theme'
+import { transformSelector } from './transform'
 import { variants } from './variants'
 
 export { preflights } from './preflights'
@@ -11,7 +12,7 @@ export { parseColor } from './utils'
 
 export type { ThemeAnimation, Theme }
 
-// v0.41.2
+// v0.44.0
 
 export interface PresetMiniOptions extends PresetOptions {
   /**
@@ -45,6 +46,10 @@ export const presetWeapp = (options: PresetMiniOptions = {}): Preset<Theme> => {
     variants: variants(options),
     options,
     postprocess(css) {
+      // 转换
+      css.selector = transformSelector(css.selector)
+
+      // 设置变量前缀
       if (options.variablePrefix && options.variablePrefix !== 'un-')
         VarPrefixPostprocessor(options.variablePrefix, css)
     },

diff --git a/src/transform/index.ts b/src/transform/index.ts
@@ -1,22 +1,17 @@
-/*
- * @Author: licl
- * @Date: 2022-07-07 21:07:52
- * @LastEditTime: 2022-07-07 21:17:38
- * @LastEditors: licl
- * @Description:
- */
-const rules: { [key: string]: string } = {
-  '-d-': '.',
-  '-s-': '/',
-  '-c-': ':',
-  '-p-': '%',
-  '-e-': '!',
-  '-w-': '#',
-  '-bl-': '(',
-  '-br-': ')',
-  '-fl-': '[',
-  '-fr-': ']',
-  '-r-': '$',
+import { escapeRegExp } from '@unocss/core'
+
+const rules: Record<string, string> = {
+  '.': '-d-',
+  '/': '-s-',
+  ':': '-c-',
+  '%': '-p-',
+  '!': '-e-',
+  '#': '-w-',
+  '(': '-bl-',
+  ')': '-br-',
+  '[': '-fl-',
+  ']': '-fr-',
+  '$': '-r-',
 }
 
 /**
@@ -27,6 +22,20 @@ const rules: { [key: string]: string } = {
  */
 export function restoreSelector(selector: string) {
   for (const rule in rules)
-    selector = selector.replaceAll(rule, rules[rule])
+    selector = selector.replaceAll(rules[rule], rule)
+  return selector
+}
+
+export function transformSelector(selector: string) {
+  // selector = selector.slice(1)
+  // .ring-offset-size-\$variable => .ring-offset-size--r-variable
+
+  if (/[\.\/:%!#\(\)\[\]$]/.test(selector)) {
+    for (const rule in rules) {
+      const replaceReg = new RegExp(escapeRegExp(`\\${rule}`), 'g')
+      // selector = selector.replace(replaceReg, transformRules[transformRule])
+      selector = selector.replace(replaceReg, rules[rule])
+    }
+  }
   return selector
 }