fix: disable debug classnames in stylex-define-vars

Author: mellyeliu

packages/babel-plugin/src/utils/evaluate-path.js

@@ -172,10 +172,10 @@ function evaluateThemeRef(
         ? utils.genFileBasedIdentifier({ fileName, exportName })
         : utils.genFileBasedIdentifier({ fileName, exportName, key });
 
-    const debug = state.traversalState.options.debug;
+    const {debug, enableDebugClassNames}  = state.traversalState.options;
 
     const varName =
-      debug === true
+      debug && enableDebugClassNames
         ? key +
           '-' +
           state.traversalState.options.classNamePrefix +

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

@@ -261,6 +261,82 @@ describe('stylex-define-vars test', () => {
     `);
   });
 
+  test('converts set of vars with nested at rules to CSS and does not include key prefix in debug mode with debug classnames off', () => {
+    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,
+      enableDebugClassNames: false,
+      debug: false,
+    });
+
+    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(`
+      {
+        "x568ih9": {
+          "ltr": ":root, .x568ih9{--xgck17p:blue;--xpegid5:grey;--xrqfjmn:10px;--x4y59db:pink;}",
+          "priority": 0,
+          "rtl": null,
+        },
+        "x568ih9-1e6ryz3": {
+          "ltr": "@supports (color: oklab(0 0 0)){@media (prefers-color-scheme: dark){:root, .x568ih9{--xgck17p:oklab(0.7 -0.3 -0.4);--xpegid5:oklab(0.7 -0.3 -0.4);}}}",
+          "priority": 0.2,
+          "rtl": null,
+        },
+        "x568ih9-1lveb7": {
+          "ltr": "@media (prefers-color-scheme: dark){:root, .x568ih9{--xgck17p:lightblue;--xpegid5:rgba(0, 0, 0, 0.8);}}",
+          "priority": 0.1,
+          "rtl": null,
+        },
+        "x568ih9-bdddrq": {
+          "ltr": "@media print{:root, .x568ih9{--xgck17p:white;}}",
+          "priority": 0.1,
+          "rtl": null,
+        },
+        "x568ih9-kpd015": {
+          "ltr": "@supports (color: oklab(0 0 0)){:root, .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';

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, debug } = {
+  const { classNamePrefix, themeName, debug, enableDebugClassNames } = {
     ...defaultOptions,
     ...options,
   };
@@ -56,7 +56,7 @@ export default function styleXDefineVars<Vars: VarsConfig>(
     // Created hashed variable names with fileName//themeName//key
     const nameHash = key.startsWith('--')
       ? key.slice(2)
-      : debug
+      : debug && enableDebugClassNames
         ? key + '-' + classNamePrefix + createHash(`${themeName}.${key}`)
         : classNamePrefix + createHash(`${themeName}.${key}`);