feat: 添加@unocss/preset-legacy-compat解决app rgba问题

package.json

@@ -117,6 +117,7 @@
     "@uni-helper/vite-plugin-uni-manifest": "^0.2.3",
     "@uni-helper/vite-plugin-uni-pages": "^0.2.15",
     "@uni-helper/vite-plugin-uni-platform": "^0.0.4",
+    "@unocss/preset-legacy-compat": "^0.59.1",
     "@vue/runtime-core": "^3.3.13",
     "@vue/tsconfig": "^0.1.3",
     "autoprefixer": "^10.4.16",

pnpm-lock.yaml

@@ -121,6 +121,9 @@ devDependencies:
   '@uni-helper/vite-plugin-uni-platform':
     specifier: ^0.0.4
     version: 0.0.4
+  '@unocss/preset-legacy-compat':
+    specifier: ^0.59.1
+    version: 0.59.1
   '@vue/runtime-core':
     specifier: ^3.3.13
     version: 3.3.13
@@ -4301,6 +4304,10 @@ packages:
     resolution: {integrity: sha512-KhABQXGE2AgtO9vE28d+HnciuyGDcuygsnQdUwlzUuR4K05OSw2kRE9emRN4HaMycD+gA/zDbQrJxTXb6mQUiA==}
     dev: true
 
+  /@unocss/core@0.59.1:
+    resolution: {integrity: sha512-4T9eSmEhmxlYnz0xilIavROiEWvEcEtWixIQEaP4MqWabaRew6yN1ky4ALZZgaTUdS50EXGR3bYVz1vah9sfFw==}
+    dev: true
+
   /@unocss/extractor-arbitrary-variants@0.56.5:
     resolution: {integrity: sha512-p2pyzz/ONvc5CGcaB9OZvWE8qkRSgyuhaQqFQLdBFeUhveHC0CGP0iSnXwBgAFHWM7DJo4/JpWeZ+mBt0ogVLA==}
     dependencies:
@@ -4353,6 +4360,12 @@ packages:
       - supports-color
     dev: true
 
+  /@unocss/preset-legacy-compat@0.59.1:
+    resolution: {integrity: sha512-aqz+KehvubXYMoKmlMHPI79OZ1RkVQrr1v5pDlnGrRWSWY/JNdNa44Bw6cO/g8yEucf/nNe/1YqLf7jJ9tL8og==}
+    dependencies:
+      '@unocss/core': 0.59.1
+    dev: true
+
   /@unocss/preset-mini@0.56.5:
     resolution: {integrity: sha512-/KhlThhs1ilauM7MwRSpahLbIPZ5VGeGvaUsU8+ZlNT3sis4yoVYkPtR14tL2IT6jhOU05N/uu3aBj+1bP8GjQ==}
     dependencies:

uno.config.ts

@@ -15,6 +15,9 @@ import {
   transformerAttributify,
 } from 'unocss-applet'
 
+// @see https://unocss.dev/presets/legacy-compat
+import presetLegacyCompat from '@unocss/preset-legacy-compat'
+
 const isH5 = process.env?.UNI_PLATFORM === 'h5'
 const isMp = process.env?.UNI_PLATFORM?.startsWith('mp') ?? false
 
@@ -44,6 +47,12 @@ export default defineConfig({
         'vertical-align': 'middle',
       },
     }),
+    // 将颜色函数 (rgb()和hsl()) 从空格分隔转换为逗号分隔，更好的兼容性app端，example：
+    // `rgb(255 0 0)` -> `rgb(255, 0, 0)`
+    // `rgba(255 0 0 / 0.5)` -> `rgba(255, 0, 0, 0.5)`
+    presetLegacyCompat({
+      commaStyleColorFunction: true,
+    }) as Preset,
   ],
   /**
    * 自定义快捷语句