Support auto-prefixed style value as array (client/ssr) (vuejs#5460)

fnlctrl · yyx990803 · commit 38810d8fd03b · 2017-04-17T20:49:10.000+08:00
* support auto-prefixed style value as array (client/ssr)

* adjust test case
diff --git a/src/platforms/web/runtime/modules/style.js b/src/platforms/web/runtime/modules/style.js
@@ -12,7 +12,17 @@ const setProp = (el, name, val) => {
   } else if (importantRE.test(val)) {
     el.style.setProperty(name, val.replace(importantRE, ''), 'important')
   } else {
-    el.style[normalize(name)] = val
+    const normalizedName = normalize(name)
+    if (Array.isArray(val)) {
+      // Support values array created by autoprefixer, e.g.
+      // {display: ["-webkit-box", "-ms-flexbox", "flex"]}
+      // Set them one by one, and the browser will only set those it can recognize
+      for (let i = 0, len = val.length; i < len; i++) {
+        el.style[normalizedName] = val[i]
+      }
+    } else {
+      el.style[normalizedName] = val
+    }
   }
 }
 
diff --git a/src/platforms/web/server/modules/style.js b/src/platforms/web/server/modules/style.js
@@ -8,7 +8,15 @@ function genStyleText (vnode: VNode): string {
   let styleText = ''
   const style = getStyle(vnode, false)
   for (const key in style) {
-    styleText += `${hyphenate(key)}:${style[key]};`
+    const value = style[key]
+    const hyphenatedKey = hyphenate(key)
+    if (Array.isArray(value)) {
+      for (let i = 0, len = value.length; i < len; i++) {
+        styleText += `${hyphenatedKey}:${value[i]};`
+      }
+    } else {
+      styleText += `${hyphenatedKey}:${value};`
+    }
   }
   return styleText
 }
diff --git a/test/ssr/ssr-string.spec.js b/test/ssr/ssr-string.spec.js
@@ -123,6 +123,22 @@ describe('SSR: renderToString', () => {
     })
   })
 
+  it('auto-prefixed style value as array', done => {
+    renderVmWithOptions({
+      template: '<div :style="style"></div>',
+      data: {
+        style: {
+          display: ['-webkit-box', '-ms-flexbox', 'flex']
+        }
+      }
+    }, result => {
+      expect(result).toContain(
+        '<div data-server-rendered="true" style="display:-webkit-box;display:-ms-flexbox;display:flex;"></div>'
+      )
+      done()
+    })
+  })
+
   it('custom component style', done => {
     renderVmWithOptions({
       template: '<section><comp :style="style"></comp></section>',
diff --git a/test/unit/features/directives/style.spec.js b/test/unit/features/directives/style.spec.js
@@ -83,6 +83,17 @@ describe('Directive v-bind:style', () => {
     }).then(done)
   })
 
+  it('auto-prefixed style value as array', done => {
+    vm.styles = { display: ['-webkit-box', '-ms-flexbox', 'flex'] }
+    const testEl = document.createElement('div')
+    vm.styles.display.forEach(value => {
+      testEl.style.display = value
+    })
+    waitForUpdate(() => {
+      expect(vm.$el.style.display).toBe(testEl.style.display)
+    }).then(done)
+  })
+
   it('!important', done => {
     vm.styles = { display: 'block !important' }
     waitForUpdate(() => {
