From 2b19f4bd82acebd990cae7b510ac248bc5664882 Mon Sep 17 00:00:00 2001 From: Melissa Liu Date: Fri, 6 Dec 2024 03:44:48 -0800 Subject: [PATCH] better dev theme names --- .../define-vars/stylex-define-vars-test.js | 150 ++++++++++++++++++ packages/shared/src/stylex-define-vars.js | 62 ++++++-- 2 files changed, 195 insertions(+), 17 deletions(-) diff --git a/packages/shared/__tests__/define-vars/stylex-define-vars-test.js b/packages/shared/__tests__/define-vars/stylex-define-vars-test.js index 8dd27e09..15dc0e68 100644 --- a/packages/shared/__tests__/define-vars/stylex-define-vars-test.js +++ b/packages/shared/__tests__/define-vars/stylex-define-vars-test.js @@ -186,6 +186,156 @@ describe('stylex-define-vars test', () => { `); }); + test('converts set of vars with nested at rules to CSS and includes variable name as prefix in ltr only', () => { + const themeName = 'TestTheme.stylex.js//buttonTheme'; + const classNamePrefix = 'x'; + const defaultVars = { + bgColor: { + default: 'blue', + '@media (prefers-color-scheme: dark)': { + default: 'lightblue', + '@supports (color: oklab(0 0 0))': 'oklab(0.7 -0.3 -0.4)', + }, + '@media print': 'white', + }, + bgColorDisabled: { + default: { + default: 'grey', + '@supports (color: oklab(0 0 0))': 'oklab(0.7 -0.3 -0.4)', + }, + '@media (prefers-color-scheme: dark)': { + default: 'rgba(0, 0, 0, 0.8)', + '@supports (color: oklab(0 0 0))': 'oklab(0.7 -0.3 -0.4)', + }, + }, + cornerRadius: '10px', + fgColor: { + default: 'pink', + }, + }; + const [jsOutput, cssOutput] = styleXDefineVars(defaultVars, { + themeName, + debug: true, + }); + + expect(jsOutput).toEqual({ + __themeName__: classNamePrefix + createHash(themeName), + bgColor: `var(--${classNamePrefix + createHash(`${themeName}.bgColor`)})`, + bgColorDisabled: `var(--${ + classNamePrefix + createHash(`${themeName}.bgColorDisabled`) + })`, + cornerRadius: `var(--${ + classNamePrefix + createHash(`${themeName}.cornerRadius`) + })`, + fgColor: `var(--${classNamePrefix + createHash(`${themeName}.fgColor`)})`, + }); + + expect(cssOutput).toMatchInlineSnapshot(` + { + "bgColor-x568ih9": { + "ltr": ":root, .bgColor-x568ih9{--xgck17p:blue;--xpegid5:grey;--xrqfjmn:10px;--x4y59db:pink;}", + "priority": 0, + "rtl": null, + }, + "bgColor-x568ih9-1e6ryz3": { + "ltr": "@supports (color: oklab(0 0 0)){@media (prefers-color-scheme: dark){:root, .bgColor-x568ih9{--xgck17p:oklab(0.7 -0.3 -0.4);--xpegid5:oklab(0.7 -0.3 -0.4);}}}", + "priority": 0.2, + "rtl": null, + }, + "bgColor-x568ih9-1lveb7": { + "ltr": "@media (prefers-color-scheme: dark){:root, .bgColor-x568ih9{--xgck17p:lightblue;--xpegid5:rgba(0, 0, 0, 0.8);}}", + "priority": 0.1, + "rtl": null, + }, + "bgColor-x568ih9-bdddrq": { + "ltr": "@media print{:root, .bgColor-x568ih9{--xgck17p:white;}}", + "priority": 0.1, + "rtl": null, + }, + "bgColor-x568ih9-kpd015": { + "ltr": "@supports (color: oklab(0 0 0)){:root, .bgColor-x568ih9{--xpegid5:oklab(0.7 -0.3 -0.4);}}", + "priority": 0.1, + "rtl": null, + }, + "bgColorDisabled-x568ih9": { + "ltr": ":root, .bgColorDisabled-x568ih9{--xgck17p:blue;--xpegid5:grey;--xrqfjmn:10px;--x4y59db:pink;}", + "priority": 0, + "rtl": null, + }, + "bgColorDisabled-x568ih9-1e6ryz3": { + "ltr": "@supports (color: oklab(0 0 0)){@media (prefers-color-scheme: dark){:root, .bgColorDisabled-x568ih9{--xgck17p:oklab(0.7 -0.3 -0.4);--xpegid5:oklab(0.7 -0.3 -0.4);}}}", + "priority": 0.2, + "rtl": null, + }, + "bgColorDisabled-x568ih9-1lveb7": { + "ltr": "@media (prefers-color-scheme: dark){:root, .bgColorDisabled-x568ih9{--xgck17p:lightblue;--xpegid5:rgba(0, 0, 0, 0.8);}}", + "priority": 0.1, + "rtl": null, + }, + "bgColorDisabled-x568ih9-bdddrq": { + "ltr": "@media print{:root, .bgColorDisabled-x568ih9{--xgck17p:white;}}", + "priority": 0.1, + "rtl": null, + }, + "bgColorDisabled-x568ih9-kpd015": { + "ltr": "@supports (color: oklab(0 0 0)){:root, .bgColorDisabled-x568ih9{--xpegid5:oklab(0.7 -0.3 -0.4);}}", + "priority": 0.1, + "rtl": null, + }, + "cornerRadius-x568ih9": { + "ltr": ":root, .cornerRadius-x568ih9{--xgck17p:blue;--xpegid5:grey;--xrqfjmn:10px;--x4y59db:pink;}", + "priority": 0, + "rtl": null, + }, + "cornerRadius-x568ih9-1e6ryz3": { + "ltr": "@supports (color: oklab(0 0 0)){@media (prefers-color-scheme: dark){:root, .cornerRadius-x568ih9{--xgck17p:oklab(0.7 -0.3 -0.4);--xpegid5:oklab(0.7 -0.3 -0.4);}}}", + "priority": 0.2, + "rtl": null, + }, + "cornerRadius-x568ih9-1lveb7": { + "ltr": "@media (prefers-color-scheme: dark){:root, .cornerRadius-x568ih9{--xgck17p:lightblue;--xpegid5:rgba(0, 0, 0, 0.8);}}", + "priority": 0.1, + "rtl": null, + }, + "cornerRadius-x568ih9-bdddrq": { + "ltr": "@media print{:root, .cornerRadius-x568ih9{--xgck17p:white;}}", + "priority": 0.1, + "rtl": null, + }, + "cornerRadius-x568ih9-kpd015": { + "ltr": "@supports (color: oklab(0 0 0)){:root, .cornerRadius-x568ih9{--xpegid5:oklab(0.7 -0.3 -0.4);}}", + "priority": 0.1, + "rtl": null, + }, + "fgColor-x568ih9": { + "ltr": ":root, .fgColor-x568ih9{--xgck17p:blue;--xpegid5:grey;--xrqfjmn:10px;--x4y59db:pink;}", + "priority": 0, + "rtl": null, + }, + "fgColor-x568ih9-1e6ryz3": { + "ltr": "@supports (color: oklab(0 0 0)){@media (prefers-color-scheme: dark){:root, .fgColor-x568ih9{--xgck17p:oklab(0.7 -0.3 -0.4);--xpegid5:oklab(0.7 -0.3 -0.4);}}}", + "priority": 0.2, + "rtl": null, + }, + "fgColor-x568ih9-1lveb7": { + "ltr": "@media (prefers-color-scheme: dark){:root, .fgColor-x568ih9{--xgck17p:lightblue;--xpegid5:rgba(0, 0, 0, 0.8);}}", + "priority": 0.1, + "rtl": null, + }, + "fgColor-x568ih9-bdddrq": { + "ltr": "@media print{:root, .fgColor-x568ih9{--xgck17p:white;}}", + "priority": 0.1, + "rtl": null, + }, + "fgColor-x568ih9-kpd015": { + "ltr": "@supports (color: oklab(0 0 0)){:root, .fgColor-x568ih9{--xpegid5:oklab(0.7 -0.3 -0.4);}}", + "priority": 0.1, + "rtl": null, + }, + } + `); + }); + test('converts set of typed vars with nested at rules to CSS', () => { const themeName = 'TestTheme.stylex.js//buttonTheme'; const classNamePrefix = 'x'; diff --git a/packages/shared/src/stylex-define-vars.js b/packages/shared/src/stylex-define-vars.js index 76b21676..ceb25d58 100644 --- a/packages/shared/src/stylex-define-vars.js +++ b/packages/shared/src/stylex-define-vars.js @@ -36,11 +36,16 @@ export default function styleXDefineVars( variables: Vars, options: $ReadOnly<{ ...Partial, themeName: string, ... }>, ): [VarsObject, { [string]: InjectableStyle }] { - const { classNamePrefix, themeName } = { + const { classNamePrefix, themeName, debug } = { ...defaultOptions, ...options, }; + console.log(defaultOptions); + console.log(options); + + console.log('debug', debug); + const themeNameHash = classNamePrefix + createHash(themeName); const typedVariables: { @@ -51,9 +56,21 @@ export default function styleXDefineVars( } = {}; const variablesMap: { - +[string]: { +nameHash: string, +value: VarsConfigValue }, + +[string]: { + +nameHash: string, + +value: VarsConfigValue, + +themeNamePrefix: string, + }, } = objMap(variables, (value, key) => { // Created hashed variable names with fileName//themeName//key + + const processedKey = key.startsWith('--') ? key.slice(2) : key; + console.log('debug', debug); + + const themeNamePrefix = debug ? `${processedKey}` : ''; + + console.log('themeNamePrefix', themeNamePrefix); + const nameHash = key.startsWith('--') ? key.slice(2) : classNamePrefix + createHash(`${themeName}.${key}`); @@ -63,9 +80,9 @@ export default function styleXDefineVars( initialValue: getDefaultValue(v.value), syntax: v.syntax, }; - return { nameHash, value: v.value }; + return { nameHash, value: v.value, themeNamePrefix }; } - return { nameHash, value: value as $FlowFixMe }; + return { nameHash, value: value as $FlowFixMe, themeNamePrefix }; }); const themeVariablesObject = objMap( @@ -95,9 +112,14 @@ export default function styleXDefineVars( { ...injectableTypes, ...injectableStyles }, ]; } - function constructCssVariablesString( - variables: { +[string]: { +nameHash: string, +value: VarsConfigValue } }, + variables: { + +[string]: { + +nameHash: string, + +value: VarsConfigValue, + +themeNamePrefix: string, + }, + }, themeNameHash: string, ): { [string]: InjectableStyle } { const rulesByAtRule: { [string]: Array } = {}; @@ -110,18 +132,24 @@ function constructCssVariablesString( for (const [atRule, value] of Object.entries(rulesByAtRule)) { const suffix = atRule === 'default' ? '' : `-${createHash(atRule)}`; - const selector = `:root, .${themeNameHash}`; - - let ltr = `${selector}{${value.join('')}}`; - if (atRule !== 'default') { - ltr = wrapWithAtRules(ltr, atRule); + for (const [_, { themeNamePrefix }] of Object.entries(variables)) { + console.log('themeNamePrefix', themeNamePrefix); + const themeNameHashWithPrefix = themeNamePrefix + ? `${themeNamePrefix}-${themeNameHash}` + : themeNameHash; + const selector = `:root, .${themeNameHashWithPrefix}`; + + let ltr = `${selector}{${value.join('')}}`; + if (atRule !== 'default') { + ltr = wrapWithAtRules(ltr, atRule); + } + + result[themeNameHashWithPrefix + suffix] = { + ltr, + rtl: null, + priority: priorityForAtRule(atRule) * 0.1, + }; } - - result[themeNameHash + suffix] = { - ltr, - rtl: null, - priority: priorityForAtRule(atRule) * 0.1, - }; } return result;