From ef2890c5a1c9c01278e3915bd98eac7611b74108 Mon Sep 17 00:00:00 2001
From: fxy060608 <fxy060608@gmail.com>
Date: Tue, 8 Mar 2022 18:09:02 +0800
Subject: [PATCH] fix(mp): normalize style (#3320)

---
 packages/uni-cli-shared/src/vite/utils/ast.ts |  5 +++++
 .../uni-mp-compiler/__tests__/class.spec.ts   |  9 +++++++++
 .../__tests__/component.spec.ts               |  4 ++--
 .../uni-mp-compiler/__tests__/style.spec.ts   | 18 +++++++++++++----
 packages/uni-mp-compiler/src/compile.ts       |  2 ++
 .../src/transforms/transformAttr.ts           | 20 +++++++++++++++++++
 6 files changed, 52 insertions(+), 6 deletions(-)
 create mode 100644 packages/uni-mp-compiler/src/transforms/transformAttr.ts

diff --git a/packages/uni-cli-shared/src/vite/utils/ast.ts b/packages/uni-cli-shared/src/vite/utils/ast.ts
index 9fb0b2023..4c4c59842 100644
--- a/packages/uni-cli-shared/src/vite/utils/ast.ts
+++ b/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
 }
diff --git a/packages/uni-mp-compiler/__tests__/class.spec.ts b/packages/uni-mp-compiler/__tests__/class.spec.ts
index 8496345f3..434d87138 100644
--- a/packages/uni-mp-compiler/__tests__/class.spec.ts
+++ b/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 {}
 }`
     )
   })
diff --git a/packages/uni-mp-compiler/__tests__/component.spec.ts b/packages/uni-mp-compiler/__tests__/component.spec.ts
index 69091bd35..d16f84699 100644
--- a/packages/uni-mp-compiler/__tests__/component.spec.ts
+++ b/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 }) }
 }`
diff --git a/packages/uni-mp-compiler/__tests__/style.spec.ts b/packages/uni-mp-compiler/__tests__/style.spec.ts
index ab96b519b..3c70dd3fb 100644
--- a/packages/uni-mp-compiler/__tests__/style.spec.ts
+++ b/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) }
 }`
diff --git a/packages/uni-mp-compiler/src/compile.ts b/packages/uni-mp-compiler/src/compile.ts
index 3806b098f..27e75829d 100644
--- a/packages/uni-mp-compiler/src/compile.ts
+++ b/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,
diff --git a/packages/uni-mp-compiler/src/transforms/transformAttr.ts b/packages/uni-mp-compiler/src/transforms/transformAttr.ts
new file mode 100644
index 000000000..dacea2f75
--- /dev/null
+++ b/packages/uni-mp-compiler/src/transforms/transformAttr.ts
@@ -0,0 +1,20 @@
+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
+      }
+    }
+  })
+}
-- 
GitLab