mirror of https://github.com/vuejs/core.git
fix(ssr): remove css number value check (#6636)
Previously this prevented custom properties and vendor-prefixed properties to be rendered correctly. fix #6625
This commit is contained in:
parent
04553786e4
commit
79e7c1ee43
|
@ -154,10 +154,12 @@ describe('ssr: renderStyle', () => {
|
||||||
expect(
|
expect(
|
||||||
ssrRenderAttrs({
|
ssrRenderAttrs({
|
||||||
style: {
|
style: {
|
||||||
color: 'red'
|
color: 'red',
|
||||||
|
'--a': 2,
|
||||||
|
'-webkit-line-clamp': 1
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
).toBe(` style="color:red;"`)
|
).toBe(` style="color:red;--a:2;-webkit-line-clamp:1;"`)
|
||||||
})
|
})
|
||||||
|
|
||||||
test('standalone', () => {
|
test('standalone', () => {
|
||||||
|
@ -178,7 +180,7 @@ describe('ssr: renderStyle', () => {
|
||||||
test('number handling', () => {
|
test('number handling', () => {
|
||||||
expect(
|
expect(
|
||||||
ssrRenderStyle({
|
ssrRenderStyle({
|
||||||
fontSize: 15, // should be ignored since font-size requires unit
|
fontSize: null, // invalid value should be ignored
|
||||||
opacity: 0.5
|
opacity: 0.5
|
||||||
})
|
})
|
||||||
).toBe(`opacity:0.5;`)
|
).toBe(`opacity:0.5;`)
|
||||||
|
|
|
@ -53,21 +53,6 @@ export const propsToAttrMap: Record<string, string | undefined> = {
|
||||||
httpEquiv: 'http-equiv'
|
httpEquiv: 'http-equiv'
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* CSS properties that accept plain numbers
|
|
||||||
*/
|
|
||||||
export const isNoUnitNumericStyleProp = /*#__PURE__*/ makeMap(
|
|
||||||
`animation-iteration-count,border-image-outset,border-image-slice,` +
|
|
||||||
`border-image-width,box-flex,box-flex-group,box-ordinal-group,column-count,` +
|
|
||||||
`columns,flex,flex-grow,flex-positive,flex-shrink,flex-negative,flex-order,` +
|
|
||||||
`grid-row,grid-row-end,grid-row-span,grid-row-start,grid-column,` +
|
|
||||||
`grid-column-end,grid-column-span,grid-column-start,font-weight,line-clamp,` +
|
|
||||||
`line-height,opacity,order,orphans,tab-size,widows,z-index,zoom,` +
|
|
||||||
// SVG
|
|
||||||
`fill-opacity,flood-opacity,stop-opacity,stroke-dasharray,stroke-dashoffset,` +
|
|
||||||
`stroke-miterlimit,stroke-opacity,stroke-width`
|
|
||||||
)
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Known attributes, this is used for stringification of runtime static nodes
|
* Known attributes, this is used for stringification of runtime static nodes
|
||||||
* so that we don't stringify bindings that cannot be set from HTML.
|
* so that we don't stringify bindings that cannot be set from HTML.
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
import { isArray, isString, isObject, hyphenate } from './'
|
import { isArray, isString, isObject, hyphenate } from './'
|
||||||
import { isNoUnitNumericStyleProp } from './domAttrConfig'
|
|
||||||
|
|
||||||
export type NormalizedStyle = Record<string, string | number>
|
export type NormalizedStyle = Record<string, string | number>
|
||||||
|
|
||||||
|
@ -51,10 +50,7 @@ export function stringifyStyle(
|
||||||
for (const key in styles) {
|
for (const key in styles) {
|
||||||
const value = styles[key]
|
const value = styles[key]
|
||||||
const normalizedKey = key.startsWith(`--`) ? key : hyphenate(key)
|
const normalizedKey = key.startsWith(`--`) ? key : hyphenate(key)
|
||||||
if (
|
if (isString(value) || typeof value === 'number') {
|
||||||
isString(value) ||
|
|
||||||
(typeof value === 'number' && isNoUnitNumericStyleProp(normalizedKey))
|
|
||||||
) {
|
|
||||||
// only render valid values
|
// only render valid values
|
||||||
ret += `${normalizedKey}:${value};`
|
ret += `${normalizedKey}:${value};`
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue