fix: Don't add units number values used for variables

packages/babel-plugin/__tests__/stylex-transform-create-test.js

@@ -21,7 +21,18 @@ function transform(source, opts = {}) {
     parserOpts: {
       flow: 'all',
     },
-    plugins: [flowPlugin, [stylexPlugin, { runtimeInjection: true, ...opts }]],
+    babelrc: false,
+    plugins: [
+      flowPlugin,
+      [
+        stylexPlugin,
+        {
+          runtimeInjection: true,
+          unstable_moduleResolution: { type: 'haste' },
+          ...opts,
+        },
+      ],
+    ],
   }).code;
 }
 
@@ -163,6 +174,32 @@ describe('@stylexjs/babel-plugin', () => {
       `);
     });
 
+    test('does not add unit when setting variable value', () => {
+      expect(
+        transform(
+          `
+          import * as stylex from '@stylexjs/stylex';
+          import {vars} from 'myTheme.stylex.js';
+
+          const styles = stylex.create({
+            default: {
+              [vars.foo]: 500,
+            },
+          });
+        `,
+          {
+            filename: 'MyComponent.js',
+          },
+        ),
+      ).toMatchInlineSnapshot(`
+        "import _inject from "@stylexjs/stylex/lib/stylex-inject";
+        var _inject2 = _inject;
+        import * as stylex from '@stylexjs/stylex';
+        import { vars } from 'myTheme.stylex.js';
+        _inject2(".x4b9xku{--x1w7bng0:500}", 1);"
+      `);
+    });
+
     test('handles camelCased transition properties', () => {
       const camelCased = transform(`
         import stylex from 'stylex';

packages/shared/__tests__/stylex-create-test.js

@@ -348,6 +348,32 @@ describe('stylex-create-test', () => {
     `);
   });
 
+  test('does not add units to variable value', () => {
+    expect(
+      styleXCreate({
+        default: {
+          '--foo': 500,
+        },
+      }),
+    ).toMatchInlineSnapshot(`
+      [
+        {
+          "default": {
+            "$$css": true,
+            "--foo": "xwzgxvi",
+          },
+        },
+        {
+          "xwzgxvi": {
+            "ltr": ".xwzgxvi{--foo:500}",
+            "priority": 1,
+            "rtl": null,
+          },
+        },
+      ]
+    `);
+  });
+
   test('transforms nested pseudo-class to CSS', () => {
     expect(
       styleXCreate({

packages/shared/src/transform-value.js

@@ -50,7 +50,7 @@ export default function transformValue(
 }
 
 export function getNumberSuffix(key: string): string {
-  if (unitlessNumberProperties.has(key)) {
+  if (unitlessNumberProperties.has(key) || key.startsWith('--')) {
     return '';
   }
   if (!(key in numberPropertySuffixes)) {