feat: ✨ add transform options

src/index.ts

@@ -33,11 +33,18 @@ export interface PresetMiniOptions extends PresetOptions {
    * @default undefined
    */
   prefix?: string
+  /**
+   * 是否转换微信class
+   *
+   * @default true
+   */
+  transform?: boolean
 }
 
 export const presetWeapp = (options: PresetMiniOptions = {}): Preset<Theme> => {
   options.dark = options.dark ?? 'class'
   options.attributifyPseudo = options.attributifyPseudo ?? false
+  options.transform = options.transform ?? true
 
   return {
     name: 'unocss-preset-weapp',
@@ -46,8 +53,10 @@ export const presetWeapp = (options: PresetMiniOptions = {}): Preset<Theme> => {
     variants: variants(options),
     options,
     postprocess(css) {
+      if (options.transform) {
       // 转换
-      css.selector = transformSelector(css.selector)
+        css.selector = transformSelector(css.selector)
+      }
 
       // 设置变量前缀
       if (options.variablePrefix && options.variablePrefix !== 'un-')

test/__snapshots__/preset-weapp.test.ts.snap

@@ -263,6 +263,15 @@ page,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-
 .box-content{box-sizing:content-box;}"
 `;
 
+exports[`preset-weapp > replaceAll 1`] = `
+"/* layer: preflights */
+page,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-ring-offset-shadow:0 0 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);}::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-ring-offset-shadow:0 0 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);}
+/* layer: default */
+.bg--fl--w-452233-fr--c-40,
+.bg--fl--w-452233-fr--c-40-c-50{background-color:rgba(69,34,51,0.4);}
+.bg--fl--w-452233-fr--c-50{background-color:rgba(69,34,51,0.5);}"
+`;
+
 exports[`preset-weapp > shadow 1`] = `
 "/* layer: preflights */
 page,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-ring-offset-shadow:0 0 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);}::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-ring-offset-shadow:0 0 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);}

test/assets/weapp/index.ts

@@ -10,3 +10,4 @@ export * from './shadow'
 export * from './flex'
 export * from './grid'
 export * from './position'
+export * from './replaceAll'

test/assets/weapp/replaceAll.ts

@@ -0,0 +1,4 @@
+export const replaceAll = [
+  'bg-[#452233]:40 bg-[#452233]:50',
+  'bg-[#452233]:40:50',
+]

test/preset-mini.test.ts

@@ -9,6 +9,7 @@ const uno = createGenerator({
     presetMini({
       dark: 'media',
       variablePrefix: 'licl-',
+      transform: false,
     }),
   ],
   theme: {
@@ -28,23 +29,20 @@ const uno = createGenerator({
 })
 
 describe('preset-mini', () => {
-  // test('targets', async () => {
-  //   const code = presetMiniTargets.join(' ')
-  //   const { css } = await uno.generate(code)
-  //   const { css: css2 } = await uno.generate(code)
+  test('targets', async () => {
+    const code = presetMiniTargets.join(' ')
+    const { css } = await uno.generate(code)
+    const { css: css2 } = await uno.generate(code)
 
-  //   const unmatched = []
-  //   for (const i of presetMiniTargets) {
-  //     if (css.includes('\\'))
-  //       unmatched.push(i)
-  //   }
-
-  //   console.log('[ unmatched ] >', unmatched)
-
-  //   expect(unmatched).toEqual([])
-  //   expect(css).toMatchSnapshot()
-  //   expect(css).toEqual(css2)
-  // })
+    const unmatched = []
+    for (const i of presetMiniTargets) {
+      if (!css.includes(escapeSelector(i)))
+        unmatched.push(i)
+    }
+    expect(unmatched).toEqual([])
+    expect(css).toMatchSnapshot()
+    expect(css).toEqual(css2)
+  })
 
   test('utils from preset-wind should be non-targets', async () => {
     const code = presetWindTargets.join(' ')

test/preset-weapp.test.ts

@@ -1,14 +1,14 @@
 /*
  * @Author: licl
  * @Date: 2022-06-25 13:30:37
- * @LastEditTime: 2022-07-11 09:45:29
+ * @LastEditTime: 2022-07-17 17:48:45
  * @LastEditors: licl
  * @Description:
  */
 import { createGenerator } from '@unocss/core'
 import { describe, expect, test } from 'vitest'
 import presetWeapp from '../src/index'
-import { align, bg, border, borderColor, color, flex, grid, position, shadow, size, spacing, typography } from './assets/weapp'
+import { align, bg, border, borderColor, color, flex, grid, position, replaceAll, shadow, size, spacing, typography } from './assets/weapp'
 
 const uno = createGenerator({
   presets: [
@@ -98,4 +98,10 @@ describe('preset-weapp', () => {
     const { css } = await uno.generate(code)
     expect(css).toMatchSnapshot()
   })
+
+  test('replaceAll', async () => {
+    const code = replaceAll.join(' ')
+    const { css } = await uno.generate(code)
+    expect(css).toMatchSnapshot()
+  })
 })