From 4ff1333c98c47cd7bc5d76ea9c76399522ba369a Mon Sep 17 00:00:00 2001
From: Naman Goel <nmn@users.noreply.github.com>
Date: Sat, 4 Jan 2025 16:17:25 +0300
Subject: [PATCH] fix: preserve camelCased Variable names when being assigned a
 value in stylex.create

---
 apps/nextjs-example/app/CardTokens.stylex.ts  |  2 +-
 apps/nextjs-example/components/Card.tsx       |  4 +-
 .../__tests__/stylex-transform-create-test.js | 47 +++++++++++++++++++
 packages/shared/src/convert-to-className.js   |  2 +-
 4 files changed, 51 insertions(+), 4 deletions(-)

diff --git a/apps/nextjs-example/app/CardTokens.stylex.ts b/apps/nextjs-example/app/CardTokens.stylex.ts
index ef9609290..70ca9268f 100644
--- a/apps/nextjs-example/app/CardTokens.stylex.ts
+++ b/apps/nextjs-example/app/CardTokens.stylex.ts
@@ -10,5 +10,5 @@
 import * as stylex from '@stylexjs/stylex';
 
 export const tokens = stylex.defineVars({
-  arrow_transform: 'translateX(0)',
+  arrowTransform: 'translateX(0)',
 });
diff --git a/apps/nextjs-example/components/Card.tsx b/apps/nextjs-example/components/Card.tsx
index 9382dc9cc..3f2de3e6d 100644
--- a/apps/nextjs-example/components/Card.tsx
+++ b/apps/nextjs-example/components/Card.tsx
@@ -68,7 +68,7 @@ const styles = stylex.create({
     transitionDuration: '400ms',
     textAlign: 'center',
     textDecoration: 'none',
-    [tokens.arrow_transform]: {
+    [tokens.arrowTransform]: {
       default: 'translateX(0)',
       ':hover': 'translateX(4px)',
     },
@@ -85,7 +85,7 @@ const styles = stylex.create({
   span: {
     display: 'inline-block',
     transitionProperty: 'transform',
-    transform: tokens.arrow_transform,
+    transform: tokens.arrowTransform,
     transitionDuration: {
       default: '200ms',
       [REDUCE_MOTION]: '0s',
diff --git a/packages/babel-plugin/__tests__/stylex-transform-create-test.js b/packages/babel-plugin/__tests__/stylex-transform-create-test.js
index a16c04397..1f8fbebac 100644
--- a/packages/babel-plugin/__tests__/stylex-transform-create-test.js
+++ b/packages/babel-plugin/__tests__/stylex-transform-create-test.js
@@ -1652,4 +1652,51 @@ describe('@stylexjs/babel-plugin', () => {
       `);
     });
   });
+
+  describe('[transform] setting vars with stylex.create()', () => {
+    test('preserves kebab-case in CSS variable names', () => {
+      // NOTE: the generated variable name is a little weird, but valid.
+      expect(
+        transform(`
+          import stylex from 'stylex';
+          export const styles = stylex.create({
+            default: {
+              '--background-color': 'red',
+            },
+          });
+        `),
+      ).toMatchInlineSnapshot(`
+        "import _inject from "@stylexjs/stylex/lib/stylex-inject";
+        var _inject2 = _inject;
+        import stylex from 'stylex';
+        _inject2(".xgau0yw{--background-color:red}", 1);
+        export const styles = {
+          default: {
+            "--background-color": "xgau0yw",
+            $$css: true
+          }
+        };"
+      `);
+    });
+
+    test('preserves camelCase in CSS variable names', () => {
+      expect(
+        transform(`
+          import stylex from 'stylex';
+          const styles = stylex.create({
+            default: {
+              '--myCustomVar': 'red',
+              '--anotherCamelVar': '10px',
+            },
+          });
+        `),
+      ).toMatchInlineSnapshot(`
+        "import _inject from "@stylexjs/stylex/lib/stylex-inject";
+        var _inject2 = _inject;
+        import stylex from 'stylex';
+        _inject2(".x1ujxqga{--myCustomVar:red}", 1);
+        _inject2(".x1g24lt9{--anotherCamelVar:10px}", 1);"
+      `);
+    });
+  });
 });
diff --git a/packages/shared/src/convert-to-className.js b/packages/shared/src/convert-to-className.js
index e45c461a2..7b6179c5c 100644
--- a/packages/shared/src/convert-to-className.js
+++ b/packages/shared/src/convert-to-className.js
@@ -31,7 +31,7 @@ export function convertStyleToClassName(
 ): StyleRule {
   const { classNamePrefix = 'x', debug = false } = options;
   const [key, rawValue] = objEntry;
-  const dashedKey = dashify(key);
+  const dashedKey = key.startsWith('--') ? key : dashify(key);
 
   let value: string | $ReadOnlyArray<string> = Array.isArray(rawValue)
     ? rawValue.map((eachValue) => transformValue(key, eachValue, options))