From f844b1c5d2a354ac22e29dbeaf7f2f1d10d24d92 Mon Sep 17 00:00:00 2001
From: RoyEden <roy.ede@gmail.com>
Date: Sun, 25 Jul 2021 02:12:17 -0300
Subject: [PATCH] feat(compiler): template staticClass no longer preserves
 whitespace

Template static classes used to preserve whitespace after compilation, resulting in builds that had
bigger file outputs with whitespace in component's staticClass attributes

fix #12113
---
 src/platforms/web/compiler/modules/class.js |  2 +-
 test/unit/features/directives/class.spec.js | 33 +++++++++++++++++++++
 2 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/src/platforms/web/compiler/modules/class.js b/src/platforms/web/compiler/modules/class.js
index dcb5a229c2b..81091675770 100644
--- a/src/platforms/web/compiler/modules/class.js
+++ b/src/platforms/web/compiler/modules/class.js
@@ -23,7 +23,7 @@ function transformNode (el: ASTElement, options: CompilerOptions) {
     }
   }
   if (staticClass) {
-    el.staticClass = JSON.stringify(staticClass)
+    el.staticClass = JSON.stringify(staticClass.replace(/\s+/gi, " ").trim())
   }
   const classBinding = getBindingAttr(el, 'class', false /* getStatic */)
   if (classBinding) {
diff --git a/test/unit/features/directives/class.spec.js b/test/unit/features/directives/class.spec.js
index 0ee3380ca9a..e04cc95c882 100644
--- a/test/unit/features/directives/class.spec.js
+++ b/test/unit/features/directives/class.spec.js
@@ -152,6 +152,39 @@ describe('Directive v-bind:class', () => {
     }).then(done)
   })
 
+  // css static classes should only contain a single space in between,
+  // as all the text inside of classes is shipped as a JS string
+  // and this could lead to useless spacing in static classes
+  it('corrects whitespace in staticClass', done => {
+    const vm = new Vue({
+      template: '<div class=" test1\ntest2\ttest3 test4   test5 \n \n \ntest6\t"></div>',
+    }).$mount()
+    expect(vm.$el.className).toBe('test1 test2 test3 test4 test5 test6')
+    done()
+  })
+
+  it('corrects whitespace in staticClass merge in a component', done => {
+    const vm = new Vue({
+      template: `
+        <component1 class="staticClass" :class="componentClass1">
+        </component1>
+      `,
+      data: {
+        componentClass1: 'componentClass1',
+      },
+      components: {
+        component1: {
+          template: '<div class="test"></div>'
+        },
+      }
+    }).$mount()
+    expect(vm.$el.className).toBe('test staticClass componentClass1')
+    vm.componentClass1 = 'c1'
+    waitForUpdate(() => {
+      expect(vm.$el.className).toBe('test staticClass c1')
+    }).then(done)
+  })
+
   // a vdom patch edge case where the user has several un-keyed elements of the
   // same tag next to each other, and toggling them.
   it('properly remove staticClass for toggling un-keyed children', done => {