From 5e767e54826c0765a56d83aa6e813eee489016ef Mon Sep 17 00:00:00 2001 From: edison1105 Date: Sat, 5 Nov 2022 10:05:32 +0800 Subject: [PATCH 1/2] fix(ssr): should keep all style vars in render attrs --- packages/server-renderer/__tests__/ssrRenderAttrs.spec.ts | 8 ++++++-- packages/shared/src/normalizeProp.ts | 6 ++++-- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/packages/server-renderer/__tests__/ssrRenderAttrs.spec.ts b/packages/server-renderer/__tests__/ssrRenderAttrs.spec.ts index 62ccdb59974..061901f0e4a 100644 --- a/packages/server-renderer/__tests__/ssrRenderAttrs.spec.ts +++ b/packages/server-renderer/__tests__/ssrRenderAttrs.spec.ts @@ -143,10 +143,14 @@ describe('ssr: renderStyle', () => { expect( ssrRenderAttrs({ style: { - color: 'red' + color: 'red', + "--37b1dc3d-numberValue": 2, + "--37b1dc3d-stringValue": 'str', + "--37b1dc3d-undefinedValue": undefined, + "--37b1dc3d-booleanValue": true } }) - ).toBe(` style="color:red;"`) + ).toBe(` style="color:red;--37b1dc3d-numberValue:2;--37b1dc3d-stringValue:str;--37b1dc3d-undefinedValue:undefined;--37b1dc3d-booleanValue:true;"`) }) test('standalone', () => { diff --git a/packages/shared/src/normalizeProp.ts b/packages/shared/src/normalizeProp.ts index cab8090692e..dd18c4b7366 100644 --- a/packages/shared/src/normalizeProp.ts +++ b/packages/shared/src/normalizeProp.ts @@ -50,10 +50,12 @@ export function stringifyStyle( } for (const key in styles) { const value = styles[key] - const normalizedKey = key.startsWith(`--`) ? key : hyphenate(key) + const isStyleVar = key.startsWith('--') + const normalizedKey = isStyleVar ? key : hyphenate(key) if ( isString(value) || - (typeof value === 'number' && isNoUnitNumericStyleProp(normalizedKey)) + (typeof value === 'number' && isNoUnitNumericStyleProp(normalizedKey)) || + isStyleVar ) { // only render valid values ret += `${normalizedKey}:${value};` From 804845153fd349e842794ca04c96deabc1f7e7a2 Mon Sep 17 00:00:00 2001 From: edison1105 Date: Sat, 5 Nov 2022 10:17:09 +0800 Subject: [PATCH 2/2] fix: format code --- .../server-renderer/__tests__/ssrRenderAttrs.spec.ts | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/server-renderer/__tests__/ssrRenderAttrs.spec.ts b/packages/server-renderer/__tests__/ssrRenderAttrs.spec.ts index 061901f0e4a..70ed9f35399 100644 --- a/packages/server-renderer/__tests__/ssrRenderAttrs.spec.ts +++ b/packages/server-renderer/__tests__/ssrRenderAttrs.spec.ts @@ -144,13 +144,15 @@ describe('ssr: renderStyle', () => { ssrRenderAttrs({ style: { color: 'red', - "--37b1dc3d-numberValue": 2, - "--37b1dc3d-stringValue": 'str', - "--37b1dc3d-undefinedValue": undefined, - "--37b1dc3d-booleanValue": true + '--37b1dc3d-numberValue': 2, + '--37b1dc3d-stringValue': 'str', + '--37b1dc3d-undefinedValue': undefined, + '--37b1dc3d-booleanValue': true } }) - ).toBe(` style="color:red;--37b1dc3d-numberValue:2;--37b1dc3d-stringValue:str;--37b1dc3d-undefinedValue:undefined;--37b1dc3d-booleanValue:true;"`) + ).toBe( + ` style="color:red;--37b1dc3d-numberValue:2;--37b1dc3d-stringValue:str;--37b1dc3d-undefinedValue:undefined;--37b1dc3d-booleanValue:true;"` + ) }) test('standalone', () => {