fix: preserve camelCased Variable names when being assigned a value i…

…n stylex.create
facebook · Jan 4, 2025 · 4ff1333 · 4ff1333
1 parent 80992ce
commit 4ff1333
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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))