Skip to content

Commit

Permalink
feat(compiler): template staticClass no longer preserves whitespace
Browse files Browse the repository at this point in the history
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
  • Loading branch information
royeden committed Jul 25, 2021
1 parent 8a219e3 commit f844b1c
Show file tree
Hide file tree
Showing 2 changed files with 34 additions and 1 deletion.
2 changes: 1 addition & 1 deletion src/platforms/web/compiler/modules/class.js
Expand Up @@ -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) {
Expand Down
33 changes: 33 additions & 0 deletions test/unit/features/directives/class.spec.js
Expand Up @@ -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 => {
Expand Down

0 comments on commit f844b1c

Please sign in to comment.