fix(transformer-applet): should skip template literals like `bg-${col…

…or}`
unocss-applet · Sep 29, 2022 · fa7305c · fa7305c
1 parent e27f614
commit fa7305c
Show file tree

Hide file tree

Showing 14 changed files with 1,580 additions and 1,221 deletions.
diff --git a/package.json b/package.json
@@ -13,18 +13,18 @@
     "lint:fix": "nr lint --fix",
     "test": "vitest",
     "test:update": "vitest -u",
-    "play:uni:mp-weixin": "npm -C playground/uni-app run dev:mp-weixin",
+    "play:uni:mp-weixin": "pnpm dev && npm -C playground/uni-app run dev:mp-weixin",
     "build:uni:mp-weixin": "npm -C playground/uni-app run build:mp-weixin",
-    "play:uni:h5": "npm -C playground/uni-app run dev:h5",
+    "play:uni:h5": "pnpm dev && npm -C playground/uni-app run dev:h5",
     "build:uni:h5": "npm -C playground/uni-app run build:h5",
-    "play:taro:weapp": "npm -C playground/tarojs run dev:weapp",
+    "play:taro:weapp": "pnpm dev && npm -C playground/tarojs run dev:weapp",
     "build:taro:weapp": "npm -C playground/tarojs run build:weapp",
-    "play:taro:h5": "npm -C playground/tarojs run dev:h5",
+    "play:taro:h5": "pnpm dev && npm -C playground/tarojs run dev:h5",
     "build:taro:h5": "npm -C playground/tarojs run build:h5"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.27.0",
-    "@types/node": "^18.7.22",
+    "@types/node": "^18.7.23",
     "@unocss-applet/preset-applet": "workspace:*",
     "@unocss-applet/preset-rem-to-rpx": "workspace:*",
     "@unocss-applet/transformer-applet": "workspace:*",
@@ -33,11 +33,11 @@
     "eslint": "^8.24.0",
     "esno": "^0.16.3",
     "rimraf": "^3.0.2",
-    "typescript": "^4.8.3",
+    "typescript": "^4.8.4",
     "unbuild": "^0.8.11",
-    "unocss": "^0.45.23",
+    "unocss": "^0.45.26",
     "unocss-applet": "workspace:*",
-    "vite": "^3.1.3",
+    "vite": "^3.1.0",
     "vitest": "^0.23.4"
   }
 }
diff --git a/packages/preset-applet/package.json b/packages/preset-applet/package.json
@@ -54,8 +54,8 @@
     "stub": "unbuild --stub"
   },
   "dependencies": {
-    "@unocss/core": "^0.45.23",
-    "@unocss/preset-mini": "^0.45.23",
-    "@unocss/preset-wind": "^0.45.23"
+    "@unocss/core": "^0.45.26",
+    "@unocss/preset-mini": "^0.45.26",
+    "@unocss/preset-wind": "^0.45.26"
   }
 }
diff --git a/packages/preset-applet/src/process.ts b/packages/preset-applet/src/process.ts
@@ -27,8 +27,16 @@ export function unoCSSToAppletProcess(str: string) {
     str = str.replace(/\\\[/g, 'l-')
   if (str.includes('\]'))
     str = str.replace(/\\\]/g, '-r')
+    // curly
+  if (str.includes('\{'))
+    str = str.replace(/\\\{/g, 'c-')
+  if (str.includes('\}'))
+    str = str.replace(/\\\}/g, '-c')
+
   // x,x to x-comma-x
   if (str.includes('\,'))
     str = str.replace(/\\\,/g, '-comma-')
+  if (str.includes('\$'))
+    str = str.replace(/\\\$/g, '-d-')
   return str
 }
diff --git a/packages/preset-rem-to-rpx/package.json b/packages/preset-rem-to-rpx/package.json
@@ -37,6 +37,6 @@
     "stub": "unbuild --stub"
   },
   "dependencies": {
-    "@unocss/core": "^0.45.23"
+    "@unocss/core": "^0.45.26"
   }
 }
diff --git a/packages/transformer-applet/package.json b/packages/transformer-applet/package.json
@@ -35,7 +35,7 @@
     "stub": "unbuild --stub"
   },
   "dependencies": {
-    "@unocss/core": "^0.45.23"
+    "@unocss/core": "^0.45.26"
   },
   "devDependencies": {
     "magic-string": "^0.26.4"

diff --git a/packages/transformer-applet/src/index.ts b/packages/transformer-applet/src/index.ts
@@ -88,6 +88,9 @@ export default function transformerApplet(options: TransformerAppletOptions = {}
         const content = match[1]
         // split content
         if (charReg.test(content)) {
+          // skip contain ${}
+          if (content.includes('${'))
+            continue
           const replacements = await compileApplet(content, ctx, options)
           code.overwrite(start, start + match[0].length, `\`${replacements.join(' ')}\``)
         }

diff --git a/packages/transformer-attributify/package.json b/packages/transformer-attributify/package.json
@@ -35,7 +35,7 @@
     "stub": "unbuild --stub"
   },
   "dependencies": {
-    "@unocss/core": "^0.45.23"
+    "@unocss/core": "^0.45.26"
   },
   "devDependencies": {
     "magic-string": "^0.26.4"

diff --git a/playground/tarojs/package.json b/playground/tarojs/package.json
@@ -35,7 +35,7 @@
     "ios >= 8"
   ],
   "dependencies": {
-    "@babel/runtime": "^7.7.7",
+    "@babel/runtime": "^7.19.0",
     "@tarojs/components": "3.5.6",
     "@tarojs/helper": "3.5.6",
     "@tarojs/plugin-framework-vue3": "3.5.6",
@@ -51,21 +51,21 @@
     "@tarojs/shared": "3.5.6",
     "@tarojs/taro": "3.5.6",
     "@tarojs/taro-h5": "3.5.6",
-    "vue": "^3.0.0"
+    "vue": "^3.2.40"
   },
   "devDependencies": {
-    "@babel/core": "^7.8.0",
+    "@babel/core": "^7.19.3",
     "@tarojs/cli": "3.5.6",
     "@tarojs/webpack5-runner": "3.5.6",
-    "@types/webpack-env": "^1.13.6",
-    "@unocss/webpack": "^0.45.22",
-    "@vue/babel-plugin-jsx": "^1.0.6",
-    "@vue/compiler-sfc": "^3.0.0",
+    "@types/webpack-env": "^1.18.0",
+    "@unocss/webpack": "^0.45.26",
+    "@vue/babel-plugin-jsx": "^1.1.1",
+    "@vue/compiler-sfc": "^3.2.40",
     "babel-preset-taro": "3.5.6",
-    "css-loader": "3.4.2",
-    "style-loader": "1.3.0",
-    "typescript": "^4.1.0",
-    "vue-loader": "^16.0.0-beta.8",
-    "webpack": "5.69.0"
+    "css-loader": "6.7.1",
+    "style-loader": "3.3.1",
+    "typescript": "^4.8.4",
+    "vue-loader": "^17.0.0",
+    "webpack": "5.74.0"
   }
 }
diff --git a/playground/uni-app/package.json b/playground/uni-app/package.json
@@ -32,28 +32,28 @@
     "build:quickapp-webview-union": "uni build -p quickapp-webview-union"
   },
   "dependencies": {
-    "@dcloudio/uni-app": "3.0.0-alpha-3060320220919001",
-    "@dcloudio/uni-app-plus": "3.0.0-alpha-3060320220919001",
-    "@dcloudio/uni-components": "3.0.0-alpha-3060320220919001",
-    "@dcloudio/uni-h5": "3.0.0-alpha-3060320220919001",
-    "@dcloudio/uni-mp-alipay": "3.0.0-alpha-3060320220919001",
-    "@dcloudio/uni-mp-baidu": "3.0.0-alpha-3060320220919001",
-    "@dcloudio/uni-mp-kuaishou": "3.0.0-alpha-3060320220919001",
-    "@dcloudio/uni-mp-lark": "3.0.0-alpha-3060320220919001",
-    "@dcloudio/uni-mp-qq": "3.0.0-alpha-3060320220919001",
-    "@dcloudio/uni-mp-toutiao": "3.0.0-alpha-3060320220919001",
-    "@dcloudio/uni-mp-weixin": "3.0.0-alpha-3060320220919001",
-    "@dcloudio/uni-quickapp-webview": "3.0.0-alpha-3060320220919001",
-    "@dcloudio/uni-ui": "^1.4.22",
-    "vue": "^3.2.39",
+    "@dcloudio/uni-app": "3.0.0-alpha-3060420220922004",
+    "@dcloudio/uni-app-plus": "3.0.0-alpha-3060420220922004",
+    "@dcloudio/uni-components": "3.0.0-alpha-3060420220922004",
+    "@dcloudio/uni-h5": "3.0.0-alpha-3060420220922004",
+    "@dcloudio/uni-mp-alipay": "3.0.0-alpha-3060420220922004",
+    "@dcloudio/uni-mp-baidu": "3.0.0-alpha-3060420220922004",
+    "@dcloudio/uni-mp-kuaishou": "3.0.0-alpha-3060420220922004",
+    "@dcloudio/uni-mp-lark": "3.0.0-alpha-3060420220922004",
+    "@dcloudio/uni-mp-qq": "3.0.0-alpha-3060420220922004",
+    "@dcloudio/uni-mp-toutiao": "3.0.0-alpha-3060420220922004",
+    "@dcloudio/uni-mp-weixin": "3.0.0-alpha-3060420220922004",
+    "@dcloudio/uni-quickapp-webview": "3.0.0-alpha-3060420220922004",
+    "vue": "^3.2.40",
     "vue-i18n": "^9.2.2"
   },
   "devDependencies": {
     "@dcloudio/types": "^3.0.15",
-    "@dcloudio/uni-automator": "3.0.0-alpha-3060320220919001",
-    "@dcloudio/uni-cli-shared": "3.0.0-alpha-3060320220919001",
-    "@dcloudio/vite-plugin-uni": "3.0.0-alpha-3060320220919001",
+    "@dcloudio/uni-automator": "3.0.0-alpha-3060420220922006",
+    "@dcloudio/uni-cli-shared": "3.0.0-alpha-3060420220922006",
+    "@dcloudio/vite-plugin-uni": "3.0.0-alpha-3060420220922006",
     "@iconify-json/carbon": "^1.1.8",
-    "sass": "^1.54.9"
+    "postcss": "^8.4.16",
+    "sass": "^1.55.0"
   }
 }
diff --git a/playground/uni-app/src/components/AButton/AButton.vue b/playground/uni-app/src/components/AButton/AButton.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface AButtonProps {
+  cc?: string
+  type?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info'
+  size?: 'xs' | 'sm' | 'md' | 'lg'
+  loading?: boolean
+  disabled?: boolean
+  icon?: string
+}
+
+const props = withDefaults(defineProps<AButtonProps>(), {
+  type: 'primary',
+  size: 'xs',
+  loading: false,
+  disabled: false,
+  icon: '',
+})
+
+const isDisabled = computed(() => props.loading || props.disabled)
+</script>
+
+<template>
+  <button class="a-button-base" :class="[cc, `bg-${props.type}`]" hover-class="a-button-hover">
+    <div v-if="icon" :class="icon" />
+    <slot />
+  </button>
+</template>
+
+<style scoped>
+
+</style>
+
diff --git a/playground/uni-app/src/pages/index/index.vue b/playground/uni-app/src/pages/index/index.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue'
+import AButton from '../../components/AButton/AButton.vue'
 const bg = 'bg-[hsl(2.7,81.9%,69.6%)]'
 const bgIgnore = 'applet-ignore: bg-[hsl(2.7,81.9%,69.6%)]'
 const index = 1
@@ -9,22 +10,22 @@ const bool = ref<boolean>()
 
 <template>
   <div class="text-center aaa" p="4">
-    <div text="4xl" class="rotate-180 i-carbon-campsite" :class="bg" @click="bool = !bool" />
+    <div text="4xl" class="rotate-180 i-carbon-campsite" :class="bg" />
     <div class="border bg-blue-200 font-(light mono) ">
       <div class="hover:(!bg-gray-600 text-red font-bold)" text="#fff">
         {{ 'applet-ignore: hover:(!bg-gray-600 text-red font-bold)' }}
       </div>
     </div>
-    <div b="~" :class="`p-2.5 ${bool ? '!p-0.5' : ''}`" m-2 :hover-class="['!bg-green']">
+    <div :class="`p-2.5 ${bool ? 'p-0.5' : ''}`" m-2 :hover-class="['!bg-green']">
       class="hover:bg-green"
     </div>
-    <div flex="~ col gap-1" class="p-1" items-center :class="bool ? 'text-yellow-500 underline' : ''">
+    <div flex="~ col gap-1" class="p-1" items-center :class="bool ? 'text-yellow-500 px-2.5' : ''">
       <div i-carbon-campsite inline-block color="blue" text="xl !red" />
       <div bg="green-(!200 800)">
         {{ `index${index + 1}` }}{{ `index` }}
       </div>
     </div>
-    <div flex="~ col" b="~ green dark:(red 2)">
+    <div flex="~ col" b="~ green dark:(red 2)" :class="`bg-${bgIgnore}`">
       <div text-right h-10 flex="1" text="red" :class="{ 'text-sm': index > 0 }">
         0123456789
       </div>
@@ -42,5 +43,10 @@ const bool = ref<boolean>()
     <div class="m-0.5 p-1 text-2xl" :class="bool ? '' : 'text-yellow-500 p-2.5'">
       abckefghijklmnopqrstuvwxyz
     </div>
+    <AButton>primary</AButton>
+    <AButton type="success">
+      success
+    </AButton>
   </div>
 </template>
+
diff --git a/playground/uni-app/unocss.config.ts b/playground/uni-app/unocss.config.ts
@@ -16,6 +16,19 @@ import {
 const isH5 = process.env.UNI_PLATFORM === 'h5'
 
 export default defineConfig({
+  theme: {
+    colors: {
+      primary: '#a855f7',
+      secondary: '#1ABCFE',
+      success: '#0ACF83',
+      warning: '#FF9F43',
+      error: '#FF5C5C',
+      info: '#373e47',
+    },
+  },
+  safelist: [
+    ...['primary', 'secondary', 'success', 'warning', 'error', 'info'].map(c => `bg-${c}`),
+  ],
   presets: [
     presetIcons({
       scale: 1.2,
@@ -40,4 +53,5 @@ export default defineConfig({
     transformerAttributify(),
     transformerApplet(),
   ],
+
 })