fix(runtime-dom): style binding multi value support

fix #1759

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

@@ -1,7 +1,7 @@
-import { isString, hyphenate, capitalize } from '@vue/shared'
+import { isString, hyphenate, capitalize, isArray } from '@vue/shared'
 import { camelize } from '@vue/runtime-core'
 
-type Style = string | Partial<CSSStyleDeclaration> | null
+type Style = string | Record<string, string | string[]> | null
 
 export function patchStyle(el: Element, prev: Style, next: Style) {
   const style = (el as HTMLElement).style
@@ -13,7 +13,7 @@ export function patchStyle(el: Element, prev: Style, next: Style) {
     }
   } else {
     for (const key in next) {
-      setStyle(style, key, next[key] as string)
+      setStyle(style, key, next[key])
     }
     if (prev && !isString(prev)) {
       for (const key in prev) {
@@ -27,21 +27,29 @@ export function patchStyle(el: Element, prev: Style, next: Style) {
 
 const importantRE = /\s*!important$/
 
-function setStyle(style: CSSStyleDeclaration, name: string, val: string) {
-  if (name.startsWith('--')) {
-    // custom property definition
-    style.setProperty(name, val)
+function setStyle(
+  style: CSSStyleDeclaration,
+  name: string,
+  val: string | string[]
+) {
+  if (isArray(val)) {
+    val.forEach(v => setStyle(style, name, v))
   } else {
-    const prefixed = autoPrefix(style, name)
-    if (importantRE.test(val)) {
-      // !important
-      style.setProperty(
-        hyphenate(prefixed),
-        val.replace(importantRE, ''),
-        'important'
-      )
+    if (name.startsWith('--')) {
+      // custom property definition
+      style.setProperty(name, val)
     } else {
-      style[prefixed as any] = val
+      const prefixed = autoPrefix(style, name)
+      if (importantRE.test(val)) {
+        // !important
+        style.setProperty(
+          hyphenate(prefixed),
+          val.replace(importantRE, ''),
+          'important'
+        )
+      } else {
+        style[prefixed as any] = val
+      }
     }
   }
 }