From d6156fe2668c54d758afa02e29506cd257d01461 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fiete=20B=C3=B6rner?= Date: Sun, 5 Dec 2021 17:31:27 +0100 Subject: [PATCH 1/2] fix(vue-server-renderer): do not hyphenate or omit CSS variables in style attribute close #12374 --- src/platforms/web/server/modules/style.js | 7 +++++-- test/ssr/ssr-basic-renderer.spec.js | 13 +++++++++++++ 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/src/platforms/web/server/modules/style.js b/src/platforms/web/server/modules/style.js index 4c7c2bbbadc..57b91cd74fe 100644 --- a/src/platforms/web/server/modules/style.js +++ b/src/platforms/web/server/modules/style.js @@ -4,11 +4,13 @@ import { escape, noUnitNumericStyleProps } from '../util' import { hyphenate } from 'shared/util' import { getStyle } from 'web/util/style' +const cssVarRE = /^--/ + export function genStyle (style: Object): string { let styleText = '' for (const key in style) { const value = style[key] - const hyphenatedKey = hyphenate(key) + const hyphenatedKey = cssVarRE.test(key) ? key : hyphenate(key) if (Array.isArray(value)) { for (let i = 0, len = value.length; i < len; i++) { styleText += normalizeValue(hyphenatedKey, value[i]) @@ -23,7 +25,8 @@ export function genStyle (style: Object): string { function normalizeValue(key: string, value: any): string { if ( typeof value === 'string' || - (typeof value === 'number' && noUnitNumericStyleProps[key]) || + (typeof value === 'number' && noUnitNumericStyleProps[key]) || // accept numeric values for configured css attributes + (typeof value === 'number' && cssVarRE.test(key)) || // accept numeric values for all CSS variables value === 0 ) { return `${key}:${value};` diff --git a/test/ssr/ssr-basic-renderer.spec.js b/test/ssr/ssr-basic-renderer.spec.js index 04c8d80e6a7..c755f81928e 100644 --- a/test/ssr/ssr-basic-renderer.spec.js +++ b/test/ssr/ssr-basic-renderer.spec.js @@ -67,4 +67,17 @@ describe('SSR: basicRenderer', () => { done() }) }) + + // #12374 + it('should keep CSS variables in style attributes', done => { + renderToString(new Vue({ + template: ` +
+ `, + }), (err, html) => { + expect(err).toBeNull() + expect(html).toContain('style="z-index:1;--css-var1:1;--css_var2:2;--cssVar3:3;"') + done() + }) + }) }) From 56569562b903f3f2126bbe3742a7047dacc2ea7e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fiete=20B=C3=B6rner?= Date: Sat, 15 Jan 2022 22:17:17 +0100 Subject: [PATCH 2/2] refactor: apply CR fixes --- src/platforms/web/server/modules/style.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/platforms/web/server/modules/style.js b/src/platforms/web/server/modules/style.js index 57b91cd74fe..9dcbf092c3f 100644 --- a/src/platforms/web/server/modules/style.js +++ b/src/platforms/web/server/modules/style.js @@ -10,7 +10,7 @@ export function genStyle (style: Object): string { let styleText = '' for (const key in style) { const value = style[key] - const hyphenatedKey = cssVarRE.test(key) ? key : hyphenate(key) + const hyphenatedKey = cssVarRE.test(key) ? key : hyphenate(key) if (Array.isArray(value)) { for (let i = 0, len = value.length; i < len; i++) { styleText += normalizeValue(hyphenatedKey, value[i]) @@ -25,8 +25,7 @@ export function genStyle (style: Object): string { function normalizeValue(key: string, value: any): string { if ( typeof value === 'string' || - (typeof value === 'number' && noUnitNumericStyleProps[key]) || // accept numeric values for configured css attributes - (typeof value === 'number' && cssVarRE.test(key)) || // accept numeric values for all CSS variables + (typeof value === 'number' && (noUnitNumericStyleProps[key] || cssVarRE.test(key))) || value === 0 ) { return `${key}:${value};`