refactor: reuse parseStringStyle across compiler and runtime

Author: yyx990803

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)
 }

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'
         }
       })
     })

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