fix(ssr): remove css number value check (#6636)

Previously this prevented custom properties and vendor-prefixed properties to be rendered correctly.

fix #6625

diff --git a/packages/server-renderer/__tests__/ssrRenderAttrs.spec.ts b/packages/server-renderer/__tests__/ssrRenderAttrs.spec.ts
index e9dfb0dbd598e862d83eb280e3146266297e0a91..16de44f55ba355526ac41af93c5f5776c04e1690 100644 (file)
--- 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 fb4f29a46fca0757069f9f401d2fb63289a56cf0..54fc3035317097d0f26322090c200e16bcb4a98c 100644 (file)
--- a/packages/shared/src/domAttrConfig.ts
+++ b/packages/shared/src/domAttrConfig.ts
@@ -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.

diff --git a/packages/shared/src/normalizeProp.ts b/packages/shared/src/normalizeProp.ts
index cab8090692e6cfcb326c0ef7da7928f2adfbaa05..283309a43691faf512fabc05f28847c830896988 100644 (file)
--- 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<string, string | number>
 
@@ -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};`
     }