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

fix #1759

packages/runtime-dom/__tests__/patchStyle.spec.ts

@@ -74,6 +74,7 @@ describe(`runtime-dom: style patching`, () => {
     const store: any = {}
     return {
       style: {
+        display: '',
         WebkitTransition: '',
         setProperty(key: string, val: string) {
           store[key] = val
@@ -96,4 +97,15 @@ describe(`runtime-dom: style patching`, () => {
     patchProp(el as any, 'style', {}, { transition: 'all 1s' })
     expect(el.style.WebkitTransition).toBe('all 1s')
   })
+
+  it('multiple values', () => {
+    const el = mockElementWithStyle()
+    patchProp(
+      el as any,
+      'style',
+      {},
+      { display: ['-webkit-box', '-ms-flexbox', 'flex'] }
+    )
+    expect(el.style.display).toBe('flex')
+  })
 })

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,7 +27,14 @@ export function patchStyle(el: Element, prev: Style, next: Style) {
 
 const importantRE = /\s*!important$/
 
-function setStyle(style: CSSStyleDeclaration, name: string, val: string) {
+function setStyle(
+  style: CSSStyleDeclaration,
+  name: string,
+  val: string | string[]
+) {
+  if (isArray(val)) {
+    val.forEach(v => setStyle(style, name, v))
+  } else {
     if (name.startsWith('--')) {
       // custom property definition
       style.setProperty(name, val)
@@ -45,6 +52,7 @@ function setStyle(style: CSSStyleDeclaration, name: string, val: string) {
       }
     }
   }
+}
 
 const prefixes = ['Webkit', 'Moz', 'ms']
 const prefixCache: Record<string, string> = {}