refactor: move transformStyle to compiler-dom

packages/compiler-core/__tests__/transforms/transformElement.spec.ts

@@ -21,8 +21,8 @@ import {
   RootNode
 } from '../../src/ast'
 import { transformElement } from '../../src/transforms/transformElement'
+import { transformStyle } from '../../../compiler-dom/src/transforms/transformStyle'
 import { transformOn } from '../../src/transforms/vOn'
-import { transformStyle } from '../../src/transforms/transformStyle'
 import { transformBind } from '../../src/transforms/vBind'
 import { PatchFlags } from '@vue/shared'
 import { createObjectMatcher } from '../testUtils'

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

@@ -1,80 +0,0 @@
-import {
-  parse,
-  transform,
-  CompilerOptions,
-  ElementNode,
-  NodeTypes
-} from '../../src'
-import { transformStyle } from '../../src/transforms/transformStyle'
-import { transformBind } from '../../src/transforms/vBind'
-import { transformElement } from '../../src/transforms/transformElement'
-
-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-core/src/index.ts

@@ -6,7 +6,6 @@ import { isString } from '@vue/shared'
 import { transformIf } from './transforms/vIf'
 import { transformFor } from './transforms/vFor'
 import { transformExpression } from './transforms/transformExpression'
-import { transformStyle } from './transforms/transformStyle'
 import { transformSlotOutlet } from './transforms/transfromSlotOutlet'
 import { transformElement } from './transforms/transformElement'
 import { transformOn } from './transforms/vOn'
@@ -54,7 +53,6 @@ export function baseCompile(
         : []),
       trackSlotScopes,
       optimizeText,
-      transformStyle,
       transformSlotOutlet,
       transformElement,
       ...(options.nodeTransforms || []) // user transforms

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

@@ -1,42 +0,0 @@
-import { NodeTransform } from '../transform'
-import { NodeTypes, createSimpleExpression } from '../ast'
-
-// 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
-}