refactor(runtime-vapor): setStyle reuse from runtime-dom

packages/runtime-dom/src/modules/style.ts

@@ -1,14 +1,13 @@
-import { capitalize, hyphenate, isArray, isString } from '@vue/shared'
-import { camelize, warn } from '@vue/runtime-core'
+import { isString } from '@vue/shared'
+import { warn } from '@vue/runtime-core'
+import { type Style, setStyle } from '@vue/runtime-shared'
 import {
   type VShowElement,
   vShowHidden,
   vShowOriginalDisplay,
 } from '../directives/vShow'
 import { CSS_VAR_TEXT } from '../helpers/useCssVars'
 
-type Style = string | Record<string, string | string[]> | null
-
 const displayRE = /(^|;)\s*display\s*:/
 
 export function patchStyle(el: Element, prev: Style, next: Style): void {
@@ -20,14 +19,14 @@ export function patchStyle(el: Element, prev: Style, next: Style): void {
       if (!isString(prev)) {
         for (const key in prev) {
           if (next[key] == null) {
-            setStyle(style, key, '')
+            setStyle(style, key, '', warn)
           }
         }
       } else {
         for (const prevStyle of prev.split(';')) {
           const key = prevStyle.slice(0, prevStyle.indexOf(':')).trim()
           if (next[key] == null) {
-            setStyle(style, key, '')
+            setStyle(style, key, '', warn)
           }
         }
       }
@@ -36,7 +35,7 @@ export function patchStyle(el: Element, prev: Style, next: Style): void {
       if (key === 'display') {
         hasControlledDisplay = true
       }
-      setStyle(style, key, next[key])
+      setStyle(style, key, next[key], warn)
     }
   } else {
     if (isCssString) {
@@ -63,63 +62,3 @@ export function patchStyle(el: Element, prev: Style, next: Style): void {
     }
   }
 }
-
-const semicolonRE = /[^\\];\s*$/
-const importantRE = /\s*!important$/
-
-function setStyle(
-  style: CSSStyleDeclaration,
-  name: string,
-  val: string | string[],
-) {
-  if (isArray(val)) {
-    val.forEach(v => setStyle(style, name, v))
-  } else {
-    if (val == null) val = ''
-    if (__DEV__) {
-      if (semicolonRE.test(val)) {
-        warn(
-          `Unexpected semicolon at the end of '${name}' style value: '${val}'`,
-        )
-      }
-    }
-    if (name.startsWith('--')) {
-      // custom property definition
-      style.setProperty(name, val)
-    } else {
-      const prefixed = autoPrefix(style, name)
-      if (importantRE.test(val)) {
-        // !important
-        style.setProperty(
-          hyphenate(prefixed),
-          val.replace(importantRE, ''),
-          'important',
-        )
-      } else {
-        style[prefixed as any] = val
-      }
-    }
-  }
-}
-
-const prefixes = ['Webkit', 'Moz', 'ms']
-const prefixCache: Record<string, string> = {}
-
-function autoPrefix(style: CSSStyleDeclaration, rawName: string): string {
-  const cached = prefixCache[rawName]
-  if (cached) {
-    return cached
-  }
-  let name = camelize(rawName)
-  if (name !== 'filter' && name in style) {
-    return (prefixCache[rawName] = name)
-  }
-  name = capitalize(name)
-  for (let i = 0; i < prefixes.length; i++) {
-    const prefixed = prefixes[i] + name
-    if (prefixed in style) {
-      return (prefixCache[rawName] = prefixed)
-    }
-  }
-  return rawName
-}

packages/runtime-shared/src/index.ts

@@ -1,2 +1,3 @@
 export { toHandlers } from './toHandlers'
 export { type Data } from './typeUtils'
+export { type Style, setStyle } from './style'

packages/runtime-shared/src/style.ts

@@ -0,0 +1,64 @@
+import { camelize, capitalize, hyphenate, isArray } from '@vue/shared'
+
+export type Style = string | Record<string, string | string[]> | null
+
+const semicolonRE = /[^\\];\s*$/
+const importantRE = /\s*!important$/
+
+export function setStyle(
+  style: CSSStyleDeclaration,
+  name: string,
+  val: string | string[],
+  warn: (msg: string, ...args: any[]) => void,
+): void {
+  if (isArray(val)) {
+    val.forEach(v => setStyle(style, name, v, warn))
+  } else {
+    if (val == null) val = ''
+    if (__DEV__) {
+      if (semicolonRE.test(val)) {
+        warn(
+          `Unexpected semicolon at the end of '${name}' style value: '${val}'`,
+        )
+      }
+    }
+    if (name.startsWith('--')) {
+      // custom property definition
+      style.setProperty(name, val)
+    } else {
+      const prefixed = autoPrefix(style, name)
+      if (importantRE.test(val)) {
+        // !important
+        style.setProperty(
+          hyphenate(prefixed),
+          val.replace(importantRE, ''),
+          'important',
+        )
+      } else {
+        style[prefixed as any] = val
+      }
+    }
+  }
+}
+
+const prefixes = ['Webkit', 'Moz', 'ms']
+const prefixCache: Record<string, string> = {}
+
+function autoPrefix(style: CSSStyleDeclaration, rawName: string): string {
+  const cached = prefixCache[rawName]
+  if (cached) {
+    return cached
+  }
+  let name = camelize(rawName)
+  if (name !== 'filter' && name in style) {
+    return (prefixCache[rawName] = name)
+  }
+  name = capitalize(name)
+  for (let i = 0; i < prefixes.length; i++) {
+    const prefixed = prefixes[i] + name
+    if (prefixed in style) {
+      return (prefixCache[rawName] = prefixed)
+    }
+  }
+  return rawName
+}

packages/runtime-vapor/src/dom/style.ts

@@ -1,11 +1,5 @@
-import {
-  camelize,
-  capitalize,
-  hyphenate,
-  isArray,
-  isString,
-  normalizeStyle,
-} from '@vue/shared'
+import { isString, normalizeStyle } from '@vue/shared'
+import { type Style, setStyle as setStyleValue } from '@vue/runtime-shared'
 import { warn } from '../warning'
 import { recordPropMetadata } from '../componentMetadata'
 import { mergeInheritAttr } from './prop'
@@ -19,24 +13,20 @@ export function setStyle(el: HTMLElement, value: any, root?: boolean): void {
   patchStyle(el, prev, value)
 }
 
-// TODO copied from packages/runtime-dom/src/modules/style.ts
-
-type Style = string | Record<string, string | string[]> | null
-
 function patchStyle(el: Element, prev: Style, next: Style) {
   const style = (el as HTMLElement).style
   const isCssString = isString(next)
   if (next && !isCssString) {
     if (prev && !isString(prev)) {
       for (const key in prev) {
         if (next[key] == null) {
-          setStyleValue(style, key, '')
+          setStyleValue(style, key, '', warn)
         }
       }
     }
 
     for (const key in next) {
-      setStyleValue(style, key, next[key])
+      setStyleValue(style, key, next[key], warn)
     }
   } else {
     if (isCssString) {
@@ -49,63 +39,3 @@ function patchStyle(el: Element, prev: Style, next: Style) {
     }
   }
 }
-
-const semicolonRE = /[^\\];\s*$/
-const importantRE = /\s*!important$/
-
-function setStyleValue(
-  style: CSSStyleDeclaration,
-  name: string,
-  val: string | string[],
-) {
-  if (isArray(val)) {
-    val.forEach(v => setStyleValue(style, name, v))
-  } else {
-    if (val == null) val = ''
-    if (__DEV__) {
-      if (semicolonRE.test(val)) {
-        warn(
-          `Unexpected semicolon at the end of '${name}' style value: '${val}'`,
-        )
-      }
-    }
-    if (name.startsWith('--')) {
-      // custom property definition
-      style.setProperty(name, val)
-    } else {
-      const prefixed = autoPrefix(style, name)
-      if (importantRE.test(val)) {
-        // !important
-        style.setProperty(
-          hyphenate(prefixed),
-          val.replace(importantRE, ''),
-          'important',
-        )
-      } else {
-        style[prefixed as any] = val
-      }
-    }
-  }
-}
-
-const prefixes = ['Webkit', 'Moz', 'ms']
-const prefixCache: Record<string, string> = {}
-
-function autoPrefix(style: CSSStyleDeclaration, rawName: string): string {
-  const cached = prefixCache[rawName]
-  if (cached) {
-    return cached
-  }
-  let name = camelize(rawName)
-  if (name !== 'filter' && name in style) {
-    return (prefixCache[rawName] = name)
-  }
-  name = capitalize(name)
-  for (let i = 0; i < prefixes.length; i++) {
-    const prefixed = prefixes[i] + name
-    if (prefixed in style) {
-      return (prefixCache[rawName] = prefixed)
-    }
-  }
-  return rawName
-}