diff --git a/src/platforms/web/compiler/modules/class.js b/src/platforms/web/compiler/modules/class.js index dcb5a229c2b..378c959c9d7 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+/g, ' ').trim()) } const classBinding = getBindingAttr(el, 'class', false /* getStatic */) if (classBinding) { diff --git a/test/ssr/ssr-string.spec.js b/test/ssr/ssr-string.spec.js index b4f962872f5..33094be9c33 100644 --- a/test/ssr/ssr-string.spec.js +++ b/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() }) }) diff --git a/test/unit/features/directives/class.spec.js b/test/unit/features/directives/class.spec.js index 0ee3380ca9a..38a25988d2a 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('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 => {