From a21e739378def043298c6d71cf334102ef289e38 Mon Sep 17 00:00:00 2001 From: melissa Date: Mon, 16 Dec 2024 13:02:19 -0800 Subject: [PATCH] feat: better dev theme names (#803) * prefix dev classnames with property name * added debug config and babel tests * add caching to default path --- .../stylex-transform-define-vars-test.js | 36 +++++++++ .../src/utils/__tests__/state-manager.test.js | 12 +++ .../babel-plugin/src/utils/evaluate-path.js | 9 ++- .../define-vars/stylex-define-vars-test.js | 75 +++++++++++++++++++ packages/shared/src/stylex-define-vars.js | 7 +- 5 files changed, 136 insertions(+), 3 deletions(-) diff --git a/packages/babel-plugin/__tests__/stylex-transform-define-vars-test.js b/packages/babel-plugin/__tests__/stylex-transform-define-vars-test.js index c1030804..78c95553 100644 --- a/packages/babel-plugin/__tests__/stylex-transform-define-vars-test.js +++ b/packages/babel-plugin/__tests__/stylex-transform-define-vars-test.js @@ -18,6 +18,7 @@ const classNamePrefix = 'x'; const defaultOpts = { unstable_moduleResolution: { type: 'haste' }, classNamePrefix, + debug: false, }; const rootDir = '/stylex/packages/'; @@ -279,6 +280,41 @@ describe('@stylexjs/babel-plugin', () => { `); }); + test('transforms variables object and add stylex.inject in debug mode', () => { + expect( + transform( + ` + import stylex from 'stylex'; + export const buttonTheme = stylex.defineVars({ + bgColor: { + default: 'blue', + '@media (prefers-color-scheme: dark)': 'lightblue', + '@media print': 'white', + }, + bgColorDisabled: { + default: 'grey', + '@media (prefers-color-scheme: dark)': 'rgba(0, 0, 0, 0.8)', + }, + cornerRadius: 10, + fgColor: { + default: 'pink', + }, + }); + `, + { ...defaultOpts, debug: true }, + ).code, + ).toMatchInlineSnapshot(` + "import stylex from 'stylex'; + export const buttonTheme = { + bgColor: "var(--bgColor-xgck17p)", + bgColorDisabled: "var(--bgColorDisabled-xpegid5)", + cornerRadius: "var(--cornerRadius-xrqfjmn)", + fgColor: "var(--fgColor-x4y59db)", + __themeName__: "x568ih9" + };" + `); + }); + test('transforms variables object in non-haste env', () => { expect( transform( diff --git a/packages/babel-plugin/src/utils/__tests__/state-manager.test.js b/packages/babel-plugin/src/utils/__tests__/state-manager.test.js index 8ff408b1..39444edd 100644 --- a/packages/babel-plugin/src/utils/__tests__/state-manager.test.js +++ b/packages/babel-plugin/src/utils/__tests__/state-manager.test.js @@ -12,6 +12,7 @@ import StateManager from '../state-manager'; const defaultConfig = { file: { metadata: {} } as any, key: 'key', + debug: false, opts: {}, cwd: '/home/test/', filename: '/home/test/main.js', @@ -118,6 +119,17 @@ describe('StateManager config parsing', () => { expect(warnings).toEqual([]); }); + + it('parses valid debug option', () => { + const stateManager = makeState({ debug: true }); + expect(stateManager.options.debug).toBe(true); + + const stateManager2 = makeState({ debug: false }); + expect(stateManager2.options.debug).toBe(false); + + expect(warnings).toEqual([]); + }); + it('logs errors on invalid classNamePrefix option', () => { const stateManager = makeState({ classNamePrefix: 1 }); expect(stateManager.options.classNamePrefix).toBe('x'); diff --git a/packages/babel-plugin/src/utils/evaluate-path.js b/packages/babel-plugin/src/utils/evaluate-path.js index 64b0c63e..a9b0de1a 100644 --- a/packages/babel-plugin/src/utils/evaluate-path.js +++ b/packages/babel-plugin/src/utils/evaluate-path.js @@ -164,8 +164,15 @@ function evaluateThemeRef( ? utils.genFileBasedIdentifier({ fileName, exportName }) : utils.genFileBasedIdentifier({ fileName, exportName, key }); + const debug = state.traversalState.options.debug; + const varName = - state.traversalState.options.classNamePrefix + utils.hash(strToHash); + debug === true + ? key + + '-' + + state.traversalState.options.classNamePrefix + + utils.hash(strToHash) + : state.traversalState.options.classNamePrefix + utils.hash(strToHash); if (key === '__themeName__') { return varName; 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..388ba920 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,81 @@ describe('stylex-define-vars test', () => { `); }); + test('converts set of vars with nested at rules to CSS and includes key in variable name as prefix in debug mode', () => { + 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(--bgColor-${classNamePrefix + createHash(`${themeName}.bgColor`)})`, + bgColorDisabled: `var(--bgColorDisabled-${ + classNamePrefix + createHash(`${themeName}.bgColorDisabled`) + })`, + cornerRadius: `var(--cornerRadius-${ + classNamePrefix + createHash(`${themeName}.cornerRadius`) + })`, + fgColor: `var(--fgColor-${classNamePrefix + createHash(`${themeName}.fgColor`)})`, + }); + + expect(cssOutput).toMatchInlineSnapshot(` + { + "x568ih9": { + "ltr": ":root, .x568ih9{--bgColor-xgck17p:blue;--bgColorDisabled-xpegid5:grey;--cornerRadius-xrqfjmn:10px;--fgColor-x4y59db:pink;}", + "priority": 0, + "rtl": null, + }, + "x568ih9-1e6ryz3": { + "ltr": "@supports (color: oklab(0 0 0)){@media (prefers-color-scheme: dark){:root, .x568ih9{--bgColor-xgck17p:oklab(0.7 -0.3 -0.4);--bgColorDisabled-xpegid5:oklab(0.7 -0.3 -0.4);}}}", + "priority": 0.2, + "rtl": null, + }, + "x568ih9-1lveb7": { + "ltr": "@media (prefers-color-scheme: dark){:root, .x568ih9{--bgColor-xgck17p:lightblue;--bgColorDisabled-xpegid5:rgba(0, 0, 0, 0.8);}}", + "priority": 0.1, + "rtl": null, + }, + "x568ih9-bdddrq": { + "ltr": "@media print{:root, .x568ih9{--bgColor-xgck17p:white;}}", + "priority": 0.1, + "rtl": null, + }, + "x568ih9-kpd015": { + "ltr": "@supports (color: oklab(0 0 0)){:root, .x568ih9{--bgColorDisabled-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..b17f7cca 100644 --- a/packages/shared/src/stylex-define-vars.js +++ b/packages/shared/src/stylex-define-vars.js @@ -36,7 +36,7 @@ export default function styleXDefineVars( variables: Vars, options: $ReadOnly<{ ...Partial, themeName: string, ... }>, ): [VarsObject, { [string]: InjectableStyle }] { - const { classNamePrefix, themeName } = { + const { classNamePrefix, themeName, debug } = { ...defaultOptions, ...options, }; @@ -56,7 +56,10 @@ export default function styleXDefineVars( // Created hashed variable names with fileName//themeName//key const nameHash = key.startsWith('--') ? key.slice(2) - : classNamePrefix + createHash(`${themeName}.${key}`); + : debug + ? key + '-' + classNamePrefix + createHash(`${themeName}.${key}`) + : classNamePrefix + createHash(`${themeName}.${key}`); + if (isCSSType(value)) { const v: CSSType<> = value; typedVariables[nameHash] = {