refactor: reuse parseStringStyle across compiler and runtime

diff --git a/packages/compiler-dom/src/transforms/transformStyle.ts b/packages/compiler-dom/src/transforms/transformStyle.ts
index 765fab778e9a92dee581c1bdfab415d73314c325..2767debf70b3d16171f87764d9e6e454858e2d5b 100644 (file)
--- a/packages/compiler-dom/src/transforms/transformStyle.ts
+++ b/packages/compiler-dom/src/transforms/transformStyle.ts
@@ -5,6 +5,7 @@ import {
   SimpleExpressionNode,
   SourceLocation
 } from '@vue/compiler-core'
+import { parseStringStyle } from '@vue/shared'
 
 // Parse inline CSS strings for static style attributes into an object.
 // This is a NodeTransform since it works on the static `style` attribute and
@@ -30,19 +31,10 @@ export const transformStyle: NodeTransform = (node, context) => {
   }
 }
 
-const listDelimiterRE = /;(?![^(]*\))/g
-const propertyDelimiterRE = /:(.+)/
-
-function parseInlineCSS(
+const parseInlineCSS = (
   cssText: string,
   loc: SourceLocation
-): SimpleExpressionNode {
-  const res: Record<string, string> = {}
-  cssText.split(listDelimiterRE).forEach(item => {
-    if (item) {
-      const tmp = item.split(propertyDelimiterRE)
-      tmp.length > 1 && (res[tmp[0].trim()] = tmp[1].trim())
-    }
-  })
-  return createSimpleExpression(JSON.stringify(res), false, loc, true)
+): SimpleExpressionNode => {
+  const normalized = parseStringStyle(cssText)
+  return createSimpleExpression(JSON.stringify(normalized), false, loc, true)
 }

diff --git a/packages/runtime-core/__tests__/vnode.spec.ts b/packages/runtime-core/__tests__/vnode.spec.ts
index 341e840de73281a34242326f6db3b26d5ce80d26..b25a6682ddadc157b232405ac30b590b8f8bb37c 100644 (file)
--- a/packages/runtime-core/__tests__/vnode.spec.ts
+++ b/packages/runtime-core/__tests__/vnode.spec.ts
@@ -258,7 +258,8 @@ describe('vnode', () => {
         }
       })
     })
-    test('style', () => {
+
+    test('style w/ strings', () => {
       let props1: Data = {
         style: 'width:100px;right:10;top:10'
       }
@@ -281,8 +282,8 @@ describe('vnode', () => {
           width: '300px',
           height: '300px',
           fontSize: 30,
-          right: 10,
-          top: 10
+          right: '10',
+          top: '10'
         }
       })
     })

diff --git a/packages/shared/src/normalizeProp.ts b/packages/shared/src/normalizeProp.ts
index 3546fa04b708bf286ccf220d009afdde00565f39..5e0f84055aaa5eebd36e9962b46af28de8dfc089 100644 (file)
--- a/packages/shared/src/normalizeProp.ts
+++ b/packages/shared/src/normalizeProp.ts
@@ -1,14 +1,16 @@
 import { isArray, isString, isObject, hyphenate } from './'
 import { isNoUnitNumericStyleProp } from './domAttrConfig'
 
-export function normalizeStyle(
-  value: unknown
-): Record<string, string | number> | undefined {
+export type NormalizedStyle = Record<string, string | number>
+
+export function normalizeStyle(value: unknown): NormalizedStyle | undefined {
   if (isArray(value)) {
     const res: Record<string, string | number> = {}
     for (let i = 0; i < value.length; i++) {
-      const styles = isString(value[i]) ? strStyleToObj(value[i]) : value[i]
-      const normalized = normalizeStyle(styles)
+      const item = value[i]
+      const normalized = normalizeStyle(
+        isString(item) ? parseStringStyle(item) : item
+      )
       if (normalized) {
         for (const key in normalized) {
           res[key] = normalized[key]
@@ -21,21 +23,21 @@ 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)
-    })
+const listDelimiterRE = /;(?![^(]*\))/g
+const propertyDelimiterRE = /:(.+)/
+
+export function parseStringStyle(cssText: string): NormalizedStyle {
+  const ret: NormalizedStyle = {}
+  cssText.split(listDelimiterRE).forEach(item => {
+    if (item) {
+      const tmp = item.split(propertyDelimiterRE)
+      tmp.length > 1 && (ret[tmp[0].trim()] = tmp[1].trim())
+    }
+  })
   return ret
 }
 
-export function stringifyStyle(
-  styles: Record<string, string | number> | undefined
-): string {
+export function stringifyStyle(styles: NormalizedStyle | undefined): string {
   let ret = ''
   if (!styles) {
     return ret