feat(compiler): condenses staticClass whitespace (fix #12113) (#12195)

* 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

* refactor(refactor(web-compiler): removed ignore in regex): Removed ignore flag in regex

fix #12113

* test(ssr-string.spec.js): Removed newline character, as whitespace is purged in static classes

There's no need to escape newlines in static classes, as they're now replaced with a single
whitespace character

fix #12113

* test(directives/class.spec.js): Added whitespace to test

fix #12113

* Apply suggestions from code review

Co-authored-by: Eduardo San Martin Morote <[email protected]>

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+/g, ' ').trim())
   }
   const classBinding = getBindingAttr(el, 'class', false /* getStatic */)
   if (classBinding) {

test/ssr/ssr-string.spec.js

@@ -1351,7 +1351,7 @@ describe('SSR: renderToString', () => {
       </div>
       `
     }, result => {
-      expect(result).toContain(`<div class="a\nb"></div>`)
+      expect(result).toContain(`<div class="a b"></div>`)
       done()
     })
   })

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('condenses 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('condenses whitespace in staticClass merge in a component', done => {
+    const vm = new Vue({
+      template: `
+        <component1 class="\n\t staticClass \t\n" :class="componentClass1">
+        </component1>
+      `,
+      data: {
+        componentClass1: 'componentClass1',
+      },
+      components: {
+        component1: {
+          template: '<div class="\n\t test \t\n"></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 => {