fix(runtime-dom/style): normalize string when merging styles (#1127)

diff --git a/packages/runtime-core/__tests__/vnode.spec.ts b/packages/runtime-core/__tests__/vnode.spec.ts
index e8bde9bcc8333d2d6a00ef530b2c352a27ad6977..341e840de73281a34242326f6db3b26d5ce80d26 100644 (file)
--- a/packages/runtime-core/__tests__/vnode.spec.ts
+++ b/packages/runtime-core/__tests__/vnode.spec.ts
@@ -258,6 +258,34 @@ describe('vnode', () => {
         }
       })
     })
+    test('style', () => {
+      let props1: Data = {
+        style: 'width:100px;right:10;top:10'
+      }
+      let props2: Data = {
+        style: [
+          {
+            color: 'blue',
+            width: '200px'
+          },
+          {
+            width: '300px',
+            height: '300px',
+            fontSize: 30
+          }
+        ]
+      }
+      expect(mergeProps(props1, props2)).toMatchObject({
+        style: {
+          color: 'blue',
+          width: '300px',
+          height: '300px',
+          fontSize: 30,
+          right: 10,
+          top: 10
+        }
+      })
+    })
 
     test('handlers', () => {
       let clickHandler1 = function() {}

diff --git a/packages/shared/src/normalizeProp.ts b/packages/shared/src/normalizeProp.ts
index 77357c681a8c27478a1986f3e8b5e29b49e18d18..3546fa04b708bf286ccf220d009afdde00565f39 100644 (file)
--- a/packages/shared/src/normalizeProp.ts
+++ b/packages/shared/src/normalizeProp.ts
@@ -7,7 +7,8 @@ export function normalizeStyle(
   if (isArray(value)) {
     const res: Record<string, string | number> = {}
     for (let i = 0; i < value.length; i++) {
-      const normalized = normalizeStyle(value[i])
+      const styles = isString(value[i]) ? strStyleToObj(value[i]) : value[i]
+      const normalized = normalizeStyle(styles)
       if (normalized) {
         for (const key in normalized) {
           res[key] = normalized[key]
@@ -20,6 +21,18 @@ export function normalizeStyle(
   }
 }
 
+function strStyleToObj(style: string) {
+  const ret: Record<string, string | number> = {}
+  style
+    .replace(/\s*/g, '')
+    .split(';')
+    .forEach((item: string) => {
+      const [key, val] = item.split(':')
+      ret[key] = isNaN(Number(val)) ? val : Number(val)
+    })
+  return ret
+}
+
 export function stringifyStyle(
   styles: Record<string, string | number> | undefined
 ): string {