Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
fix(ssr): remove css number value check (#6636)
Previously this prevented custom properties and vendor-prefixed properties to be rendered correctly.

fix #6625
  • Loading branch information
btea committed Nov 8, 2022
1 parent 0455378 commit 79e7c1e
Show file tree
Hide file tree
Showing 3 changed files with 6 additions and 23 deletions.
8 changes: 5 additions & 3 deletions packages/server-renderer/__tests__/ssrRenderAttrs.spec.ts
Expand Up @@ -154,10 +154,12 @@ describe('ssr: renderStyle', () => {
expect(
ssrRenderAttrs({
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', () => {
Expand All @@ -178,7 +180,7 @@ describe('ssr: renderStyle', () => {
test('number handling', () => {
expect(
ssrRenderStyle({
fontSize: 15, // should be ignored since font-size requires unit
fontSize: null, // invalid value should be ignored
opacity: 0.5
})
).toBe(`opacity:0.5;`)
Expand Down
15 changes: 0 additions & 15 deletions packages/shared/src/domAttrConfig.ts
Expand Up @@ -53,21 +53,6 @@ export const propsToAttrMap: Record<string, string | undefined> = {
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
* so that we don't stringify bindings that cannot be set from HTML.
Expand Down
6 changes: 1 addition & 5 deletions packages/shared/src/normalizeProp.ts
@@ -1,5 +1,4 @@
import { isArray, isString, isObject, hyphenate } from './'
import { isNoUnitNumericStyleProp } from './domAttrConfig'

export type NormalizedStyle = Record<string, string | number>

Expand Down Expand Up @@ -51,10 +50,7 @@ export function stringifyStyle(
for (const key in styles) {
const value = styles[key]
const normalizedKey = key.startsWith(`--`) ? key : hyphenate(key)
if (
isString(value) ||
(typeof value === 'number' && isNoUnitNumericStyleProp(normalizedKey))
) {
if (isString(value) || typeof value === 'number') {
// only render valid values
ret += `${normalizedKey}:${value};`
}
Expand Down

0 comments on commit 79e7c1e

Please sign in to comment.