fix(stylex.create): preserve camelCased variable names when being ass…

…igned a value
Dwlad90 · Jan 4, 2025 · f42f8f5 · f42f8f5
1 parent d9d580e
commit f42f8f5
Show file tree

Hide file tree

Showing 14 changed files with 120 additions and 13 deletions.
diff --git a/apps/nextjs-example/app/CardTokens.stylex.ts b/apps/nextjs-example/app/CardTokens.stylex.ts
@@ -1,5 +1,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
@@ -59,7 +59,7 @@ const styles = stylex.create({
     transitionDuration: '400ms',
     textAlign: 'center',
     textDecoration: 'none',
-    [tokens.arrow_transform]: {
+    [tokens.arrowTransform]: {
       default: 'translateX(0)',
       ':hover': 'translateX(4px)',
     },
@@ -76,7 +76,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/apps/nextjs-postcss-example/app/CardTokens.stylex.ts b/apps/nextjs-postcss-example/app/CardTokens.stylex.ts
@@ -9,5 +9,5 @@
 import * as stylex from '@stylexjs/stylex';
 
 export const tokens = stylex.defineVars({
-  arrow_transform: 'translateX(0)',
+  arrowTransform: 'translateX(0)',
 });
diff --git a/apps/nextjs-postcss-example/components/Card.tsx b/apps/nextjs-postcss-example/components/Card.tsx
@@ -67,7 +67,7 @@ const styles = stylex.create({
     transitionDuration: '400ms',
     textAlign: 'center',
     textDecoration: 'none',
-    [tokens.arrow_transform]: {
+    [tokens.arrowTransform]: {
       default: 'translateX(0)',
       ':hover': 'translateX(4px)',
     },
@@ -84,7 +84,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/apps/nextjs-swc-example/app/CardTokens.stylex.ts b/apps/nextjs-swc-example/app/CardTokens.stylex.ts
@@ -1,5 +1,5 @@
 import * as stylex from '@stylexjs/stylex';
 
 export const tokens = stylex.defineVars({
-  arrow_transform: 'translateX(0)',
+  arrowTransform: 'translateX(0)',
 });
diff --git a/apps/nextjs-swc-example/components/Card.tsx b/apps/nextjs-swc-example/components/Card.tsx
@@ -59,7 +59,7 @@ const styles = stylex.create({
     transitionDuration: '400ms',
     textAlign: 'center',
     textDecoration: 'none',
-    [tokens.arrow_transform]: {
+    [tokens.arrowTransform]: {
       default: 'translateX(0)',
       ':hover': 'translateX(4px)',
     },
@@ -76,7 +76,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/crates/stylex-shared/src/shared/utils/core/convert_style_to_class_name.rs b/crates/stylex-shared/src/shared/utils/core/convert_style_to_class_name.rs
@@ -21,7 +21,7 @@ pub(crate) fn convert_style_to_class_name(
   let (key, raw_value) = obj_entry;
 
   let dashed_key = if key.starts_with("--") {
-    key.to_lowercase()
+    key.to_string()
   } else {
     dashify(key)
   };

diff --git a/...ate_test/stylex_create_call_setting_vars.rs/preserves_camel_case_in_css_variable_names.js b/...ate_test/stylex_create_call_setting_vars.rs/preserves_camel_case_in_css_variable_names.js
@@ -0,0 +1,6 @@
+//__stylex_metadata_start__[{"class_name":"x1ujxqga","style":{"rtl":null,"ltr":".x1ujxqga{--myCustomVar:red}"},"priority":1},{"class_name":"x1g24lt9","style":{"rtl":null,"ltr":".x1g24lt9{--anotherCamelVar:10px}"},"priority":1}]__stylex_metadata_end__
+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/...ate_test/stylex_create_call_setting_vars.rs/preserves_kebab_case_in_css_variable_names.js b/...ate_test/stylex_create_call_setting_vars.rs/preserves_kebab_case_in_css_variable_names.js
@@ -0,0 +1,11 @@
+//__stylex_metadata_start__[{"class_name":"xgau0yw","style":{"rtl":null,"ltr":".xgau0yw{--background-color:red}"},"priority":1}]__stylex_metadata_end__
+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
+    }
+};
diff --git a/crates/stylex-shared/tests/stylex_transform_create_test/mod.rs b/crates/stylex-shared/tests/stylex_transform_create_test/mod.rs
@@ -5,3 +5,4 @@ mod stylex_create_call_pseudo_elements;
 mod stylex_create_call_queries;
 mod stylex_create_call_queries_with_functions;
 mod stylex_create_call_queries_with_properties;
+mod stylex_create_call_setting_vars;
diff --git a/crates/stylex-shared/tests/stylex_transform_create_test/stylex_create_call_setting_vars.rs b/crates/stylex-shared/tests/stylex_transform_create_test/stylex_create_call_setting_vars.rs
@@ -0,0 +1,49 @@
+use stylex_shared::{shared::structures::plugin_pass::PluginPass, StyleXTransform};
+use swc_core::ecma::{
+  parser::{Syntax, TsSyntax},
+  transforms::testing::test,
+};
+
+test!(
+  Syntax::Typescript(TsSyntax {
+    tsx: true,
+    ..Default::default()
+  }),
+  |tr| StyleXTransform::new_test_force_runtime_injection_with_pass(
+    tr.comments.clone(),
+    PluginPass::default(),
+    None
+  ),
+  preserves_kebab_case_in_css_variable_names,
+  r#"
+        import stylex from 'stylex';
+        export const styles = stylex.create({
+          default: {
+            '--background-color': 'red',
+          },
+        });
+    "#
+);
+
+
+test!(
+  Syntax::Typescript(TsSyntax {
+    tsx: true,
+    ..Default::default()
+  }),
+  |tr| StyleXTransform::new_test_force_runtime_injection_with_pass(
+    tr.comments.clone(),
+    PluginPass::default(),
+    None
+  ),
+  preserves_camel_case_in_css_variable_names,
+  r#"
+        import stylex from 'stylex';
+        const styles = stylex.create({
+          default: {
+            '--myCustomVar': 'red',
+            '--anotherCamelVar': '10px',
+          },
+        });
+    "#
+);
diff --git a/crates/stylex-test-parser/output/__tests__/babel-plugin/stylex-transform-create-test.js b/crates/stylex-test-parser/output/__tests__/babel-plugin/stylex-transform-create-test.js
@@ -1475,4 +1475,44 @@ describe('@stylexjs/babel-plugin', ()=>{
       `);
         });
     });
+    describe('[transform] setting vars with stylex.create()', ()=>{
+        test('preserves kebab-case in CSS variable names', ()=>{
+            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/postcss-plugin/app/CardTokens.stylex.ts b/packages/postcss-plugin/app/CardTokens.stylex.ts
@@ -9,5 +9,5 @@
 import * as stylex from '@stylexjs/stylex';
 
 export const tokens = stylex.defineVars({
-  arrow_transform: 'translateX(0)',
+  arrowTransform: 'translateX(0)',
 });
diff --git a/packages/postcss-plugin/components/Card.tsx b/packages/postcss-plugin/components/Card.tsx
@@ -67,7 +67,7 @@ const styles = stylex.create({
     transitionDuration: '400ms',
     textAlign: 'center',
     textDecoration: 'none',
-    [tokens.arrow_transform]: {
+    [tokens.arrowTransform]: {
       default: 'translateX(0)',
       ':hover': 'translateX(4px)',
     },
@@ -84,7 +84,7 @@ const styles = stylex.create({
   span: {
     display: 'inline-block',
     transitionProperty: 'transform',
-    transform: tokens.arrow_transform,
+    transform: tokens.arrowTransform,
     transitionDuration: {
       default: '200ms',
       [REDUCE_MOTION]: '0s',