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

Previously this prevented custom properties and vendor-prefixed properties to be rendered correctly. fix vuejs#6625
chrislone · Feb 4, 2023 · 979b683 · 979b683
1 parent 7e7bc1e
commit 979b683
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 23 deletions.
diff --git 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
@@ -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
@@ -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};`
     }