refactor: move transformStyle to compiler-dom

packages/compiler-dom/__tests__/transforms/transformStyle.spec.ts

@@ -0,0 +1,80 @@
+import {
+  parse,
+  transform,
+  CompilerOptions,
+  ElementNode,
+  NodeTypes
+} from '@vue/compiler-core'
+import { transformBind } from '../../../compiler-core/src/transforms/vBind'
+import { transformElement } from '../../../compiler-core/src/transforms/transformElement'
+import { transformStyle } from '../../src/transforms/transformStyle'
+
+function transformWithStyleTransform(
+  template: string,
+  options: CompilerOptions = {}
+) {
+  const ast = parse(template)
+  transform(ast, {
+    nodeTransforms: [transformStyle],
+    ...options
+  })
+  return {
+    root: ast,
+    node: ast.children[0] as ElementNode
+  }
+}
+
+describe('compiler: style transform', () => {
+  test('should transform into directive node and hoist value', () => {
+    const { root, node } = transformWithStyleTransform(
+      `<div style="color: red"/>`
+    )
+    expect(root.hoists).toMatchObject([
+      {
+        type: NodeTypes.SIMPLE_EXPRESSION,
+        content: `{"color":"red"}`,
+        isStatic: false
+      }
+    ])
+    expect(node.props[0]).toMatchObject({
+      type: NodeTypes.DIRECTIVE,
+      name: `bind`,
+      arg: {
+        type: NodeTypes.SIMPLE_EXPRESSION,
+        content: `style`,
+        isStatic: true
+      },
+      exp: {
+        type: NodeTypes.SIMPLE_EXPRESSION,
+        content: `_hoisted_1`,
+        isStatic: false
+      }
+    })
+  })
+
+  test('working with v-bind transform', () => {
+    const { node } = transformWithStyleTransform(`<div style="color: red"/>`, {
+      nodeTransforms: [transformStyle, transformElement],
+      directiveTransforms: {
+        bind: transformBind
+      }
+    })
+    expect(node.codegenNode!.arguments[1]).toMatchObject({
+      type: NodeTypes.JS_OBJECT_EXPRESSION,
+      properties: [
+        {
+          key: {
+            type: NodeTypes.SIMPLE_EXPRESSION,
+            content: `style`,
+            isStatic: true
+          },
+          value: {
+            type: NodeTypes.SIMPLE_EXPRESSION,
+            content: `_hoisted_1`,
+            isStatic: false
+          }
+        }
+      ]
+    })
+  })
+})

packages/compiler-dom/src/index.ts

@@ -1,6 +1,7 @@
 import { baseCompile, CompilerOptions, CodegenResult } from '@vue/compiler-core'
 import { parserOptionsMinimal } from './parserOptionsMinimal'
 import { parserOptionsStandard } from './parserOptionsStandard'
+import { transformStyle } from './transforms/transformStyle'
 
 export function compile(
   template: string,
@@ -9,6 +10,7 @@ export function compile(
   return baseCompile(template, {
     ...options,
     ...(__BROWSER__ ? parserOptionsMinimal : parserOptionsStandard),
+    nodeTransforms: [transformStyle, ...(options.nodeTransforms || [])],
     directiveTransforms: {
       // TODO include DOM-specific directiveTransforms
       ...(options.directiveTransforms || {})

packages/compiler-dom/src/transforms/transformStyle.ts

@@ -0,0 +1,45 @@
+import {
+  NodeTransform,
+  NodeTypes,
+  createSimpleExpression
+} from '@vue/compiler-core'
+
+// Parse inline CSS strings for static style attributes into an object.
+// This is a NodeTransform since it works on the static `style` attribute and
+// converts it into a dynamic equivalent:
+// style="color: red" -> :style='{ "color": "red" }'
+// It is then processed by `transformElement` and included in the generated
+// props.
+export const transformStyle: NodeTransform = (node, context) => {
+  if (node.type === NodeTypes.ELEMENT) {
+    node.props.forEach((p, i) => {
+      if (p.type === NodeTypes.ATTRIBUTE && p.name === 'style' && p.value) {
+        // replace p with an expression node
+        const parsed = JSON.stringify(parseInlineCSS(p.value.content))
+        const exp = context.hoist(createSimpleExpression(parsed, false, p.loc))
+        node.props[i] = {
+          type: NodeTypes.DIRECTIVE,
+          name: `bind`,
+          arg: createSimpleExpression(`style`, true, p.loc),
+          exp,
+          modifiers: [],
+          loc: p.loc
+        }
+      }
+    })
+  }
+}
+
+const listDelimiterRE = /;(?![^(]*\))/g
+const propertyDelimiterRE = /:(.+)/
+
+function parseInlineCSS(cssText: string): Record<string, string> {
+  const res: Record<string, string> = {}
+  cssText.split(listDelimiterRE).forEach(function(item) {
+    if (item) {
+      const tmp = item.split(propertyDelimiterRE)
+      tmp.length > 1 && (res[tmp[0].trim()] = tmp[1].trim())
+    }
+  })
+  return res
+}