Fix regression in x-transition (#1920)

* Add failing test

* Fix regression in x-transition

packages/alpinejs/src/utils/on.js

@@ -10,7 +10,7 @@ export default function on (el, event, modifiers, callback) {
     // handler more flexibly in a "middleware" style.
     let wrapHandler = (callback, wrapper) => (e) => wrapper(callback, e)
 
-    if (modifiers.includes("dot")) event = dotSyntax(event);
+    if (modifiers.includes("dot")) event = dotSyntax(event)
     if (modifiers.includes('camel')) event = camelCase(event)
     if (modifiers.includes('passive')) options.passive = true
     if (modifiers.includes('window')) listenerTarget = window
@@ -72,9 +72,9 @@ export default function on (el, event, modifiers, callback) {
 }
 
 function dotSyntax(subject) {
-    return subject.replace(/-/g, ".");
+    return subject.replace(/-/g, ".")
 }
-  
+
 function camelCase(subject) {
     return subject.toLowerCase().replace(/-(\w)/g, (match, char) => char.toUpperCase())
 }

packages/alpinejs/src/utils/styles.js

@@ -13,7 +13,10 @@ function setStylesFromObject(el, value) {
     Object.entries(value).forEach(([key, value]) => {
         previousStyles[key] = el.style[key]
 
-        el.style.setProperty(key, 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)
     })
 
     setTimeout(() => {
@@ -36,3 +39,7 @@ function setStylesFromString(el, value) {
         el.setAttribute('style', cache)
     }
 }
+
+function kebabCase(subject) {
+    return subject.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase()
+}

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

@@ -11,6 +11,28 @@ test('style attribute object binding',
     }
 )
 
+test('style attribute object binding using camelCase syntax',
+    html`
+        <div x-data>
+            <span x-bind:style="{ backgroundColor: 'red' }">I should be red</span>
+        </div>
+    `,
+    ({ get }) => {
+        get('span').should(haveAttribute('style', 'background-color: red;'))
+    }
+)
+
+test('style attribute object binding using kebab-case syntax',
+    html`
+        <div x-data>
+            <span x-bind:style="{ 'background-color': 'red' }">I should be red</span>
+        </div>
+    `,
+    ({ get }) => {
+        get('span').should(haveAttribute('style', 'background-color: red;'))
+    }
+)
+
 test('style attribute object bindings are merged with existing styles',
     html`
         <div x-data>