From f844b1c5d2a354ac22e29dbeaf7f2f1d10d24d92 Mon Sep 17 00:00:00 2001 From: RoyEden Date: Sun, 25 Jul 2021 02:12:17 -0300 Subject: [PATCH 1/5] 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: '
', + }).$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: ` + + + `, + data: { + componentClass1: 'componentClass1', + }, + components: { + component1: { + template: '
' + }, + } + }).$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 => { From 77be1249a208c275349c55b8cb383f9eda136f14 Mon Sep 17 00:00:00 2001 From: RoyEden Date: Tue, 24 Aug 2021 00:45:28 -0300 Subject: [PATCH 2/5] refactor(refactor(web-compiler): removed ignore in regex): Removed ignore flag in regex fix #12113 --- src/platforms/web/compiler/modules/class.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/platforms/web/compiler/modules/class.js b/src/platforms/web/compiler/modules/class.js index 81091675770..12a68c8b8cf 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.replace(/\s+/gi, " ").trim()) + el.staticClass = JSON.stringify(staticClass.replace(/\s+/g, " ").trim()) } const classBinding = getBindingAttr(el, 'class', false /* getStatic */) if (classBinding) { From 07916abad7baac63890ec49cd642b64b052a58a9 Mon Sep 17 00:00:00 2001 From: RoyEden Date: Tue, 24 Aug 2021 01:04:38 -0300 Subject: [PATCH 3/5] 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/ssr/ssr-string.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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', () => { ` }, result => { - expect(result).toContain(`
`) + expect(result).toContain(`
`) done() }) }) From 50461b2f7c482b7c4aafdf78533a2257974dcbc2 Mon Sep 17 00:00:00 2001 From: RoyEden Date: Tue, 24 Aug 2021 18:38:51 -0300 Subject: [PATCH 4/5] test(directives/class.spec.js): Added whitespace to test fix #12113 --- test/unit/features/directives/class.spec.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/unit/features/directives/class.spec.js b/test/unit/features/directives/class.spec.js index e04cc95c882..49ceac7b1ed 100644 --- a/test/unit/features/directives/class.spec.js +++ b/test/unit/features/directives/class.spec.js @@ -166,7 +166,7 @@ describe('Directive v-bind:class', () => { it('corrects whitespace in staticClass merge in a component', done => { const vm = new Vue({ template: ` - + `, data: { @@ -174,7 +174,7 @@ describe('Directive v-bind:class', () => { }, components: { component1: { - template: '
' + template: '
' }, } }).$mount() From bfdbfea25adba3184ed39cf4643238c7903ae48f Mon Sep 17 00:00:00 2001 From: Eduardo San Martin Morote Date: Wed, 8 Sep 2021 11:19:39 +0200 Subject: [PATCH 5/5] Apply suggestions from code review --- src/platforms/web/compiler/modules/class.js | 2 +- test/unit/features/directives/class.spec.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/platforms/web/compiler/modules/class.js b/src/platforms/web/compiler/modules/class.js index 12a68c8b8cf..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.replace(/\s+/g, " ").trim()) + el.staticClass = JSON.stringify(staticClass.replace(/\s+/g, ' ').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 49ceac7b1ed..38a25988d2a 100644 --- a/test/unit/features/directives/class.spec.js +++ b/test/unit/features/directives/class.spec.js @@ -155,7 +155,7 @@ describe('Directive v-bind:class', () => { // 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 => { + it('condenses whitespace in staticClass', done => { const vm = new Vue({ template: '
', }).$mount() @@ -163,7 +163,7 @@ describe('Directive v-bind:class', () => { done() }) - it('corrects whitespace in staticClass merge in a component', done => { + it('condenses whitespace in staticClass merge in a component', done => { const vm = new Vue({ template: `