fix(compiler-dom): properly stringify class/style bindings when hoisting static strings

packages/compiler-dom/__tests__/__snapshots__/index.spec.ts.snap

@@ -2,9 +2,6 @@
 
 exports[`compile should contain standard transforms 1`] = `
 "const _Vue = Vue
-const { createVNode: _createVNode } = _Vue
-
-const _hoisted_1 = {}
 
 return function render(_ctx, _cache) {
   with (_ctx) {
@@ -14,7 +11,7 @@ return function render(_ctx, _cache) {
       _createVNode(\\"div\\", { textContent: text }, null, 8 /* PROPS */, [\\"textContent\\"]),
       _createVNode(\\"div\\", { innerHTML: html }, null, 8 /* PROPS */, [\\"innerHTML\\"]),
       _createVNode(\\"div\\", null, \\"test\\"),
-      _createVNode(\\"div\\", { style: _hoisted_1 }, \\"red\\"),
+      _createVNode(\\"div\\", { style: {\\"color\\":\\"red\\"} }, \\"red\\"),
       _createVNode(\\"div\\", { style: {color: 'green'} }, null, 4 /* STYLE */)
     ], 64 /* STABLE_FRAGMENT */))
   }

packages/compiler-dom/__tests__/index.spec.ts

@@ -5,7 +5,7 @@ describe('compile', () => {
     const { code } = compile(`<div v-text="text"></div>
         <div v-html="html"></div>
         <div v-cloak>test</div>
-        <div style="color=red">red</div>
+        <div style="color:red">red</div>
         <div :style="{color: 'green'}"></div>`)
 
     expect(code).toMatchSnapshot()

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

@@ -77,8 +77,8 @@ describe('stringify static html', () => {
 
   test('serliazing constant bindings', () => {
     const { ast } = compileWithStringify(
-      `<div><div>${repeat(
-        `<span :class="'foo' + 'bar'">{{ 1 }} + {{ false }}</span>`,
+      `<div><div :style="{ color: 'red' }">${repeat(
+        `<span :class="[{ foo: true }, { bar: true }]">{{ 1 }} + {{ false }}</span>`,
         StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
       )}</div></div>`
     )
@@ -89,8 +89,8 @@ describe('stringify static html', () => {
       callee: CREATE_STATIC,
       arguments: [
         JSON.stringify(
-          `<div>${repeat(
-            `<span class="foobar">1 + false</span>`,
+          `<div style="color:red;">${repeat(
+            `<span class="foo bar">1 + false</span>`,
             StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
           )}</div>`
         )

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

@@ -26,17 +26,8 @@ function transformWithStyleTransform(
 }
 
 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
-      }
-    ])
+  test('should transform into directive node', () => {
+    const { node } = transformWithStyleTransform(`<div style="color: red"/>`)
     expect(node.props[0]).toMatchObject({
       type: NodeTypes.DIRECTIVE,
       name: `bind`,
@@ -47,7 +38,7 @@ describe('compiler: style transform', () => {
       },
       exp: {
         type: NodeTypes.SIMPLE_EXPRESSION,
-        content: `_hoisted_1`,
+        content: `{"color":"red"}`,
         isStatic: false
       }
     })
@@ -71,7 +62,7 @@ describe('compiler: style transform', () => {
           },
           value: {
             type: NodeTypes.SIMPLE_EXPRESSION,
-            content: `_hoisted_1`,
+            content: `{"color":"red"}`,
             isStatic: false
           }
         }

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

@@ -14,7 +14,10 @@ import {
   isString,
   isSymbol,
   escapeHtml,
-  toDisplayString
+  toDisplayString,
+  normalizeClass,
+  normalizeStyle,
+  stringifyStyle
 } from '@vue/shared'
 
 // Turn eligible hoisted static trees into stringied static nodes, e.g.
@@ -84,8 +87,15 @@ function stringifyElement(
       }
     } else if (p.type === NodeTypes.DIRECTIVE && p.name === 'bind') {
       // constant v-bind, e.g. :foo="1"
+      let evaluated = evaluateConstant(p.exp as SimpleExpressionNode)
+      const arg = p.arg && (p.arg as SimpleExpressionNode).content
+      if (arg === 'class') {
+        evaluated = normalizeClass(evaluated)
+      } else if (arg === 'style') {
+        evaluated = stringifyStyle(normalizeStyle(evaluated))
+      }
       res += ` ${(p.arg as SimpleExpressionNode).content}="${escapeHtml(
-        evaluateConstant(p.exp as ExpressionNode)
+        evaluated
       )}"`
     }
   }
@@ -151,7 +161,7 @@ function evaluateConstant(exp: ExpressionNode): string {
       if (c.type === NodeTypes.TEXT) {
         res += c.content
       } else if (c.type === NodeTypes.INTERPOLATION) {
-        res += evaluateConstant(c.content)
+        res += toDisplayString(evaluateConstant(c.content))
       } else {
         res += evaluateConstant(c)
       }

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

@@ -17,12 +17,11 @@ export const transformStyle: NodeTransform = (node, context) => {
     node.props.forEach((p, i) => {
       if (p.type === NodeTypes.ATTRIBUTE && p.name === 'style' && p.value) {
         // replace p with an expression node
-        const exp = context.hoist(parseInlineCSS(p.value.content, p.loc))
         node.props[i] = {
           type: NodeTypes.DIRECTIVE,
           name: `bind`,
           arg: createSimpleExpression(`style`, true, p.loc),
-          exp,
+          exp: parseInlineCSS(p.value.content, p.loc),
           modifiers: [],
           loc: p.loc
         }
@@ -45,5 +44,5 @@ function parseInlineCSS(
       tmp.length > 1 && (res[tmp[0].trim()] = tmp[1].trim())
     }
   })
-  return createSimpleExpression(JSON.stringify(res), false, loc)
+  return createSimpleExpression(JSON.stringify(res), false, loc, true)
 }