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

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