From eb3986656ee7cd12cc27e8673a040d03aa265496 Mon Sep 17 00:00:00 2001
From: "Chabib N." <chabib.nr@gmail.com>
Date: Sun, 14 Jun 2026 20:04:49 +0700
Subject: [PATCH 1/2] fix: stylex.attrs doesn't work with dynamic styles when
 using multi-word properties

---
 packages/@stylexjs/stylex/src/stylex.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/@stylexjs/stylex/src/stylex.js b/packages/@stylexjs/stylex/src/stylex.js
index e7a505c43..1ebbc5661 100644
--- a/packages/@stylexjs/stylex/src/stylex.js
+++ b/packages/@stylexjs/stylex/src/stylex.js
@@ -193,7 +193,13 @@ export function attrs(
   }
   if (style != null) {
     result.style = Object.entries(style)
-      .map(([key, value]) => `${toKebabCase(key)}:${value}`)
+      .map(([key, value]) => {
+        if (key.startsWith('--')) {
+          return `${key}:${value}`;
+        }
+
+        return `${toKebabCase(key)}:${value}`;
+      })
       .join(';');
   }
   if (dataStyleSrc != null) {

From 7b8236f1da16f913800de2d1bdb50e24192668ef Mon Sep 17 00:00:00 2001
From: "Chabib N." <chabib.nr@gmail.com>
Date: Sun, 14 Jun 2026 20:32:59 +0700
Subject: [PATCH 2/2] test: exclude custom properties from being converted to
 kebab-case

---
 packages/@stylexjs/stylex/__tests__/stylex-test.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/@stylexjs/stylex/__tests__/stylex-test.js b/packages/@stylexjs/stylex/__tests__/stylex-test.js
index 87996f107..89342c10e 100644
--- a/packages/@stylexjs/stylex/__tests__/stylex-test.js
+++ b/packages/@stylexjs/stylex/__tests__/stylex-test.js
@@ -317,6 +317,7 @@ describe('stylex', () => {
             marginTop: '10px',
             opacity: 0.5,
             '--foo': 2,
+            '--fooBar': 3,
             MsTransition: 'none',
             WebkitTapHighlightColor: 'transparent',
           },
@@ -325,7 +326,7 @@ describe('stylex', () => {
         {
           "class": "backgroundColor-red",
           "data-style-src": "components/Foo.react.js:1",
-          "style": "color:red;margin-top:10px;opacity:0.5;--foo:2;-ms-transition:none;-webkit-tap-highlight-color:transparent",
+          "style": "color:red;margin-top:10px;opacity:0.5;--foo:2;--fooBar:3;-ms-transition:none;-webkit-tap-highlight-color:transparent",
         }
       `);
     });