feat: better dev theme names

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',
+            },
+          });
+        `,
+          { debug: true, ...defaultOpts },
+        ).code,
+      ).toMatchInlineSnapshot(`
+        "import stylex from 'stylex';
+        export const buttonTheme = {
+          bgColor: "var(--xgck17p)",
+          bgColorDisabled: "var(--xpegid5)",
+          cornerRadius: "var(--xrqfjmn)",
+          fgColor: "var(--x4y59db)",
+          __themeName__: "x568ih9"
+        };"
+      `);
+    });
+
     test('transforms variables object in non-haste env', () => {
       expect(
         transform(

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');

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;

packages/shared/__tests__/define-vars/stylex-define-vars-test.js

@@ -186,6 +186,85 @@ 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';

packages/shared/src/stylex-define-vars.js

@@ -36,7 +36,7 @@ export default function styleXDefineVars<Vars: VarsConfig>(
   variables: Vars,
   options: $ReadOnly<{ ...Partial<StyleXOptions>, themeName: string, ... }>,
 ): [VarsObject<Vars>, { [string]: InjectableStyle }] {
-  const { classNamePrefix, themeName } = {
+  const { classNamePrefix, themeName, debug } = {
     ...defaultOptions,
     ...options,
   };
@@ -56,7 +56,10 @@ export default function styleXDefineVars<Vars: VarsConfig>(
     // 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] = {