feat: dom-2中transition-delay的支持

Author: schizobulia

packages/uni-nvue-styler/__tests__/dom2/static/__snapshots__/transition.spec.ts.snap

@@ -12,7 +12,12 @@ exports[`transition-delay: 0.5s: app-harmony(nv-c) 1`] = `
 {
   "code": undefined,
   "messages": [],
-  "obj": {},
+  "obj": {
+    "transition-delay": {
+      "setterCode": "transitionDelay(500.0)",
+      "valueCode": "500.0",
+    },
+  },
 }
 `;
 
@@ -28,6 +33,57 @@ exports[`transition-delay: 0s: app-harmony(nv-c) 1`] = `
 {
   "code": undefined,
   "messages": [],
+  "obj": {
+    "transition-delay": {
+      "setterCode": "transitionDelay(0.0)",
+      "valueCode": "0.0",
+    },
+  },
+}
+`;
+
+exports[`transition-delay: 2s, 4ms: app-harmony(dom-c) 1`] = `
+{
+  "code": undefined,
+  "messages": [
+    Warning {
+      "node": CustomDeclaration {
+        "__originalProp": "transition-delay",
+        "important": false,
+        "prop": "transitionDelay",
+        "remove": [Function],
+        "replaceWith": [Function],
+        "value": "2s, 4ms",
+        Symbol(expanded): true,
+        Symbol(normalized): true,
+      },
+      "text": "ERROR: property value \`2s, 4ms\` is not supported for \`transition-delay\` (supported values are: \`number of seconds\`|\`milliseconds\`)",
+      "type": "warning",
+    },
+  ],
+  "obj": {},
+}
+`;
+
+exports[`transition-delay: 2s, 4ms: app-harmony(nv-c) 1`] = `
+{
+  "code": undefined,
+  "messages": [
+    Warning {
+      "node": CustomDeclaration {
+        "__originalProp": "transition-delay",
+        "important": false,
+        "prop": "transitionDelay",
+        "remove": [Function],
+        "replaceWith": [Function],
+        "value": "2s, 4ms",
+        Symbol(expanded): true,
+        Symbol(normalized): true,
+      },
+      "text": "ERROR: property value \`2s, 4ms\` is not supported for \`transition-delay\` (supported values are: \`number of seconds\`|\`milliseconds\`)",
+      "type": "warning",
+    },
+  ],
   "obj": {},
 }
 `;
@@ -44,7 +100,12 @@ exports[`transition-delay: 200ms: app-harmony(nv-c) 1`] = `
 {
   "code": undefined,
   "messages": [],
-  "obj": {},
+  "obj": {
+    "transition-delay": {
+      "setterCode": "transitionDelay(200.0)",
+      "valueCode": "200.0",
+    },
+  },
 }
 `;
 

packages/uni-nvue-styler/__tests__/dom2/static/transition.spec.ts

@@ -2,7 +2,7 @@ import { parseDom2StaticStyle } from '../../../src/dom2'
 import { TEST_OPTIONS_LIST } from '../utils'
 
 describe('transition-delay:', () => {
-  ;['0s', '0.5s', '200ms'].forEach((value) => {
+  ;['0s', '0.5s', '200ms', '2s, 4ms'].forEach((value) => {
     test(value, () => {
       const input = `transition-delay: ${value}`
       TEST_OPTIONS_LIST.forEach((options) => {

packages/uni-nvue-styler/lib/dom2/app-css.json

@@ -849,6 +849,7 @@
     }
   },
   "transition-delay": {
+    "type": ["UniNativeTransitionDelay", "UniNativeTransitionDelays"],
     "uniPlatform": {
       "app": {
         "nv-c": {

packages/uni-nvue-styler/src/dom2/processors/index.ts

@@ -48,6 +48,10 @@ import {
   createSetStyleBackgroundImageValueProcessor,
   isBackgroundImageType,
 } from './backgroundImage'
+import {
+  createSetStyleTransitionValueProcessor,
+  isTransitionType,
+} from './transition'
 
 export type { PropertyProcessor } from './utils'
 export { createSetStyleNativeColorValueProcessor } from './color'
@@ -172,6 +176,12 @@ export function createDom2PropertyProcessors(
       return createSetStyleTransformOriginValueProcessor(setter, language)
     } else if (isBackgroundImageType(propertyType)) {
       return createSetStyleBackgroundImageValueProcessor(setter, language)
+    } else if (isTransitionType(propertyType)) {
+      return createSetStyleTransitionValueProcessor(
+        setter,
+        language,
+        propertyType
+      )
     } else if (propertyType) {
       return createSetStyleEnumValueProcessor(
         setter,

packages/uni-nvue-styler/src/dom2/processors/transition.ts

@@ -0,0 +1,46 @@
+import type { DOM2_APP_LANGUAGE } from '../types'
+import {
+  type PropertyProcessor,
+  PropertyProcessorType,
+  createPropertyProcessor,
+  createValueProcessorError,
+  createValueProcessorResult,
+  normalizeDurationToMilliseconds,
+} from './utils'
+
+const UNINATIVETRANSITIONDELAY_TYPES = [
+  'UniNativeTransitionDelay',
+  'UniNativeTransitionDelays',
+]
+
+export function isTransitionType(propertyType?: string) {
+  return propertyType && UNINATIVETRANSITIONDELAY_TYPES.includes(propertyType)
+}
+
+export function createSetStyleTransitionValueProcessor(
+  setter: string,
+  language: DOM2_APP_LANGUAGE,
+  propertyType: string
+): PropertyProcessor {
+  return createPropertyProcessor((value: string | number, propertyName) => {
+    let code = ''
+    if (UNINATIVETRANSITIONDELAY_TYPES.includes(propertyType)) {
+      code = parseTransitionDurationValue(String(value), language)
+    }
+    if (!code) {
+      return createValueProcessorError(value, propertyName)
+    }
+    return createValueProcessorResult(code, `${setter}(${code})`)
+  }, PropertyProcessorType.Struct)
+}
+
+function parseTransitionDurationValue(
+  str: string,
+  language: DOM2_APP_LANGUAGE
+): string {
+  const normalized = normalizeDurationToMilliseconds(str)
+  if (normalized === null) {
+    return '0.0'
+  }
+  return normalized
+}

packages/uni-nvue-styler/src/dom2/processors/utils.ts

@@ -117,3 +117,27 @@ export function getTargetConfig(
 
   return platformConfig[target] || null
 }
+
+export function normalizeDurationToMilliseconds(
+  enumValue: string
+): string | null {
+  const match = /^(-?\d*\.?\d+)(ms|s)$/i.exec(enumValue.trim())
+  if (!match) {
+    return null
+  }
+  const numericPart = parseFloat(match[1])
+  if (Number.isNaN(numericPart)) {
+    return null
+  }
+  const unit = match[2].toLowerCase()
+  const milliseconds = unit === 's' ? numericPart * 1000 : numericPart
+  if (!Number.isFinite(milliseconds)) {
+    return null
+  }
+  return formatFloatLiteral(milliseconds)
+}
+
+function formatFloatLiteral(value: number): string {
+  const str = value.toString()
+  return str.includes('.') ? str : `${str}.0`
+}