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:
btea 2022-11-08 10:53:44 +08:00 committed by GitHub
parent 04553786e4
commit 79e7c1ee43
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 6 additions and 23 deletions

View File

@ -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;`)

View File

@ -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.

View File

@ -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};`
} }