Skip to content

Commit 17d8bcb

Browse files
committed
fix(ssr): should not render invalid numeric style values
Reverts part of 7d9cfeb - browsers only auto append units to numbers when in quirksmode, so in standard mode, numbers set to style properties that require units are invalid and should not be rendered.
1 parent 7d9cfeb commit 17d8bcb

File tree

2 files changed

+8
-15
lines changed

2 files changed

+8
-15
lines changed

src/platforms/web/server/modules/style.js

+4-11
Original file line numberDiff line numberDiff line change
@@ -21,18 +21,11 @@ export function genStyle (style: Object): string {
2121
}
2222

2323
function normalizeValue(key: string, value: any): string {
24-
if (typeof value === 'string') {
24+
if (
25+
typeof value === 'string' ||
26+
(typeof value === 'number' && noUnitNumericStyleProps[key])
27+
) {
2528
return `${key}:${value};`
26-
} else if (typeof value === 'number') {
27-
// Handle numeric values.
28-
// Turns out all evergreen browsers plus IE11 already support setting plain
29-
// numbers on the style object and will automatically convert it to px if
30-
// applicable, so we should support that on the server too.
31-
if (noUnitNumericStyleProps[key]) {
32-
return `${key}:${value};`
33-
} else {
34-
return `${key}:${value}px;`
35-
}
3629
} else {
3730
// invalid values
3831
return ``

test/ssr/ssr-string.spec.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -1528,14 +1528,14 @@ describe('SSR: renderToString', () => {
15281528
template: '<div :style="style"></div>',
15291529
data: {
15301530
style: {
1531-
opacity: 0, // opacity should display as-is
1532-
top: 0, // top and margin should be converted to '0px'
1533-
marginTop: 10
1531+
opacity: 0, // valid, opacity is unit-less
1532+
top: 0, // invalid, top requires unit
1533+
marginTop: '10px' // valid
15341534
}
15351535
}
15361536
}, result => {
15371537
expect(result).toContain(
1538-
'<div data-server-rendered="true" style="opacity:0;top:0px;margin-top:10px;"></div>'
1538+
'<div data-server-rendered="true" style="opacity:0;margin-top:10px;"></div>'
15391539
)
15401540
done()
15411541
})

0 commit comments

Comments
 (0)