Repository: facebook/stylex (JavaScript)

Issue:
styles with numeric or kebab-case keys does not work anymore 
### Describe the issue

styles with numeric or kebab-case keys does not work anymore since `"@stylexjs/postcss-plugin": "^0.11.0"`:


### Expected behavior

Styles should work.

### Steps to reproduce

* Clone https://github.com/hrasoa/stylex-repro
* `pnpm dev`
* load the page, styles are not working and console output errors:
```
Style node path not found for key: 1
Style node path not found for key: color-red
Style node path not found for key: 1
Style node path not found for key: color-red
```

### Test case

_No response_

### Additional comments

_No response_


Discussion:
That warning is coming from the new debugging code here https://github.com/facebook/stylex/blob/04745f079f39df899c6cad47f7985434a847646a/packages/babel-plugin/src/utils/add-sourcemap-data.js#L79

I wonder why there's no source map info discoverable for those keys. But the fix is relatively simple to make sure the style object is still populated even if no source map data is produced
```js
function addSourceMapData(obj, babelPath, state) {
  console.log('obj', obj);
  …
  const styleNodePath = babelPath.get('arguments.0.properties').find(prop => {
      console.log(prop.node.key);
```
Looks like they dont have a `key.name`:
```js
obj {
  '1': { backgroundColor: 'backgroundColor-x1t391ir', '$$css': true },
  'color-red': { color: 'color-xfg0bab', '$$css': true },
}
```

```js
Node {
  type: 'NumericLiteral',
  start: 184,
  end: 185,
  loc: SourceLocation {
    start: Position { line: 8, column: 2, index: 184 },
    end: Position { line: 8, column: 3, index: 185 },
    filename: undefined,
    identifierName: undefined
  },
  extra: { rawValue: 1, raw: '1' },
  value: 1,
  leadingComments: undefined,
  innerComments: undefined,
  trailingComments: undefined
}
Style node path not found for key: 1
Node {
  type: 'StringLiteral',
  start: 135,
  end: 146,
  loc: SourceLocation {
    start: Position { line: 5, column: 2, index: 135 },
    end: Position { line: 5, column: 13, index: 146 },
    filename: undefined,
    identifierName: undefined
  },
  extra: { rawValue: 'color-red', raw: '"color-red"' },
  value: 'color-red',
  leadingComments: undefined,
  innerComments: undefined,
  trailingComments: undefined
}
Style node path not found for key: color-red
```




Patch:
diff --git a/packages/babel-plugin/src/utils/add-sourcemap-data.js b/packages/babel-plugin/src/utils/add-sourcemap-data.js
index d180c385d..5253448b3 100644
--- a/packages/babel-plugin/src/utils/add-sourcemap-data.js
+++ b/packages/babel-plugin/src/utils/add-sourcemap-data.js
@@ -73,42 +73,49 @@ export function addSourceMapData(
       // $FlowIgnore
       .get('arguments.0.properties')
       // $FlowIgnore
-      .find((prop) => prop.node.key.name === key);
+      .find((prop) => {
+        return (
+          prop.node.key.name === key ||
+          // string and number properties (normalized to string)
+          String(prop.node.key.value) === key
+        );
+      });
 
-    if (!styleNodePath) {
-      console.warn(`Style node path not found for key: ${key}`);
-      continue;
-    }
-    const generatedLineNumber = styleNodePath.node.loc?.start.line;
+    if (styleNodePath) {
+      const generatedLineNumber = styleNodePath.node.loc?.start.line;
 
-    // Find the original line number in the source
-    let originalLineNumber = generatedLineNumber;
-    if (sourceMap && originalLineNumber) {
-      const originalPosition = sourceMap.originalPositionFor({
-        line: generatedLineNumber,
-        column: styleNodePath.node.loc?.start.column,
-      });
-      if (originalPosition && originalPosition.line !== null) {
-        originalLineNumber = originalPosition.line;
-      } else {
-        console.warn(
-          `Could not determine original line number for key: ${key}`,
-        );
+      // Find the original line number in the source
+      let originalLineNumber = generatedLineNumber;
+      if (sourceMap && originalLineNumber) {
+        const originalPosition = sourceMap.originalPositionFor({
+          line: generatedLineNumber,
+          column: styleNodePath.node.loc?.start.column,
+        });
+        if (originalPosition && originalPosition.line !== null) {
+          originalLineNumber = originalPosition.line;
+        } else {
+          console.warn(
+            `Could not determine original line number for key: ${key}`,
+          );
+        }
       }
-    }
 
-    // Add the file name and line number information to the compiled style
-    const shortFilename = createShortFilename(
-      currentFile.opts.filename || '',
-      state,
-    );
-    result[key] = {
-      ...value,
-      $$css:
-        shortFilename !== '' && originalLineNumber
-          ? `${shortFilename}:${originalLineNumber}`
-          : true,
-    };
+      // Add the file name and line number information to the compiled style
+      const shortFilename = createShortFilename(
+        currentFile.opts.filename || '',
+        state,
+      );
+      result[key] = {
+        ...value,
+        $$css:
+          shortFilename !== '' && originalLineNumber
+            ? `${shortFilename}:${originalLineNumber}`
+            : true,
+      };
+    } else {
+      // fallback in case no sourcemap data is found
+      result[key] = value;
+    }
   }
   return result;
 }


Test patch:
diff --git a/packages/babel-plugin/__tests__/stylex-transform-create-test.js b/packages/babel-plugin/__tests__/stylex-transform-create-test.js
index 88ac7d3ab..a7848553f 100644
--- a/packages/babel-plugin/__tests__/stylex-transform-create-test.js
+++ b/packages/babel-plugin/__tests__/stylex-transform-create-test.js
@@ -45,7 +45,13 @@ describe('@stylexjs/babel-plugin', () => {
           import stylex from 'stylex';
           export const styles = stylex.create({
             foo: {
-              position: stylex.firstThatWorks('sticky', 'fixed'),
+              color: 'red'
+            },
+            'bar-baz': {
+              display: 'block'
+            },
+            1: {
+              fontSize: '1em'
             }
           });
         `,
@@ -59,11 +65,21 @@ describe('@stylexjs/babel-plugin', () => {
         "import _inject from "@stylexjs/stylex/lib/stylex-inject";
         var _inject2 = _inject;
         import stylex from 'stylex';
-        _inject2(".position-x15oojuh{position:fixed;position:sticky}", 3000);
+        _inject2(".fontSize-xrv4cvt{font-size:1em}", 3000);
+        _inject2(".color-x1e2nbdu{color:red}", 3000);
+        _inject2(".display-x1lliihq{display:block}", 3000);
         export const styles = {
+          "1": {
+            fontSize: "fontSize-xrv4cvt",
+            $$css: "Foo.react.js:10"
+          },
           foo: {
-            position: "position-x15oojuh",
+            color: "color-x1e2nbdu",
             $$css: "Foo.react.js:4"
+          },
+          "bar-baz": {
+            display: "display-x1lliihq",
+            $$css: "Foo.react.js:7"
           }
         };"
       `);
@@ -74,7 +90,13 @@ describe('@stylexjs/babel-plugin', () => {
           import stylex from 'stylex';
           export const styles = stylex.create({
             foo: {
-              position: stylex.firstThatWorks('sticky', 'fixed'),
+              color: 'red'
+            },
+            'bar-baz': {
+              display: 'block'
+            },
+            1: {
+              fontSize: '1em'
             }
           });
         `,
@@ -89,24 +111,40 @@ describe('@stylexjs/babel-plugin', () => {
         "import _inject from "@stylexjs/stylex/lib/stylex-inject";
         var _inject2 = _inject;
         import stylex from 'stylex';
-        _inject2(".position-x15oojuh{position:fixed;position:sticky}", 3000);
+        _inject2(".fontSize-xrv4cvt{font-size:1em}", 3000);
+        _inject2(".color-x1e2nbdu{color:red}", 3000);
+        _inject2(".display-x1lliihq{display:block}", 3000);
         export const styles = {
+          "1": {
+            fontSize: "fontSize-xrv4cvt",
+            $$css: "npm-package:components/Foo.react.js:10"
+          },
           foo: {
-            position: "position-x15oojuh",
+            color: "color-x1e2nbdu",
             $$css: "npm-package:components/Foo.react.js:4"
+          },
+          "bar-baz": {
+            display: "display-x1lliihq",
+            $$css: "npm-package:components/Foo.react.js:7"
           }
         };"
       `);
     });
 
-    test('supports debug data (haste)', () => {
+    test('supports debug data (commonJS)', () => {
       expect(
         transform(
           `
           import stylex from 'stylex';
           export const styles = stylex.create({
             foo: {
-              position: stylex.firstThatWorks('sticky', 'fixed'),
+              color: 'red'
+            },
+            'bar-baz': {
+              display: 'block'
+            },
+            1: {
+              fontSize: '1em'
             }
           });
         `,
@@ -120,11 +158,21 @@ describe('@stylexjs/babel-plugin', () => {
         "import _inject from "@stylexjs/stylex/lib/stylex-inject";
         var _inject2 = _inject;
         import stylex from 'stylex';
-        _inject2(".position-x15oojuh{position:fixed;position:sticky}", 3000);
+        _inject2(".fontSize-xrv4cvt{font-size:1em}", 3000);
+        _inject2(".color-x1e2nbdu{color:red}", 3000);
+        _inject2(".display-x1lliihq{display:block}", 3000);
         export const styles = {
+          "1": {
+            fontSize: "fontSize-xrv4cvt",
+            $$css: "components/Foo.react.js:10"
+          },
           foo: {
-            position: "position-x15oojuh",
+            color: "color-x1e2nbdu",
             $$css: "components/Foo.react.js:4"
+          },
+          "bar-baz": {
+            display: "display-x1lliihq",
+            $$css: "components/Foo.react.js:7"
           }
         };"
       `);
@@ -135,7 +183,13 @@ describe('@stylexjs/babel-plugin', () => {
           import stylex from 'stylex';
           export const styles = stylex.create({
             foo: {
-              position: stylex.firstThatWorks('sticky', 'fixed'),
+              color: 'red'
+            },
+            'bar-baz': {
+              display: 'block'
+            },
+            1: {
+              fontSize: '1em'
             }
           });
         `,
@@ -150,11 +204,21 @@ describe('@stylexjs/babel-plugin', () => {
         "import _inject from "@stylexjs/stylex/lib/stylex-inject";
         var _inject2 = _inject;
         import stylex from 'stylex';
-        _inject2(".position-x15oojuh{position:fixed;position:sticky}", 3000);
+        _inject2(".fontSize-xrv4cvt{font-size:1em}", 3000);
+        _inject2(".color-x1e2nbdu{color:red}", 3000);
+        _inject2(".display-x1lliihq{display:block}", 3000);
         export const styles = {
+          "1": {
+            fontSize: "fontSize-xrv4cvt",
+            $$css: "npm-package:components/Foo.react.js:10"
+          },
           foo: {
-            position: "position-x15oojuh",
+            color: "color-x1e2nbdu",
             $$css: "npm-package:components/Foo.react.js:4"
+          },
+          "bar-baz": {
+            display: "display-x1lliihq",
+            $$css: "npm-package:components/Foo.react.js:7"
           }
         };"
       `);