Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(compiler): remove whitespace from static class attributes #4432

Merged
merged 8 commits into from Sep 7, 2021
65 changes: 65 additions & 0 deletions packages/compiler-core/__tests__/parse.spec.ts
Expand Up @@ -1015,6 +1015,71 @@ describe('compiler: parse', () => {
})
})

// https://github.com/vuejs/vue-next/issues/4251
test('class attribute should ignore whitespace when parsed', () => {
const ast = baseParse('<div class=" \n\t c \t\n "></div>')
const element = ast.children[0] as ElementNode

expect(element).toStrictEqual({
children: [],
codegenNode: undefined,
isSelfClosing: false,
loc: {
end: {
column: 10,
line: 3,
offset: 29
},
source: '<div class=" \n\t c \t\n "></div>',
start: {
column: 1,
line: 1,
offset: 0
}
},
ns: 0,
props: [
{
loc: {
end: {
column: 3,
line: 3,
offset: 22
},
source: 'class=" \n\t c \t\n "',
start: {
column: 6,
line: 1,
offset: 5
}
},
name: 'class',
type: 6,
value: {
content: 'c',
loc: {
end: {
column: 3,
line: 3,
offset: 22
},
source: '" \n\t c \t\n "',
start: {
column: 12,
line: 1,
offset: 11
}
},
type: 2
}
}
],
tag: 'div',
tagType: 0,
type: 1
})
})

test('directive with no value', () => {
const ast = baseParse('<div v-if/>')
const directive = (ast.children[0] as ElementNode).props[0]
Expand Down
11 changes: 11 additions & 0 deletions packages/compiler-core/src/parse.ts
Expand Up @@ -716,6 +716,17 @@ function parseAttributes(
}

const attr = parseAttribute(context, attributeNames)

// Trim whitespace between class
// https://github.com/vuejs/vue-next/issues/4251
if (
attr.type === NodeTypes.ATTRIBUTE &&
attr.value &&
attr.name === 'class'
) {
attr.value.content = attr.value.content.replace(/\s+/g, ' ').trim()
}

if (type === TagType.Start) {
props.push(attr)
}
Expand Down