feat: camelCase CSS properties in style objects

packages/babel-plugin-jsx-dom-expressions/src/dom/element.js

@@ -56,6 +56,8 @@ const alwaysClose = [
   "fieldset"
 ];
 
+const upperCaseChars = /[A-Z]/g;
+
 export function transformElement(path, info) {
   let tagName = getTagName(path.node),
     config = getConfig(path),
@@ -137,6 +139,8 @@ export function setAttr(path, elem, name, value, { isSVG, dynamic, prevId, isCE,
 
   // TODO: consider moving to a helper
   if (namespace === "style") {
+    if (upperCaseChars.test(name)) name = name.replace(upperCaseChars, "-$&").toLowerCase();
+
     if (t.isStringLiteral(value)) {
       return t.callExpression(
         t.memberExpression(

packages/babel-plugin-jsx-dom-expressions/test/__dom_fixtures__/attributeExpressions/code.js

@@ -177,4 +177,10 @@ const template32 = (
   <div
     style={{ "background-color": undefined }}
   />
+);
+
+const template33 = (
+  <div
+    style={{ backgroundColor: color(), marginRight: "40px" }}
+  />
 );

packages/babel-plugin-jsx-dom-expressions/test/__dom_fixtures__/attributeExpressions/output.js

@@ -350,4 +350,14 @@ const template32 = (() => {
   _el$45.style.removeProperty("background-color");
   return _el$45;
 })();
-_$delegateEvents(["click", "input"]);
+const template33 = (() => {
+  const _el$46 = _tmpl$4();
+  _el$46.style.setProperty("margin-right", "40px");
+  _$effect(() =>
+    color() != null
+      ? _el$46.style.setProperty("background-color", color())
+      : _el$46.style.removeProperty("background-color")
+  );
+  return _el$46;
+})();
+_$delegateEvents(["click", "input"]);

packages/dom-expressions/src/jsx.d.ts

@@ -378,7 +378,7 @@ export namespace JSX {
     onwheel?: EventHandlerUnion<T, WheelEvent>;
   }
 
-  interface CSSProperties extends csstype.PropertiesHyphen {
+  interface CSSProperties extends csstype.PropertiesHyphen, csstype.Properties {
     // Override
     [key: `-${string}`]: string | number | undefined;
   }