fix(mp): normalize style (#3320)

packages/uni-cli-shared/src/vite/utils/ast.ts

@@ -17,6 +17,7 @@ import {
   ElementNode,
   DirectiveNode,
   SimpleExpressionNode,
+  AttributeNode,
 } from '@vue/compiler-core'
 import { parse } from '@vue/compiler-dom'
 
@@ -98,6 +99,10 @@ export function isElementNode(node: Node): node is ElementNode {
   return node.type === NodeTypes.ELEMENT
 }
 
+export function isAttributeNode(node: Node): node is AttributeNode {
+  return node.type === NodeTypes.ATTRIBUTE
+}
+
 export function isDirectiveNode(node: Node): node is DirectiveNode {
   return node.type === NodeTypes.DIRECTIVE
 }

packages/uni-mp-compiler/__tests__/class.spec.ts

@@ -21,6 +21,15 @@ describe('compiler: transform class', () => {
       `<view class="foo bar"/>`,
       `(_ctx, _cache) => {
   return {}
+}`
+    )
+    assert(
+      `<view class="foo
+bar
+"/>`,
+      `<view class="foo bar"/>`,
+      `(_ctx, _cache) => {
+  return {}
 }`
     )
   })

packages/uni-mp-compiler/__tests__/component.spec.ts

@@ -100,8 +100,8 @@ describe('compiler: transform component', () => {
   })
   test(`component with props`, () => {
     assert(
-      `<uni-collapse id="id" ref="a" :ref="b" slot="c" :slot="d" class="e" :class="f" style="g" :style="h" @click="i" v-model:first="j" v-model:last="k" prop-a="l" :prop-b="m" data-a="n" :data-b="o" key="p" :key="r" is="s" :is="t"/>`,
-      `<uni-collapse id="id" ref="a" ref="{{a}}" slot="c" slot="{{b}}" class="{{['e', c]}}" style="{{'g' + ';' + d}}" bindclick="{{e}}" data-a="n" data-b="{{f}}" key="p" key="{{g}}" is="s" is="{{h}}" u-i="2a9ec0b0-0" bindupdateFirst="{{i}}" bindupdateLast="{{j}}" u-p="{{k}}"/>`,
+      `<uni-collapse id="id" ref="a" :ref="b" slot="c" :slot="d" class="e" :class="f" style="g:g;" :style="h" @click="i" v-model:first="j" v-model:last="k" prop-a="l" :prop-b="m" data-a="n" :data-b="o" key="p" :key="r" is="s" :is="t"/>`,
+      `<uni-collapse id="id" ref="a" ref="{{a}}" slot="c" slot="{{b}}" class="{{['e', c]}}" style="{{'g:g' + ';' + d}}" bindclick="{{e}}" data-a="n" data-b="{{f}}" key="p" key="{{g}}" is="s" is="{{h}}" u-i="2a9ec0b0-0" bindupdateFirst="{{i}}" bindupdateLast="{{j}}" u-p="{{k}}"/>`,
       `(_ctx, _cache) => {
   return { a: _ctx.b, b: _ctx.d, c: _n(_ctx.f), d: _s(_ctx.h), e: _o(_ctx.i), f: _ctx.o, g: _ctx.r, h: _ctx.t, i: _o($event => _ctx.j = $event), j: _o($event => _ctx.k = $event), k: _p({ ['prop-a']: 'l', ['prop-b']: _ctx.m, first: _ctx.j, last: _ctx.k }) }
 }`

packages/uni-mp-compiler/__tests__/style.spec.ts

@@ -4,14 +4,24 @@ describe('compiler: transform style', () => {
   test(`static style`, () => {
     assert(
       `<view style="color: green"/>`,
-      `<view style="color: green"/>`,
+      `<view style="color:green"/>`,
       `(_ctx, _cache) => {
   return {}
 }`
     )
     assert(
       `<view style="color: green;font-size:  15px"/>`,
-      `<view style="color: green;font-size:  15px"/>`,
+      `<view style="color:green;font-size:15px"/>`,
+      `(_ctx, _cache) => {
+  return {}
+}`
+    )
+    assert(
+      `<view style="
+color: green;
+font-size:  15px;
+"/>`,
+      `<view style="color:green;font-size:15px"/>`,
       `(_ctx, _cache) => {
   return {}
 }`
@@ -36,14 +46,14 @@ describe('compiler: transform style', () => {
   test('v-bind:style basic + style ', () => {
     assert(
       `<view :style="foo" style="color:green;"/>`,
-      `<view style="{{a + ';' + 'color:green;'}}"/>`,
+      `<view style="{{a + ';' + 'color:green'}}"/>`,
       `(_ctx, _cache) => {
   return { a: _s(_ctx.foo) }
 }`
     )
     assert(
       `<view style="color:green;" :style="foo"/>`,
-      `<view style="{{'color:green;' + ';' + a}}"/>`,
+      `<view style="{{'color:green' + ';' + a}}"/>`,
       `(_ctx, _cache) => {
   return { a: _s(_ctx.foo) }
 }`

packages/uni-mp-compiler/src/compile.ts

@@ -18,6 +18,7 @@ import { transformSlot } from './transforms/vSlot'
 import { transformRoot } from './transforms/transformRoot'
 import { transformTag } from './transforms/transformTag'
 import { transformHtml } from './transforms/vHtml'
+import { transformAttr } from './transforms/transformAttr'
 
 export type TransformPreset = [
   NodeTransform[],
@@ -34,6 +35,7 @@ export function getBaseTransformPreset({
   // order is important
   const nodeTransforms = [
     transformRoot,
+    transformAttr,
     transformTag,
     transformHtml,
     transformIf,

packages/uni-mp-compiler/src/transforms/transformAttr.ts

+import { isAttributeNode, isElementNode } from '@dcloudio/uni-cli-shared'
+import { parseStringStyle, stringifyStyle } from '@vue/shared'
+import { NodeTransform } from '../transform'
+
+export const transformAttr: NodeTransform = (node, _) => {
+  if (!isElementNode(node)) {
+    return
+  }
+  node.props.forEach((prop) => {
+    if (isAttributeNode(prop) && prop.value) {
+      switch (prop.name) {
+        case 'style':
+          prop.value.content = stringifyStyle(
+            parseStringStyle(prop.value.content)
+          ).slice(0, -1) // 移除最后一个分号，省点大小吧
+          break
+      }
+    }
+  })
+}