diff --git a/packages/server-renderer/__tests__/ssrRenderAttrs.spec.ts b/packages/server-renderer/__tests__/ssrRenderAttrs.spec.ts index e9dfb0dbd59..16de44f55ba 100644 --- a/packages/server-renderer/__tests__/ssrRenderAttrs.spec.ts +++ b/packages/server-renderer/__tests__/ssrRenderAttrs.spec.ts @@ -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', () => { @@ -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;`) diff --git a/packages/shared/src/domAttrConfig.ts b/packages/shared/src/domAttrConfig.ts index fb4f29a46fc..54fc3035317 100644 --- a/packages/shared/src/domAttrConfig.ts +++ b/packages/shared/src/domAttrConfig.ts @@ -53,21 +53,6 @@ export const propsToAttrMap: Record = { 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. diff --git a/packages/shared/src/normalizeProp.ts b/packages/shared/src/normalizeProp.ts index cab8090692e..283309a4369 100644 --- a/packages/shared/src/normalizeProp.ts +++ b/packages/shared/src/normalizeProp.ts @@ -1,5 +1,4 @@ import { isArray, isString, isObject, hyphenate } from './' -import { isNoUnitNumericStyleProp } from './domAttrConfig' export type NormalizedStyle = Record @@ -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};` }