Skip to content

Commit 6b71f97

Browse files
committed
fix(SSR): Properly handle newlines and whitespace in SSR classnames
When encountering newlines in SSR classnames, do not render "\n"" and instead replace the new line with a space. Once newlines are removed, indentation from subsequent lines can leave classnames abnormally spaced out, so replace multiple spaces with a single space fix vuejs#7859
1 parent 5e3823a commit 6b71f97

File tree

2 files changed

+32
-1
lines changed

2 files changed

+32
-1
lines changed

src/platforms/web/compiler/modules/class.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ function transformNode (el: ASTElement, options: CompilerOptions) {
2222
}
2323
}
2424
if (staticClass) {
25-
el.staticClass = JSON.stringify(staticClass)
25+
el.staticClass = JSON.stringify(staticClass.replace(/\n/g, ' ').replace(/ +/g, ' '))
2626
}
2727
const classBinding = getBindingAttr(el, 'class', false /* getStatic */)
2828
if (classBinding) {

test/ssr/ssr-string.spec.js

+31
Original file line numberDiff line numberDiff line change
@@ -1211,6 +1211,37 @@ describe('SSR: renderToString', () => {
12111211
})
12121212
})
12131213

1214+
// #7859
1215+
it('should remove and trim newlines in class attributes', done => {
1216+
renderVmWithOptions({
1217+
template: `
1218+
<div>
1219+
<div class="a b
1220+
c d">
1221+
</div>
1222+
</div>
1223+
`
1224+
}, result => {
1225+
expect(result).toContain(`<div class="a b c d"></div>`)
1226+
done()
1227+
})
1228+
})
1229+
1230+
// #7859
1231+
it('should trim excess whigtespace in class attributes', done => {
1232+
renderVmWithOptions({
1233+
template: `
1234+
<div>
1235+
<div class="a b c d">
1236+
</div>
1237+
</div>
1238+
`
1239+
}, result => {
1240+
expect(result).toContain(`<div class="a b c d"></div>`)
1241+
done()
1242+
})
1243+
})
1244+
12141245
it('should expose ssr helpers on functional context', done => {
12151246
let called = false
12161247
renderVmWithOptions({

0 commit comments

Comments
 (0)