feat(uvue): 简易支持 --window-top、--window-bottom、--status-bar-height

packages/uni-nvue-styler/__tests__/__snapshots__/uvue.spec.ts.snap

@@ -2,14 +2,18 @@
 
 exports[`uvue-style chunk 1`] = `"[new Map<string, Map<string, Map<string, any>>>([["content", new Map<string, any>([["", new Map<string, any>([["display", "flex"]])]])], ["logo", new Map<string, any>([[".content ", new Map<string, any>([["width", "200rpx"], ["height", "200rpx"]])]])]]),new Map<string, Map<string, Map<string, any>>>([["text-area", new Map<string, any>([["", new Map<string, any>([["fontSize", "36rpx"]])]])], ["title", new Map<string, any>([["", new Map<string, any>([["fontSize", "36rpx"]])]])]])]"`;
 
-exports[`uvue-style chunk font-face 1`] = `"[new Map<string, Map<string, Map<string, any>>>([["content", new Map<string, any>([["", new Map<string, any>([["display", "flex"]])]])], ["logo", new Map<string, any>([[".content ", new Map<string, any>([["width", "200rpx"], ["height", "200rpx"]])]])]]),new Map<string, Map<string, Map<string, any>>>([["text-area", new Map<string, any>([["", new Map<string, any>([["fontSize", "36rpx"], ["transitionProperty", "marginTop"], ["transitionDuration", 300]])]])], ["title", new Map<string, any>([["", new Map<string, any>([["fontSize", "36rpx"], ["transitionProperty", "marginTop"], ["transitionDuration", 300]])]])]]),new Map<string, Map<string, Map<string, any>>>([["@FONT-FACE", new Map<string, any>([["0", new Map<string, any>([["fontFamily", "font-family-name-1"], ["src", "url(\\"font file url 1-1\\") format(\\"truetype\\")"]])]])], ["@TRANSITION", new Map<string, any>([["text-area", new Map<string, any>([["property", "marginTop"], ["duration", 300]])], ["title", new Map<string, any>([["property", "marginTop"], ["duration", 300]])]])]])]"`;
+exports[`uvue-style chunk font-face 1`] = `"[new Map<string, Map<string, Map<string, any>>>([["content", new Map<string, any>([["", new Map<string, any>([["display", "flex"]])]])], ["logo", new Map<string, any>([[".content ", new Map<string, any>([["width", "200rpx"], ["height", "200rpx"]])]])]]),new Map<string, Map<string, Map<string, any>>>([["text-area", new Map<string, any>([["", new Map<string, any>([["fontSize", "36rpx"], ["transitionProperty", "margin-top"], ["transitionDuration", "300ms"]])]])], ["title", new Map<string, any>([["", new Map<string, any>([["fontSize", "36rpx"], ["transitionProperty", "margin-top"], ["transitionDuration", "300ms"]])]])]]),new Map<string, Map<string, Map<string, any>>>([["@FONT-FACE", new Map<string, any>([["0", new Map<string, any>([["fontFamily", "font-family-name-1"], ["src", "url(\\"font file url 1-1\\") format(\\"truetype\\")"]])]])], ["@TRANSITION", new Map<string, any>([["text-area", new Map<string, any>([["property", "margin-top"], ["duration", "300ms"]])], ["title", new Map<string, any>([["property", "margin-top"], ["duration", "300ms"]])]])]])]"`;
 
-exports[`uvue-style chunk font-face with mapOf 1`] = `"[utsMapOf([["content", utsMapOf([["", utsMapOf([["display", "flex"]])]])], ["logo", utsMapOf([[".content ", utsMapOf([["width", "200rpx"], ["height", "200rpx"]])]])]]),utsMapOf([["text-area", utsMapOf([["", utsMapOf([["fontSize", "36rpx"], ["transitionProperty", "marginTop"], ["transitionDuration", 300]])]])], ["title", utsMapOf([["", utsMapOf([["fontSize", "36rpx"], ["transitionProperty", "marginTop"], ["transitionDuration", 300]])]])]]),utsMapOf([["@FONT-FACE", utsMapOf([["0", utsMapOf([["fontFamily", "font-family-name-1"], ["src", "url(\\"font file url 1-1\\") format(\\"truetype\\")"]])]])], ["@TRANSITION", utsMapOf([["text-area", utsMapOf([["property", "marginTop"], ["duration", 300]])], ["title", utsMapOf([["property", "marginTop"], ["duration", 300]])]])]])]"`;
+exports[`uvue-style chunk font-face with mapOf 1`] = `"[utsMapOf([["content", utsMapOf([["", utsMapOf([["display", "flex"]])]])], ["logo", utsMapOf([[".content ", utsMapOf([["width", "200rpx"], ["height", "200rpx"]])]])]]),utsMapOf([["text-area", utsMapOf([["", utsMapOf([["fontSize", "36rpx"], ["transitionProperty", "margin-top"], ["transitionDuration", "300ms"]])]])], ["title", utsMapOf([["", utsMapOf([["fontSize", "36rpx"], ["transitionProperty", "margin-top"], ["transitionDuration", "300ms"]])]])]]),utsMapOf([["@FONT-FACE", utsMapOf([["0", utsMapOf([["fontFamily", "font-family-name-1"], ["src", "url(\\"font file url 1-1\\") format(\\"truetype\\")"]])]])], ["@TRANSITION", utsMapOf([["text-area", utsMapOf([["property", "margin-top"], ["duration", "300ms"]])], ["title", utsMapOf([["property", "margin-top"], ["duration", "300ms"]])]])]])]"`;
 
-exports[`uvue-style chunk font-face with mapOf and trim 1`] = `"[utsMapOf([["content", padStyleMapOf(utsMapOf([["display", "flex"]]))], ["logo", utsMapOf([[".content ", utsMapOf([["width", "200rpx"], ["height", "200rpx"]])]])]]),utsMapOf([["text-area", padStyleMapOf(utsMapOf([["fontSize", "36rpx"], ["transitionProperty", "marginTop"], ["transitionDuration", 300]]))], ["title", padStyleMapOf(utsMapOf([["fontSize", "36rpx"], ["transitionProperty", "marginTop"], ["transitionDuration", 300]]))]]),utsMapOf([["@FONT-FACE", utsMapOf([["0", utsMapOf([["fontFamily", "font-family-name-1"], ["src", "url(\\"font file url 1-1\\") format(\\"truetype\\")"]])]])], ["@TRANSITION", utsMapOf([["text-area", utsMapOf([["property", "marginTop"], ["duration", 300]])], ["title", utsMapOf([["property", "marginTop"], ["duration", 300]])]])]])]"`;
+exports[`uvue-style chunk font-face with mapOf and trim 1`] = `"[utsMapOf([["content", padStyleMapOf(utsMapOf([["display", "flex"]]))], ["logo", utsMapOf([[".content ", utsMapOf([["width", "200rpx"], ["height", "200rpx"]])]])]]),utsMapOf([["text-area", padStyleMapOf(utsMapOf([["fontSize", "36rpx"], ["transitionProperty", "margin-top"], ["transitionDuration", "300ms"]]))], ["title", padStyleMapOf(utsMapOf([["fontSize", "36rpx"], ["transitionProperty", "margin-top"], ["transitionDuration", "300ms"]]))]]),utsMapOf([["@FONT-FACE", utsMapOf([["0", utsMapOf([["fontFamily", "font-family-name-1"], ["src", "url(\\"font file url 1-1\\") format(\\"truetype\\")"]])]])], ["@TRANSITION", utsMapOf([["text-area", utsMapOf([["property", "margin-top"], ["duration", "300ms"]])], ["title", utsMapOf([["property", "margin-top"], ["duration", "300ms"]])]])]])]"`;
 
 exports[`uvue-style chunk with mapOf 1`] = `"[utsMapOf([["content", utsMapOf([["", utsMapOf([["display", "flex"]])]])], ["logo", utsMapOf([[".content ", utsMapOf([["width", "200rpx"], ["height", "200rpx"]])]])]]),utsMapOf([["text-area", utsMapOf([["", utsMapOf([["fontSize", "36rpx"]])]])], ["title", utsMapOf([["", utsMapOf([["fontSize", "36rpx"]])]])]])]"`;
 
+exports[`uvue-style css calc 1`] = `"new Map<string, Map<string, Map<string, any>>>([["content", new Map<string, any>([["", new Map<string, any>([["top", calc(CSS_VAR_WINDOW_TOP + 10px)], ["bottom", calc(10px - CSS_VAR_WINDOW_BOTTOM)], ["height", calc(CSS_VAR_STATUS_BAR_HEIGHT * 2)]])]])]])"`;
+
+exports[`uvue-style css var 1`] = `"new Map<string, Map<string, Map<string, any>>>([["content", new Map<string, any>([["", new Map<string, any>([["top", CSS_VAR_WINDOW_TOP], ["bottom", CSS_VAR_WINDOW_BOTTOM], ["height", CSS_VAR_STATUS_BAR_HEIGHT]])]])]])"`;
+
 exports[`uvue-style js 1`] = `"new Map([["content", new Map([["", new Map([["display", "flex"]])]])], ["logo", new Map([[".content ", new Map([["width", "200rpx"], ["height", "200rpx"]])]])], ["text-area", new Map([["", new Map([["fontSize", "36rpx"]])]])], ["title", new Map([["", new Map([["fontSize", "36rpx"]])]])]])"`;
 
 exports[`uvue-style ts 1`] = `"new Map<string, Map<string, Map<string, any>>>([["content", new Map<string, any>([["", new Map<string, any>([["display", "flex"]])]])], ["logo", new Map<string, any>([[".content ", new Map<string, any>([["width", "200rpx"], ["height", "200rpx"]])]])], ["text-area", new Map<string, any>([["", new Map<string, any>([["fontSize", "36rpx"]])]])], ["title", new Map<string, any>([["", new Map<string, any>([["fontSize", "36rpx"]])]])]])"`;

packages/uni-nvue-styler/__tests__/uvue.spec.ts

@@ -14,7 +14,7 @@ describe('uvue-style', () => {
             font-size: 36rpx;
         }
         `,
-      { map: true }
+      { type: 'uvue', map: true }
     )
     expect(code).toMatchSnapshot()
   })
@@ -32,7 +32,7 @@ describe('uvue-style', () => {
             font-size: 36rpx;
         }
         `,
-      { map: true, ts: true }
+      { type: 'uvue', map: true, ts: true }
     )
     expect(code).toMatchSnapshot()
   })
@@ -50,7 +50,7 @@ describe('uvue-style', () => {
             font-size: 36rpx;
         }
         `,
-      { map: true, ts: true, chunk: 2 }
+      { type: 'uvue', map: true, ts: true, chunk: 2 }
     )
     expect(code).toMatchSnapshot()
   })
@@ -68,7 +68,7 @@ describe('uvue-style', () => {
             font-size: 36rpx;
         }
         `,
-      { mapOf: 'utsMapOf', chunk: 2 }
+      { type: 'uvue', mapOf: 'utsMapOf', chunk: 2 }
     )
     expect(code).toMatchSnapshot()
   })
@@ -92,7 +92,7 @@ describe('uvue-style', () => {
             transition-duration: 300ms;
         }
         `,
-      { map: true, ts: true, chunk: 2 }
+      { type: 'uvue', map: true, ts: true, chunk: 2 }
     )
     expect(code).toMatchSnapshot()
   })
@@ -116,7 +116,7 @@ describe('uvue-style', () => {
             transition-duration: 300ms;
         }
         `,
-      { mapOf: 'utsMapOf', chunk: 2 }
+      { type: 'uvue', mapOf: 'utsMapOf', chunk: 2 }
     )
     expect(code).toMatchSnapshot()
   })
@@ -140,8 +140,35 @@ describe('uvue-style', () => {
             transition-duration: 300ms;
         }
         `,
-      { mapOf: 'utsMapOf', chunk: 2, trim: true }
+      { type: 'uvue', mapOf: 'utsMapOf', chunk: 2, trim: true }
     )
     expect(code).toMatchSnapshot()
   })
+  test('css var', async () => {
+    const { code } = await parse(
+      `
+        .content {
+            top: var(--window-top);
+            bottom: var(--window-bottom);
+            height: var(--status-bar-height);
+        }
+        `,
+      { type: 'uvue', map: true, ts: true }
+    )
+    expect(code).toMatchSnapshot()
+  })
+  test('css calc', async () => {
+    const { code, messages } = await parse(
+      `
+        .content {
+            top: calc(var(--window-top) + 10px);
+            bottom: calc(10px - var(--window-bottom));
+            height: calc(var(--status-bar-height) * 2);
+        }
+        `,
+      { type: 'uvue', map: true, ts: true }
+    )
+    console.log(messages)
+    expect(code).toMatchSnapshot()
+  })
 })

packages/uni-nvue-styler/package.json

@@ -18,7 +18,6 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@vue/shared": "3.3.11",
     "parse-css-font": "^4.0.0",
     "postcss": "^8.4.23"
   }

packages/uni-nvue-styler/src/normalize/index.ts

-import type { Plugin, Declaration, Helpers, Rule } from 'postcss'
 import { camelize, hasOwn, isFunction, isString } from '@vue/shared'
+import type { Plugin, Declaration, Helpers, Rule } from 'postcss'
 import {
   LENGTH_REGEXP,
   SUPPORT_CSS_UNIT,
@@ -97,6 +97,15 @@ export function normalizeDecl(decl: Declaration, options: NormalizeOptions) {
   let result, log
   const normalize = getNormalizeMap(options)[name]
 
+  if (options.type === 'uvue') {
+    if (hasCssVar(value)) {
+      return {
+        value: normalizeCssVar(value),
+        log,
+      }
+    }
+  }
+
   if (isFunction(normalize)) {
     if (!isFunction(value)) {
       result = normalize(value, options, {
@@ -129,3 +138,14 @@ export function normalizeDecl(decl: Declaration, options: NormalizeOptions) {
     log,
   }
 }
+
+function hasCssVar(value: string) {
+  return value.includes('var(')
+}
+
+function normalizeCssVar(value: string) {
+  return value
+    .replaceAll(`var(--window-top)`, `CSS_VAR_WINDOW_TOP`)
+    .replaceAll(`var(--window-bottom)`, `CSS_VAR_WINDOW_BOTTOM`)
+    .replaceAll(`var(--status-bar-height)`, `CSS_VAR_STATUS_BAR_HEIGHT`)
+}

packages/uni-nvue-styler/src/normalize/length.ts

@@ -17,6 +17,10 @@ function createNormalizeLength({
 }: NormalizeLengthOptions = {}): Normalize {
   return (v, options) => {
     v = (v || '').toString()
+    // css 变量
+    if (v.includes('CSS_VAR_')) {
+      return { value: v }
+    }
     const match = v.match(LENGTH_REGEXP)
     if (match) {
       var unit = match[1]

packages/uni-nvue-styler/src/parse.ts

+import { isString } from '@vue/shared'
 import postcss, { Message } from 'postcss'
 import { objectifier } from './objectifier'
 import { expand } from './expand'
@@ -103,7 +104,11 @@ function mapToInitString(
         entries.push(`["${key}", ${mapToInitString(value, ts, false, mapOf)}]`)
       }
     } else {
-      entries.push(`["${key}", ${JSON.stringify(value)}]`)
+      entries.push(
+        `["${key}", ${
+          isString(value) && isExpr(value) ? value : JSON.stringify(value)
+        }]`
+      )
     }
   }
   if (mapOf) {
@@ -130,3 +135,8 @@ function objToMap(obj: Record<string, unknown>) {
   }
   return map
 }
+
+function isExpr(value: string) {
+  const v = value.slice(0, 5)
+  return /* CSS_VAR_ */ v === 'CSS_V' || v === 'calc('
+}

packages/uni-nvue-styler/src/shared.ts

@@ -26,3 +26,11 @@ export const camelize = cacheStringFunction((str: string): string => {
 export const capitalize = cacheStringFunction(
   (str: string) => str.charAt(0).toUpperCase() + str.slice(1)
 )
+
+const hyphenateRE = /\B([A-Z])/g
+/**
+ * @private
+ */
+export const hyphenate = cacheStringFunction((str: string) =>
+  str.replace(hyphenateRE, '-$1').toLowerCase()
+)

pnpm-lock.yaml

@@ -1316,9 +1316,6 @@ importers:
 
   packages/uni-nvue-styler:
     dependencies:
-      '@vue/shared':
-        specifier: 3.3.11
-        version: 3.3.11
       parse-css-font:
         specifier: ^4.0.0
         version: 4.0.0