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 vuejs#12113

Author: royeden

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

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 => {