Merge pull request #940 from facebook/fix/num-var-prefix

fix: Escape special characters from debug var names

Author: nmn

packages/babel-plugin/__tests__/stylex-transform-define-vars-test.js

@@ -317,6 +317,41 @@ describe('@stylexjs/babel-plugin', () => {
       `);
     });
 
+    test('transforms variables object with numeric keys and add stylex.inject in debug mode', () => {
+      expect(
+        transform(
+          `
+          import stylex from 'stylex';
+          export const buttonTheme = stylex.defineVars({
+            '10': {
+              default: 'blue',
+              '@media (prefers-color-scheme: dark)': 'lightblue',
+              '@media print': 'white',
+            },
+            '1.5 pixels': {
+              default: 'grey',
+              '@media (prefers-color-scheme: dark)': 'rgba(0, 0, 0, 0.8)',
+            },
+            'corner#radius': 10,
+            '@@primary': {
+              default: 'pink',
+            },
+          });
+        `,
+          { ...defaultOpts, debug: true },
+        ).code,
+      ).toMatchInlineSnapshot(`
+        "import stylex from 'stylex';
+        export const buttonTheme = {
+          "10": "var(--_10-xhaj83f)",
+          "1.5 pixels": "var(--_1_5_pixels-xhrybbu)",
+          "corner#radius": "var(--corner_radius-x19gjwfn)",
+          "@@primary": "var(--__primary-x9xh8rb)",
+          __themeName__: "x568ih9"
+        };"
+      `);
+    });
+
     test('transforms variables object in non-haste env', () => {
       expect(
         transform(

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

@@ -174,9 +174,13 @@ function evaluateThemeRef(
 
     const { debug, enableDebugClassNames } = state.traversalState.options;
 
+    const varSafeKey = (
+      key[0] >= '0' && key[0] <= '9' ? `_${key}` : key
+    ).replace(/[^a-zA-Z0-9]/g, '_');
+
     const varName =
       debug && enableDebugClassNames
-        ? key +
+        ? varSafeKey +
           '-' +
           state.traversalState.options.classNamePrefix +
           utils.hash(strToHash)

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

@@ -53,11 +53,13 @@ export default function styleXDefineVars<Vars: VarsConfig>(
   const variablesMap: {
     +[string]: { +nameHash: string, +value: VarsConfigValue },
   } = objMap(variables, (value, key) => {
-    // Created hashed variable names with fileName//themeName//key
+    const varSafeKey = (
+      key[0] >= '0' && key[0] <= '9' ? `_${key}` : key
+    ).replace(/[^a-zA-Z0-9]/g, '_');
     const nameHash = key.startsWith('--')
       ? key.slice(2)
       : debug && enableDebugClassNames
-        ? key + '-' + classNamePrefix + createHash(`${themeName}.${key}`)
+        ? varSafeKey + '-' + classNamePrefix + createHash(`${themeName}.${key}`)
         : classNamePrefix + createHash(`${themeName}.${key}`);
 
     if (isCSSType(value)) {