Fix binding style attribute with CSS variables (#2581)

* Add failing test

* Fix binding style attribute with CSS variables

packages/alpinejs/src/utils/styles.js

@@ -15,8 +15,13 @@ function setStylesFromObject(el, value) {
 
         // When we use javascript object, css properties use the camelCase
         // syntax but when we use setProperty, we need the css format
-        // so we need to convert camelCase to kebab-case
-        el.style.setProperty(kebabCase(key), value)
+        // so we need to convert camelCase to kebab-case.
+        // In case key is a CSS variable, leave it as it is.
+        if (! key.startsWith('--')) {
+            key = kebabCase(key);
+        }
+
+        el.style.setProperty(key, value)
     })
 
     setTimeout(() => {

tests/cypress/integration/directives/x-bind-style.spec.js

@@ -33,6 +33,17 @@ test('style attribute object binding using kebab-case syntax',
     }
 )
 
+test('style attribute object binding with CSS variable',
+    html`
+        <div x-data x-bind:style="{ '--MyCSS-Variable': 0.25 }">
+            <span style="opacity: var(--MyCSS-Variable);">I should be hardly visible</span>
+        </div>
+    `,
+    ({ get }) => {
+        get('div').should(haveAttribute('style', '--MyCSS-Variable:0.25;'))
+    }
+)
+
 test('style attribute object bindings are merged with existing styles',
     html`
         <div x-data>