diff --git a/packages/babel-plugin-jsx-dom-expressions/src/dom/element.js b/packages/babel-plugin-jsx-dom-expressions/src/dom/element.js
index 6925a47f..1a627542 100644
--- a/packages/babel-plugin-jsx-dom-expressions/src/dom/element.js
+++ b/packages/babel-plugin-jsx-dom-expressions/src/dom/element.js
@@ -1,4 +1,5 @@
 import * as t from "@babel/types";
+
 import {
   Aliases,
   getPropAlias,
@@ -328,12 +329,15 @@ function transformAttributes(path, results) {
   }
 
   /**
-   *  inline styles
+   * Inline styles
+   *
+   * 1. When string
+   * 2. When is an object, the key is a string, and value is string/numeric
+   * 3. Remove properties from object when value is undefined/null
+   * 4. When `value.evaluate().confident`
    *
-   * 1. when string
-   * 2. when is an object, the key is a string, and value is string/numeric
-   * 3. remove properties from object when value is undefined/null
-   **/
+   * Also, when `key` is computed value is also `value.evaluate().confident`
+   */
 
   attributes = path.get("openingElement").get("attributes");
 
@@ -345,6 +349,7 @@ function transformAttributes(path, results) {
       const attr = styleAttributes[i];
 
       let value = attr.node.value;
+      const node = attr.get("value");
       if (t.isJSXExpressionContainer(value)) {
         value = value.expression;
       }
@@ -354,20 +359,37 @@ function transformAttributes(path, results) {
         attr.remove();
       } else if (t.isObjectExpression(value)) {
         const properties = value.properties;
+        const propertiesNode = node.get("expression").get("properties");
         const toRemoveProperty = [];
-        for (const property of properties) {
+        for (let i = 0; i < properties.length; i++) {
+          const property = properties[i];
+
+          if (property.computed) {
+            /* { [computed]: `${1+1}px` } => { [computed]: `2px` } */
+            const r = propertiesNode[i].get("value").evaluate();
+            if (r.confident && (typeof r.value === "string" || typeof r.value === "number")) {
+              property.value = t.inherits(t.stringLiteral(`${r.value}`), property.value);
+            }
+            // computed cannot be inlined - maybe can be evaluated but this is pretty rare
+            continue;
+          }
+
           if (t.isObjectProperty(property)) {
-            if (
-              t.isStringLiteral(property.key) &&
-              (t.isStringLiteral(property.value) || t.isNumericLiteral(property.value))
-            ) {
-              inlinedStyle += `${property.key.value}:${property.value.value};`;
+            const key = t.isIdentifier(property.key) ? property.key.name : property.key.value;
+            if (t.isStringLiteral(property.value) || t.isNumericLiteral(property.value)) {
+              inlinedStyle += `${key}:${property.value.value};`;
               toRemoveProperty.push(property);
             } else if (
               (t.isIdentifier(property.value) && property.value.name === "undefined") ||
               t.isNullLiteral(property.value)
             ) {
               toRemoveProperty.push(property);
+            } else {
+              const r = propertiesNode[i].get("value").evaluate();
+              if (r.confident && (typeof r.value === "string" || typeof r.value === "number")) {
+                inlinedStyle += `${key}:${r.value};`;
+                toRemoveProperty.push(property);
+              }
             }
           }
         }
diff --git a/packages/babel-plugin-jsx-dom-expressions/test/__dom_compatible_fixtures__/attributeExpressions/code.js b/packages/babel-plugin-jsx-dom-expressions/test/__dom_compatible_fixtures__/attributeExpressions/code.js
index ac9fe990..b2ece6cb 100644
--- a/packages/babel-plugin-jsx-dom-expressions/test/__dom_compatible_fixtures__/attributeExpressions/code.js
+++ b/packages/babel-plugin-jsx-dom-expressions/test/__dom_compatible_fixtures__/attributeExpressions/code.js
@@ -122,7 +122,7 @@ const template20 = (
   </div>
 );
 
-const template21 = <div style={{ a: "static", ...rest }}></div>;
+const template21 = <div style={{ o: "static", ...rest }}></div>;
 
 const template22 = <div data='"hi"' data2={'"'} />;
 
diff --git a/packages/babel-plugin-jsx-dom-expressions/test/__dom_compatible_fixtures__/attributeExpressions/output.js b/packages/babel-plugin-jsx-dom-expressions/test/__dom_compatible_fixtures__/attributeExpressions/output.js
index c4594e8a..aa6f0eda 100644
--- a/packages/babel-plugin-jsx-dom-expressions/test/__dom_compatible_fixtures__/attributeExpressions/output.js
+++ b/packages/babel-plugin-jsx-dom-expressions/test/__dom_compatible_fixtures__/attributeExpressions/output.js
@@ -28,68 +28,69 @@ var _tmpl$ = /*#__PURE__*/ _$template(
   _tmpl$11 = /*#__PURE__*/ _$template(`<button class="a b c">Hi</button>`),
   _tmpl$12 = /*#__PURE__*/ _$template(`<div class="bg-red-500 flex flex-col"></div>`),
   _tmpl$13 = /*#__PURE__*/ _$template(`<div><input readonly><input></div>`),
-  _tmpl$14 = /*#__PURE__*/ _$template(`<div data="&quot;hi&quot;"data2="&quot;"></div>`),
-  _tmpl$15 = /*#__PURE__*/ _$template(`<a></a>`),
-  _tmpl$16 = /*#__PURE__*/ _$template(`<div><a></a></div>`),
-  _tmpl$17 = /*#__PURE__*/ _$template(`<div start="Hi">Hi</div>`),
-  _tmpl$18 = /*#__PURE__*/ _$template(`<label><span>Input is </span><input><div></div></label>`),
-  _tmpl$19 = /*#__PURE__*/ _$template(
+  _tmpl$14 = /*#__PURE__*/ _$template(`<div style="o:static"></div>`),
+  _tmpl$15 = /*#__PURE__*/ _$template(`<div data="&quot;hi&quot;"data2="&quot;"></div>`),
+  _tmpl$16 = /*#__PURE__*/ _$template(`<a></a>`),
+  _tmpl$17 = /*#__PURE__*/ _$template(`<div><a></a></div>`),
+  _tmpl$18 = /*#__PURE__*/ _$template(`<div start="Hi">Hi</div>`),
+  _tmpl$19 = /*#__PURE__*/ _$template(`<label><span>Input is </span><input><div></div></label>`),
+  _tmpl$20 = /*#__PURE__*/ _$template(
     `<div class="class1 class2 class3 class4 class5 class6"random="random1 random2\n    random3 random4"style="color:red;background-color:blue !important;border:1px solid black;font-size:12px"></div>`
   ),
-  _tmpl$20 = /*#__PURE__*/ _$template(`<button></button>`),
-  _tmpl$21 = /*#__PURE__*/ _$template(`<input value="10">`),
-  _tmpl$22 = /*#__PURE__*/ _$template(`<select><option>Red</option><option>Blue</option></select>`),
-  _tmpl$23 = /*#__PURE__*/ _$template(`<div>empty string</div>`),
-  _tmpl$24 = /*#__PURE__*/ _$template(`<div>js empty</div>`),
-  _tmpl$25 = /*#__PURE__*/ _$template(`<div quack>hola</div>`),
-  _tmpl$26 = /*#__PURE__*/ _$template(`<div quack>"hola js"</div>`),
-  _tmpl$27 = /*#__PURE__*/ _$template(`<div quack>true</div>`),
-  _tmpl$28 = /*#__PURE__*/ _$template(`<div>false</div>`),
-  _tmpl$29 = /*#__PURE__*/ _$template(`<div quack>1</div>`),
-  _tmpl$30 = /*#__PURE__*/ _$template(`<div>0</div>`),
-  _tmpl$31 = /*#__PURE__*/ _$template(`<div quack>"1"</div>`),
-  _tmpl$32 = /*#__PURE__*/ _$template(`<div>"0"</div>`),
-  _tmpl$33 = /*#__PURE__*/ _$template(`<div>undefined</div>`),
-  _tmpl$34 = /*#__PURE__*/ _$template(`<div>null</div>`),
-  _tmpl$35 = /*#__PURE__*/ _$template(`<div>boolTest()</div>`),
-  _tmpl$36 = /*#__PURE__*/ _$template(`<div>boolTest</div>`),
-  _tmpl$37 = /*#__PURE__*/ _$template(`<div>boolTestBinding</div>`),
-  _tmpl$38 = /*#__PURE__*/ _$template(`<div>boolTestObjBinding.value</div>`),
-  _tmpl$39 = /*#__PURE__*/ _$template(`<div>fn</div>`),
-  _tmpl$40 = /*#__PURE__*/ _$template(`<div before quack>should have space before</div>`),
-  _tmpl$41 = /*#__PURE__*/ _$template(
+  _tmpl$21 = /*#__PURE__*/ _$template(`<button></button>`),
+  _tmpl$22 = /*#__PURE__*/ _$template(`<input value="10">`),
+  _tmpl$23 = /*#__PURE__*/ _$template(`<select><option>Red</option><option>Blue</option></select>`),
+  _tmpl$24 = /*#__PURE__*/ _$template(`<div>empty string</div>`),
+  _tmpl$25 = /*#__PURE__*/ _$template(`<div>js empty</div>`),
+  _tmpl$26 = /*#__PURE__*/ _$template(`<div quack>hola</div>`),
+  _tmpl$27 = /*#__PURE__*/ _$template(`<div quack>"hola js"</div>`),
+  _tmpl$28 = /*#__PURE__*/ _$template(`<div quack>true</div>`),
+  _tmpl$29 = /*#__PURE__*/ _$template(`<div>false</div>`),
+  _tmpl$30 = /*#__PURE__*/ _$template(`<div quack>1</div>`),
+  _tmpl$31 = /*#__PURE__*/ _$template(`<div>0</div>`),
+  _tmpl$32 = /*#__PURE__*/ _$template(`<div quack>"1"</div>`),
+  _tmpl$33 = /*#__PURE__*/ _$template(`<div>"0"</div>`),
+  _tmpl$34 = /*#__PURE__*/ _$template(`<div>undefined</div>`),
+  _tmpl$35 = /*#__PURE__*/ _$template(`<div>null</div>`),
+  _tmpl$36 = /*#__PURE__*/ _$template(`<div>boolTest()</div>`),
+  _tmpl$37 = /*#__PURE__*/ _$template(`<div>boolTest</div>`),
+  _tmpl$38 = /*#__PURE__*/ _$template(`<div>boolTestBinding</div>`),
+  _tmpl$39 = /*#__PURE__*/ _$template(`<div>boolTestObjBinding.value</div>`),
+  _tmpl$40 = /*#__PURE__*/ _$template(`<div>fn</div>`),
+  _tmpl$41 = /*#__PURE__*/ _$template(`<div before quack>should have space before</div>`),
+  _tmpl$42 = /*#__PURE__*/ _$template(
     `<div before quack after>should have space before/after</div>`
   ),
-  _tmpl$42 = /*#__PURE__*/ _$template(`<div quack after>should have space before/after</div>`),
-  _tmpl$43 = /*#__PURE__*/ _$template(`<img src>`),
-  _tmpl$44 = /*#__PURE__*/ _$template(`<div><img src></div>`),
-  _tmpl$45 = /*#__PURE__*/ _$template(`<img src loading="lazy">`, true, false, false),
-  _tmpl$46 = /*#__PURE__*/ _$template(`<div><img src loading="lazy"></div>`, true, false, false),
-  _tmpl$47 = /*#__PURE__*/ _$template(`<iframe src></iframe>`),
-  _tmpl$48 = /*#__PURE__*/ _$template(`<div><iframe src></iframe></div>`),
-  _tmpl$49 = /*#__PURE__*/ _$template(`<iframe src loading="lazy"></iframe>`, true, false, false),
-  _tmpl$50 = /*#__PURE__*/ _$template(
+  _tmpl$43 = /*#__PURE__*/ _$template(`<div quack after>should have space before/after</div>`),
+  _tmpl$44 = /*#__PURE__*/ _$template(`<img src>`),
+  _tmpl$45 = /*#__PURE__*/ _$template(`<div><img src></div>`),
+  _tmpl$46 = /*#__PURE__*/ _$template(`<img src loading="lazy">`, true, false, false),
+  _tmpl$47 = /*#__PURE__*/ _$template(`<div><img src loading="lazy"></div>`, true, false, false),
+  _tmpl$48 = /*#__PURE__*/ _$template(`<iframe src></iframe>`),
+  _tmpl$49 = /*#__PURE__*/ _$template(`<div><iframe src></iframe></div>`),
+  _tmpl$50 = /*#__PURE__*/ _$template(`<iframe src loading="lazy"></iframe>`, true, false, false),
+  _tmpl$51 = /*#__PURE__*/ _$template(
     `<div><iframe src loading="lazy"></iframe></div>`,
     true,
     false,
     false
   ),
-  _tmpl$51 = /*#__PURE__*/ _$template(`<div title="<u>data</u>"></div>`),
-  _tmpl$52 = /*#__PURE__*/ _$template(`<div truestr="true"truestrjs="true"></div>`),
-  _tmpl$53 = /*#__PURE__*/ _$template(`<div falsestr="false"falsestrjs="false"></div>`),
-  _tmpl$54 = /*#__PURE__*/ _$template(
+  _tmpl$52 = /*#__PURE__*/ _$template(`<div title="<u>data</u>"></div>`),
+  _tmpl$53 = /*#__PURE__*/ _$template(`<div truestr="true"truestrjs="true"></div>`),
+  _tmpl$54 = /*#__PURE__*/ _$template(`<div falsestr="false"falsestrjs="false"></div>`),
+  _tmpl$55 = /*#__PURE__*/ _$template(
     `<math display="block"><mrow></mrow></math>`,
     false,
     false,
     true
   ),
-  _tmpl$55 = /*#__PURE__*/ _$template(`<mrow><mi>x</mi><mo>=</mo></mrow>`, false, false, true),
-  _tmpl$56 = /*#__PURE__*/ _$template(`<video poster="1.jpg"></video>`),
-  _tmpl$57 = /*#__PURE__*/ _$template(`<div><video poster="1.jpg"></video></div>`),
-  _tmpl$58 = /*#__PURE__*/ _$template(`<video></video>`),
-  _tmpl$59 = /*#__PURE__*/ _$template(`<div><video></video></div>`),
-  _tmpl$60 = /*#__PURE__*/ _$template(`<video poster></video>`),
-  _tmpl$61 = /*#__PURE__*/ _$template(`<div><video poster></video></div>`);
+  _tmpl$56 = /*#__PURE__*/ _$template(`<mrow><mi>x</mi><mo>=</mo></mrow>`, false, false, true),
+  _tmpl$57 = /*#__PURE__*/ _$template(`<video poster="1.jpg"></video>`),
+  _tmpl$58 = /*#__PURE__*/ _$template(`<div><video poster="1.jpg"></video></div>`),
+  _tmpl$59 = /*#__PURE__*/ _$template(`<video></video>`),
+  _tmpl$60 = /*#__PURE__*/ _$template(`<div><video></video></div>`),
+  _tmpl$61 = /*#__PURE__*/ _$template(`<video poster></video>`),
+  _tmpl$62 = /*#__PURE__*/ _$template(`<div><video poster></video></div>`);
 import * as styles from "./styles.module.css";
 import { binding } from "somewhere";
 function refFn() {}
@@ -305,12 +306,11 @@ const template20 = (() => {
   return _el$26;
 })();
 const template21 = (() => {
-  var _el$29 = _tmpl$4();
+  var _el$29 = _tmpl$14();
   _$effect(_$p =>
     _$style(
       _el$29,
       {
-        a: "static",
         ...rest
       },
       _$p
@@ -318,7 +318,7 @@ const template21 = (() => {
   );
   return _el$29;
 })();
-const template22 = _tmpl$14();
+const template22 = _tmpl$15();
 const template23 = (() => {
   var _el$31 = _tmpl$4();
   _$insert(_el$31, () => "t" in test && "true");
@@ -326,7 +326,7 @@ const template23 = (() => {
   return _el$31;
 })();
 const template24 = (() => {
-  var _el$32 = _tmpl$15();
+  var _el$32 = _tmpl$16();
   _$spread(
     _el$32,
     _$mergeProps(props, {
@@ -338,7 +338,7 @@ const template24 = (() => {
   return _el$32;
 })();
 const template25 = (() => {
-  var _el$33 = _tmpl$16(),
+  var _el$33 = _tmpl$17(),
     _el$34 = _el$33.firstChild;
   _$insert(_el$33, () => props.children, _el$34);
   _$spread(
@@ -352,13 +352,13 @@ const template25 = (() => {
   return _el$33;
 })();
 const template26 = (() => {
-  var _el$35 = _tmpl$17();
+  var _el$35 = _tmpl$18();
   _$setAttribute(_el$35, "middle", middle);
   _$spread(_el$35, spread, false, true);
   return _el$35;
 })();
 const template27 = (() => {
-  var _el$36 = _tmpl$17();
+  var _el$36 = _tmpl$18();
   _$spread(
     _el$36,
     _$mergeProps(
@@ -374,7 +374,7 @@ const template27 = (() => {
   return _el$36;
 })();
 const template28 = (() => {
-  var _el$37 = _tmpl$18(),
+  var _el$37 = _tmpl$19(),
     _el$38 = _el$37.firstChild,
     _el$39 = _el$38.firstChild,
     _el$40 = _el$38.nextSibling,
@@ -392,7 +392,7 @@ const template29 = (() => {
   _$insert(_el$42, !!someValue);
   return _el$42;
 })();
-const template30 = _tmpl$19();
+const template30 = _tmpl$20();
 const template31 = (() => {
   var _el$44 = _tmpl$4();
   _$effect(_$p => _$setStyleProperty(_el$44, "background-color", getStore.itemProperties.color));
@@ -401,22 +401,22 @@ const template31 = (() => {
 const template32 = _tmpl$4();
 const template33 = [
   (() => {
-    var _el$46 = _tmpl$20();
+    var _el$46 = _tmpl$21();
     _$className(_el$46, styles.button);
     return _el$46;
   })(),
   (() => {
-    var _el$47 = _tmpl$20();
+    var _el$47 = _tmpl$21();
     _$className(_el$47, styles["foo--bar"]);
     return _el$47;
   })(),
   (() => {
-    var _el$48 = _tmpl$20();
+    var _el$48 = _tmpl$21();
     _$effect(() => _$className(_el$48, styles.foo.bar));
     return _el$48;
   })(),
   (() => {
-    var _el$49 = _tmpl$20();
+    var _el$49 = _tmpl$21();
     _$effect(() => _$className(_el$49, styles[foo()]));
     return _el$49;
   })()
@@ -452,14 +452,14 @@ const template38 = (() => {
   typeof _ref$7 === "function" && _$use(_ref$7, _el$54);
   return _el$54;
 })();
-const template39 = _tmpl$21();
+const template39 = _tmpl$22();
 const template40 = (() => {
   var _el$56 = _tmpl$4();
   _$effect(_$p => _$setStyleProperty(_el$56, "color", a()));
   return _el$56;
 })();
 const template41 = (() => {
-  var _el$57 = _tmpl$22(),
+  var _el$57 = _tmpl$23(),
     _el$58 = _el$57.firstChild,
     _el$59 = _el$58.nextSibling;
   _$effect(() => (_el$58.value = Color.Red));
@@ -476,57 +476,57 @@ const boolTestBinding = false;
 const boolTestObjBinding = {
   value: false
 };
-const template42 = _tmpl$23();
-const template43 = _tmpl$24();
-const template44 = _tmpl$25();
-const template45 = _tmpl$26();
-const template46 = _tmpl$27();
-const template47 = _tmpl$28();
-const template48 = _tmpl$29();
-const template49 = _tmpl$30();
-const template50 = _tmpl$31();
-const template51 = _tmpl$32();
-const template52 = _tmpl$33();
-const template53 = _tmpl$34();
+const template42 = _tmpl$24();
+const template43 = _tmpl$25();
+const template44 = _tmpl$26();
+const template45 = _tmpl$27();
+const template46 = _tmpl$28();
+const template47 = _tmpl$29();
+const template48 = _tmpl$30();
+const template49 = _tmpl$31();
+const template50 = _tmpl$32();
+const template51 = _tmpl$33();
+const template52 = _tmpl$34();
+const template53 = _tmpl$35();
 const template54 = (() => {
-  var _el$72 = _tmpl$35();
+  var _el$72 = _tmpl$36();
   _$effect(() => _$setBoolAttribute(_el$72, "quack", boolTest()));
   return _el$72;
 })();
 const template55 = (() => {
-  var _el$73 = _tmpl$36();
+  var _el$73 = _tmpl$37();
   _$setBoolAttribute(_el$73, "quack", boolTest);
   return _el$73;
 })();
 const template56 = (() => {
-  var _el$74 = _tmpl$37();
+  var _el$74 = _tmpl$38();
   _$setBoolAttribute(_el$74, "quack", boolTestBinding);
   return _el$74;
 })();
 const template57 = (() => {
-  var _el$75 = _tmpl$38();
+  var _el$75 = _tmpl$39();
   _$effect(() => _$setBoolAttribute(_el$75, "quack", boolTestObjBinding.value));
   return _el$75;
 })();
 const template58 = (() => {
-  var _el$76 = _tmpl$39();
+  var _el$76 = _tmpl$40();
   _$setBoolAttribute(_el$76, "quack", () => false);
   return _el$76;
 })();
-const template59 = _tmpl$40();
-const template60 = _tmpl$41();
-const template61 = _tmpl$42();
+const template59 = _tmpl$41();
+const template60 = _tmpl$42();
+const template61 = _tmpl$43();
 // this crash it for some reason- */ const template62 = <div bool:quack>really empty</div>;
 
-const template63 = _tmpl$43();
-const template64 = _tmpl$44();
-const template65 = _tmpl$45();
-const template66 = _tmpl$46();
-const template67 = _tmpl$47();
-const template68 = _tmpl$48();
-const template69 = _tmpl$49();
-const template70 = _tmpl$50();
-const template71 = _tmpl$51();
+const template63 = _tmpl$44();
+const template64 = _tmpl$45();
+const template65 = _tmpl$46();
+const template66 = _tmpl$47();
+const template67 = _tmpl$48();
+const template68 = _tmpl$49();
+const template69 = _tmpl$50();
+const template70 = _tmpl$51();
+const template71 = _tmpl$52();
 const template72 = (() => {
   var _el$89 = _tmpl$4();
   _$use(binding, _el$89);
@@ -556,12 +556,12 @@ const template76 = (() => {
   return _el$93;
 })();
 const template77 = (() => {
-  var _el$94 = _tmpl$52();
+  var _el$94 = _tmpl$53();
   _$setAttribute(_el$94, "true", true);
   return _el$94;
 })();
 const template78 = (() => {
-  var _el$95 = _tmpl$53();
+  var _el$95 = _tmpl$54();
   _$setAttribute(_el$95, "false", false);
   return _el$95;
 })();
@@ -577,50 +577,50 @@ const template80 = (() => {
   _$setAttribute(_el$97, "false", false);
   return _el$97;
 })();
-const template81 = _tmpl$54();
-const template82 = _tmpl$55();
-const template83 = _tmpl$56();
-const template84 = _tmpl$57();
+const template81 = _tmpl$55();
+const template82 = _tmpl$56();
+const template83 = _tmpl$57();
+const template84 = _tmpl$58();
 const template85 = (() => {
-  var _el$102 = _tmpl$58();
+  var _el$102 = _tmpl$59();
   _el$102.poster = "1.jpg";
   return _el$102;
 })();
 const template86 = (() => {
-  var _el$103 = _tmpl$59(),
+  var _el$103 = _tmpl$60(),
     _el$104 = _el$103.firstChild;
   _el$104.poster = "1.jpg";
   return _el$103;
 })();
-const template87 = _tmpl$60();
-const template88 = _tmpl$61();
+const template87 = _tmpl$61();
+const template88 = _tmpl$62();
 const template89 = (() => {
-  var _el$107 = _tmpl$58();
+  var _el$107 = _tmpl$59();
   _el$107.playsInline = value;
   return _el$107;
 })();
 const template90 = (() => {
-  var _el$108 = _tmpl$58();
+  var _el$108 = _tmpl$59();
   _el$108.playsInline = true;
   return _el$108;
 })();
 const template91 = (() => {
-  var _el$109 = _tmpl$58();
+  var _el$109 = _tmpl$59();
   _el$109.playsInline = false;
   return _el$109;
 })();
 const template92 = (() => {
-  var _el$110 = _tmpl$58();
+  var _el$110 = _tmpl$59();
   _el$110.playsInline = value;
   return _el$110;
 })();
 const template93 = (() => {
-  var _el$111 = _tmpl$58();
+  var _el$111 = _tmpl$59();
   _el$111.playsInline = true;
   return _el$111;
 })();
 const template94 = (() => {
-  var _el$112 = _tmpl$58();
+  var _el$112 = _tmpl$59();
   _el$112.playsInline = false;
   return _el$112;
 })();
diff --git a/packages/babel-plugin-jsx-dom-expressions/test/__dom_fixtures__/SVG/output.js b/packages/babel-plugin-jsx-dom-expressions/test/__dom_fixtures__/SVG/output.js
index 4d7b0e08..5f9d2afd 100644
--- a/packages/babel-plugin-jsx-dom-expressions/test/__dom_fixtures__/SVG/output.js
+++ b/packages/babel-plugin-jsx-dom-expressions/test/__dom_fixtures__/SVG/output.js
@@ -2,14 +2,14 @@ import { template as _$template } from "r-dom";
 import { setAttributeNS as _$setAttributeNS } from "r-dom";
 import { createComponent as _$createComponent } from "r-dom";
 import { spread as _$spread } from "r-dom";
+import { setStyleProperty as _$setStyleProperty } from "r-dom";
 import { setAttribute as _$setAttribute } from "r-dom";
 import { effect as _$effect } from "r-dom";
-import { setStyleProperty as _$setStyleProperty } from "r-dom";
 var _tmpl$ = /*#__PURE__*/ _$template(
     `<svg width=400 height=180><rect stroke-width=2 x=50 y=20 rx=20 ry=20 width=150 height=150 style=fill:red;stroke:black;stroke-width:5;opacity:0.5></rect><linearGradient gradientTransform=rotate(25)><stop offset=0%>`
   ),
   _tmpl$2 = /*#__PURE__*/ _$template(
-    `<svg width=400 height=180><rect rx=20 ry=20 width=150 height=150>`
+    `<svg width=400 height=180><rect rx=20 ry=20 width=150 height=150 style=fill:red;stroke:black;opacity:0.5>`
   ),
   _tmpl$3 = /*#__PURE__*/ _$template(`<svg width=400 height=180><rect>`),
   _tmpl$4 = /*#__PURE__*/ _$template(
@@ -28,9 +28,6 @@ const template = _tmpl$();
 const template2 = (() => {
   var _el$2 = _tmpl$2(),
     _el$3 = _el$2.firstChild;
-  _$setStyleProperty(_el$3, "fill", "red");
-  _$setStyleProperty(_el$3, "stroke", "black");
-  _$setStyleProperty(_el$3, "opacity", "0.5");
   _$effect(
     _p$ => {
       var _v$ = state.name,
@@ -79,4 +76,4 @@ const template8 = (() => {
     _el$12 = _el$11.firstChild;
   _el$12.textContent = text;
   return _el$11;
-})();
+})();
\ No newline at end of file
diff --git a/packages/babel-plugin-jsx-dom-expressions/test/__dom_fixtures__/attributeExpressions/code.js b/packages/babel-plugin-jsx-dom-expressions/test/__dom_fixtures__/attributeExpressions/code.js
index 2e4a5bb6..53c4d084 100644
--- a/packages/babel-plugin-jsx-dom-expressions/test/__dom_fixtures__/attributeExpressions/code.js
+++ b/packages/babel-plugin-jsx-dom-expressions/test/__dom_fixtures__/attributeExpressions/code.js
@@ -122,7 +122,7 @@ const template20 = (
   </div>
 );
 
-const template21 = <div style={{ a: "static", ...rest }}></div>;
+const template21 = <div style={{ b: "static", ...rest }}></div>;
 
 const template22 = <div data='"hi"' data2={'"'} />;
 
@@ -271,6 +271,28 @@ const template86 = <div style={{"background":"red", "color":"green", "border":si
 const template87 = <div style={{"background":"red", "color":"green", "border":somevalue}}/>
 const template88 = <div style={{"background":"red", "color":"green", "border":some.access}}/>
 const template89 = <div style={{"background":"red", "color":"green", "border":null}}/>
+{
+  <div
+    style={{
+      "padding-left": `clamp(${1+1}px, ${1+1}px, ${1+1}px)`,
+    }}
+  />
+}
+{
+  <div
+    style={{
+     a: `clamp(${1+1}px, ${1+1}px, ${1+1}px)`,
+    }}
+  />
+}
+{
+  <div
+    style={{
+     [computedkey]: `clamp(${1+1}px, ${1+1}px, ${1+1}px)`,
+    }}
+  />
+}
+
 
 
 {
@@ -280,4 +302,4 @@ const template89 = <div style={{"background":"red", "color":"green", "border":nu
   const invalid = <Div ref={o?.ref} />
 }
 
-const template90 = <div data-hk="should warn data-hk is present on template"/>
\ No newline at end of file
+const template90 = <div data-hk="should warn data-hk is present on template"/>
diff --git a/packages/babel-plugin-jsx-dom-expressions/test/__dom_fixtures__/attributeExpressions/output.js b/packages/babel-plugin-jsx-dom-expressions/test/__dom_fixtures__/attributeExpressions/output.js
index 63845bd3..3ba8f893 100644
--- a/packages/babel-plugin-jsx-dom-expressions/test/__dom_fixtures__/attributeExpressions/output.js
+++ b/packages/babel-plugin-jsx-dom-expressions/test/__dom_fixtures__/attributeExpressions/output.js
@@ -27,55 +27,58 @@ var _tmpl$ = /*#__PURE__*/ _$template(`<div id=main><h1 class=base id=my-h1><a h
   _tmpl$11 = /*#__PURE__*/ _$template(`<button class="a b c">Hi`),
   _tmpl$12 = /*#__PURE__*/ _$template(`<div class="bg-red-500 flex flex-col">`),
   _tmpl$13 = /*#__PURE__*/ _$template(`<div><input readonly><input>`),
-  _tmpl$14 = /*#__PURE__*/ _$template(`<div data="&quot;hi&quot;"data2="&quot;">`),
-  _tmpl$15 = /*#__PURE__*/ _$template(`<a>`),
-  _tmpl$16 = /*#__PURE__*/ _$template(`<div><a>`),
-  _tmpl$17 = /*#__PURE__*/ _$template(`<div start=Hi>Hi`),
-  _tmpl$18 = /*#__PURE__*/ _$template(`<label><span>Input is </span><input><div>`),
-  _tmpl$19 = /*#__PURE__*/ _$template(
+  _tmpl$14 = /*#__PURE__*/ _$template(`<div style=b:static>`),
+  _tmpl$15 = /*#__PURE__*/ _$template(`<div data="&quot;hi&quot;"data2="&quot;">`),
+  _tmpl$16 = /*#__PURE__*/ _$template(`<a>`),
+  _tmpl$17 = /*#__PURE__*/ _$template(`<div><a>`),
+  _tmpl$18 = /*#__PURE__*/ _$template(`<div start=Hi>Hi`),
+  _tmpl$19 = /*#__PURE__*/ _$template(`<label><span>Input is </span><input><div>`),
+  _tmpl$20 = /*#__PURE__*/ _$template(
     `<div class="class1 class2 class3 class4 class5 class6"random="random1 random2\n    random3 random4"style="color:red;background-color:blue !important;border:1px solid black;font-size:12px">`
   ),
-  _tmpl$20 = /*#__PURE__*/ _$template(`<button>`),
-  _tmpl$21 = /*#__PURE__*/ _$template(`<input value=10>`),
-  _tmpl$22 = /*#__PURE__*/ _$template(`<select><option>Red</option><option>Blue`),
-  _tmpl$23 = /*#__PURE__*/ _$template(`<div>empty string`),
-  _tmpl$24 = /*#__PURE__*/ _$template(`<div>js empty`),
-  _tmpl$25 = /*#__PURE__*/ _$template(`<div quack>hola`),
-  _tmpl$26 = /*#__PURE__*/ _$template(`<div quack>"hola js"`),
-  _tmpl$27 = /*#__PURE__*/ _$template(`<div quack>true`),
-  _tmpl$28 = /*#__PURE__*/ _$template(`<div>false`),
-  _tmpl$29 = /*#__PURE__*/ _$template(`<div quack>1`),
-  _tmpl$30 = /*#__PURE__*/ _$template(`<div>0`),
-  _tmpl$31 = /*#__PURE__*/ _$template(`<div quack>"1"`),
-  _tmpl$32 = /*#__PURE__*/ _$template(`<div>"0"`),
-  _tmpl$33 = /*#__PURE__*/ _$template(`<div>undefined`),
-  _tmpl$34 = /*#__PURE__*/ _$template(`<div>null`),
-  _tmpl$35 = /*#__PURE__*/ _$template(`<div>boolTest()`),
-  _tmpl$36 = /*#__PURE__*/ _$template(`<div>boolTest`),
-  _tmpl$37 = /*#__PURE__*/ _$template(`<div>boolTestBinding`),
-  _tmpl$38 = /*#__PURE__*/ _$template(`<div>boolTestObjBinding.value`),
-  _tmpl$39 = /*#__PURE__*/ _$template(`<div>fn`),
-  _tmpl$40 = /*#__PURE__*/ _$template(`<div before quack>should have space before`),
-  _tmpl$41 = /*#__PURE__*/ _$template(`<div before quack after>should have space before/after`),
-  _tmpl$42 = /*#__PURE__*/ _$template(`<div quack after>should have space before/after`),
-  _tmpl$43 = /*#__PURE__*/ _$template(`<img src>`),
-  _tmpl$44 = /*#__PURE__*/ _$template(`<div><img src>`),
-  _tmpl$45 = /*#__PURE__*/ _$template(`<img src loading=lazy>`, true, false, false),
-  _tmpl$46 = /*#__PURE__*/ _$template(`<div><img src loading=lazy>`, true, false, false),
-  _tmpl$47 = /*#__PURE__*/ _$template(`<iframe src>`),
-  _tmpl$48 = /*#__PURE__*/ _$template(`<div><iframe src>`),
-  _tmpl$49 = /*#__PURE__*/ _$template(`<iframe src loading=lazy>`, true, false, false),
-  _tmpl$50 = /*#__PURE__*/ _$template(`<div><iframe src loading=lazy>`, true, false, false),
-  _tmpl$51 = /*#__PURE__*/ _$template(`<div title="<u>data</u>">`),
-  _tmpl$52 = /*#__PURE__*/ _$template(`<div truestr=true truestrjs=true>`),
-  _tmpl$53 = /*#__PURE__*/ _$template(`<div falsestr=false falsestrjs=false>`),
-  _tmpl$54 = /*#__PURE__*/ _$template(`<math display=block><mrow>`, false, false, true),
-  _tmpl$55 = /*#__PURE__*/ _$template(`<mrow><mi>x</mi><mo>=`, false, false, true),
-  _tmpl$56 = /*#__PURE__*/ _$template(`<div style=background:red>`),
-  _tmpl$57 = /*#__PURE__*/ _$template(
+  _tmpl$21 = /*#__PURE__*/ _$template(`<button>`),
+  _tmpl$22 = /*#__PURE__*/ _$template(`<input value=10>`),
+  _tmpl$23 = /*#__PURE__*/ _$template(`<select><option>Red</option><option>Blue`),
+  _tmpl$24 = /*#__PURE__*/ _$template(`<div>empty string`),
+  _tmpl$25 = /*#__PURE__*/ _$template(`<div>js empty`),
+  _tmpl$26 = /*#__PURE__*/ _$template(`<div quack>hola`),
+  _tmpl$27 = /*#__PURE__*/ _$template(`<div quack>"hola js"`),
+  _tmpl$28 = /*#__PURE__*/ _$template(`<div quack>true`),
+  _tmpl$29 = /*#__PURE__*/ _$template(`<div>false`),
+  _tmpl$30 = /*#__PURE__*/ _$template(`<div quack>1`),
+  _tmpl$31 = /*#__PURE__*/ _$template(`<div>0`),
+  _tmpl$32 = /*#__PURE__*/ _$template(`<div quack>"1"`),
+  _tmpl$33 = /*#__PURE__*/ _$template(`<div>"0"`),
+  _tmpl$34 = /*#__PURE__*/ _$template(`<div>undefined`),
+  _tmpl$35 = /*#__PURE__*/ _$template(`<div>null`),
+  _tmpl$36 = /*#__PURE__*/ _$template(`<div>boolTest()`),
+  _tmpl$37 = /*#__PURE__*/ _$template(`<div>boolTest`),
+  _tmpl$38 = /*#__PURE__*/ _$template(`<div>boolTestBinding`),
+  _tmpl$39 = /*#__PURE__*/ _$template(`<div>boolTestObjBinding.value`),
+  _tmpl$40 = /*#__PURE__*/ _$template(`<div>fn`),
+  _tmpl$41 = /*#__PURE__*/ _$template(`<div before quack>should have space before`),
+  _tmpl$42 = /*#__PURE__*/ _$template(`<div before quack after>should have space before/after`),
+  _tmpl$43 = /*#__PURE__*/ _$template(`<div quack after>should have space before/after`),
+  _tmpl$44 = /*#__PURE__*/ _$template(`<img src>`),
+  _tmpl$45 = /*#__PURE__*/ _$template(`<div><img src>`),
+  _tmpl$46 = /*#__PURE__*/ _$template(`<img src loading=lazy>`, true, false, false),
+  _tmpl$47 = /*#__PURE__*/ _$template(`<div><img src loading=lazy>`, true, false, false),
+  _tmpl$48 = /*#__PURE__*/ _$template(`<iframe src>`),
+  _tmpl$49 = /*#__PURE__*/ _$template(`<div><iframe src>`),
+  _tmpl$50 = /*#__PURE__*/ _$template(`<iframe src loading=lazy>`, true, false, false),
+  _tmpl$51 = /*#__PURE__*/ _$template(`<div><iframe src loading=lazy>`, true, false, false),
+  _tmpl$52 = /*#__PURE__*/ _$template(`<div title="<u>data</u>">`),
+  _tmpl$53 = /*#__PURE__*/ _$template(`<div truestr=true truestrjs=true>`),
+  _tmpl$54 = /*#__PURE__*/ _$template(`<div falsestr=false falsestrjs=false>`),
+  _tmpl$55 = /*#__PURE__*/ _$template(`<math display=block><mrow>`, false, false, true),
+  _tmpl$56 = /*#__PURE__*/ _$template(`<mrow><mi>x</mi><mo>=`, false, false, true),
+  _tmpl$57 = /*#__PURE__*/ _$template(`<div style=background:red>`),
+  _tmpl$58 = /*#__PURE__*/ _$template(
     `<div style=background:red;color:green;margin:3;padding:0.4>`
   ),
-  _tmpl$58 = /*#__PURE__*/ _$template(`<div style=background:red;color:green>`);
+  _tmpl$59 = /*#__PURE__*/ _$template(`<div style=background:red;color:green>`),
+  _tmpl$60 = /*#__PURE__*/ _$template(`<div style="padding-left:clamp(2px, 2px, 2px)">`),
+  _tmpl$61 = /*#__PURE__*/ _$template(`<div style="a:clamp(2px, 2px, 2px)">`);
 import * as styles from "./styles.module.css";
 import { binding } from "somewhere";
 function refFn() {}
@@ -291,12 +294,11 @@ const template20 = (() => {
   return _el$26;
 })();
 const template21 = (() => {
-  var _el$29 = _tmpl$4();
+  var _el$29 = _tmpl$14();
   _$effect(_$p =>
     _$style(
       _el$29,
       {
-        a: "static",
         ...rest
       },
       _$p
@@ -304,7 +306,7 @@ const template21 = (() => {
   );
   return _el$29;
 })();
-const template22 = _tmpl$14();
+const template22 = _tmpl$15();
 const template23 = (() => {
   var _el$31 = _tmpl$4();
   _$insert(_el$31, () => "t" in test && "true");
@@ -312,7 +314,7 @@ const template23 = (() => {
   return _el$31;
 })();
 const template24 = (() => {
-  var _el$32 = _tmpl$15();
+  var _el$32 = _tmpl$16();
   _$spread(
     _el$32,
     _$mergeProps(props, {
@@ -324,7 +326,7 @@ const template24 = (() => {
   return _el$32;
 })();
 const template25 = (() => {
-  var _el$33 = _tmpl$16(),
+  var _el$33 = _tmpl$17(),
     _el$34 = _el$33.firstChild;
   _$insert(_el$33, () => props.children, _el$34);
   _$spread(
@@ -338,13 +340,13 @@ const template25 = (() => {
   return _el$33;
 })();
 const template26 = (() => {
-  var _el$35 = _tmpl$17();
+  var _el$35 = _tmpl$18();
   _$setAttribute(_el$35, "middle", middle);
   _$spread(_el$35, spread, false, true);
   return _el$35;
 })();
 const template27 = (() => {
-  var _el$36 = _tmpl$17();
+  var _el$36 = _tmpl$18();
   _$spread(
     _el$36,
     _$mergeProps(
@@ -360,7 +362,7 @@ const template27 = (() => {
   return _el$36;
 })();
 const template28 = (() => {
-  var _el$37 = _tmpl$18(),
+  var _el$37 = _tmpl$19(),
     _el$38 = _el$37.firstChild,
     _el$39 = _el$38.firstChild,
     _el$40 = _el$38.nextSibling,
@@ -378,7 +380,7 @@ const template29 = (() => {
   _$insert(_el$42, !!someValue);
   return _el$42;
 })();
-const template30 = _tmpl$19();
+const template30 = _tmpl$20();
 const template31 = (() => {
   var _el$44 = _tmpl$4();
   _$effect(_$p => _$setStyleProperty(_el$44, "background-color", getStore.itemProperties.color));
@@ -387,22 +389,22 @@ const template31 = (() => {
 const template32 = _tmpl$4();
 const template33 = [
   (() => {
-    var _el$46 = _tmpl$20();
+    var _el$46 = _tmpl$21();
     _$className(_el$46, styles.button);
     return _el$46;
   })(),
   (() => {
-    var _el$47 = _tmpl$20();
+    var _el$47 = _tmpl$21();
     _$className(_el$47, styles["foo--bar"]);
     return _el$47;
   })(),
   (() => {
-    var _el$48 = _tmpl$20();
+    var _el$48 = _tmpl$21();
     _$effect(() => _$className(_el$48, styles.foo.bar));
     return _el$48;
   })(),
   (() => {
-    var _el$49 = _tmpl$20();
+    var _el$49 = _tmpl$21();
     _$effect(() => _$className(_el$49, styles[foo()]));
     return _el$49;
   })()
@@ -438,14 +440,14 @@ const template38 = (() => {
   typeof _ref$7 === "function" && _$use(_ref$7, _el$54);
   return _el$54;
 })();
-const template39 = _tmpl$21();
+const template39 = _tmpl$22();
 const template40 = (() => {
   var _el$56 = _tmpl$4();
   _$effect(_$p => _$setStyleProperty(_el$56, "color", a()));
   return _el$56;
 })();
 const template41 = (() => {
-  var _el$57 = _tmpl$22(),
+  var _el$57 = _tmpl$23(),
     _el$58 = _el$57.firstChild,
     _el$59 = _el$58.nextSibling;
   _$effect(() => (_el$58.value = Color.Red));
@@ -462,57 +464,57 @@ const boolTestBinding = false;
 const boolTestObjBinding = {
   value: false
 };
-const template42 = _tmpl$23();
-const template43 = _tmpl$24();
-const template44 = _tmpl$25();
-const template45 = _tmpl$26();
-const template46 = _tmpl$27();
-const template47 = _tmpl$28();
-const template48 = _tmpl$29();
-const template49 = _tmpl$30();
-const template50 = _tmpl$31();
-const template51 = _tmpl$32();
-const template52 = _tmpl$33();
-const template53 = _tmpl$34();
+const template42 = _tmpl$24();
+const template43 = _tmpl$25();
+const template44 = _tmpl$26();
+const template45 = _tmpl$27();
+const template46 = _tmpl$28();
+const template47 = _tmpl$29();
+const template48 = _tmpl$30();
+const template49 = _tmpl$31();
+const template50 = _tmpl$32();
+const template51 = _tmpl$33();
+const template52 = _tmpl$34();
+const template53 = _tmpl$35();
 const template54 = (() => {
-  var _el$72 = _tmpl$35();
+  var _el$72 = _tmpl$36();
   _$effect(() => _$setBoolAttribute(_el$72, "quack", boolTest()));
   return _el$72;
 })();
 const template55 = (() => {
-  var _el$73 = _tmpl$36();
+  var _el$73 = _tmpl$37();
   _$setBoolAttribute(_el$73, "quack", boolTest);
   return _el$73;
 })();
 const template56 = (() => {
-  var _el$74 = _tmpl$37();
+  var _el$74 = _tmpl$38();
   _$setBoolAttribute(_el$74, "quack", boolTestBinding);
   return _el$74;
 })();
 const template57 = (() => {
-  var _el$75 = _tmpl$38();
+  var _el$75 = _tmpl$39();
   _$effect(() => _$setBoolAttribute(_el$75, "quack", boolTestObjBinding.value));
   return _el$75;
 })();
 const template58 = (() => {
-  var _el$76 = _tmpl$39();
+  var _el$76 = _tmpl$40();
   _$setBoolAttribute(_el$76, "quack", () => false);
   return _el$76;
 })();
-const template59 = _tmpl$40();
-const template60 = _tmpl$41();
-const template61 = _tmpl$42();
+const template59 = _tmpl$41();
+const template60 = _tmpl$42();
+const template61 = _tmpl$43();
 // this crash it for some reason- */ const template62 = <div bool:quack>really empty</div>;
 
-const template63 = _tmpl$43();
-const template64 = _tmpl$44();
-const template65 = _tmpl$45();
-const template66 = _tmpl$46();
-const template67 = _tmpl$47();
-const template68 = _tmpl$48();
-const template69 = _tmpl$49();
-const template70 = _tmpl$50();
-const template71 = _tmpl$51();
+const template63 = _tmpl$44();
+const template64 = _tmpl$45();
+const template65 = _tmpl$46();
+const template66 = _tmpl$47();
+const template67 = _tmpl$48();
+const template68 = _tmpl$49();
+const template69 = _tmpl$50();
+const template70 = _tmpl$51();
+const template71 = _tmpl$52();
 const template72 = (() => {
   var _el$89 = _tmpl$4();
   _$use(binding, _el$89);
@@ -542,12 +544,12 @@ const template76 = (() => {
   return _el$93;
 })();
 const template77 = (() => {
-  var _el$94 = _tmpl$52();
+  var _el$94 = _tmpl$53();
   _$setAttribute(_el$94, "true", true);
   return _el$94;
 })();
 const template78 = (() => {
-  var _el$95 = _tmpl$53();
+  var _el$95 = _tmpl$54();
   _$setAttribute(_el$95, "false", false);
   return _el$95;
 })();
@@ -563,26 +565,49 @@ const template80 = (() => {
   _$setAttribute(_el$97, "false", false);
   return _el$97;
 })();
-const template81 = _tmpl$54();
-const template82 = _tmpl$55();
-const template83 = _tmpl$56();
-const template84 = _tmpl$57();
-const template85 = _tmpl$58();
+const template81 = _tmpl$55();
+const template82 = _tmpl$56();
+const template83 = _tmpl$57();
+const template84 = _tmpl$58();
+const template85 = _tmpl$59();
 const template86 = (() => {
-  var _el$103 = _tmpl$58();
+  var _el$103 = _tmpl$59();
   _$effect(_$p => _$setStyleProperty(_el$103, "border", signal()));
   return _el$103;
 })();
 const template87 = (() => {
-  var _el$104 = _tmpl$58();
+  var _el$104 = _tmpl$59();
   _$setStyleProperty(_el$104, "border", somevalue);
   return _el$104;
 })();
 const template88 = (() => {
-  var _el$105 = _tmpl$58();
+  var _el$105 = _tmpl$59();
   _$effect(_$p => _$setStyleProperty(_el$105, "border", some.access));
   return _el$105;
 })();
+const template89 = _tmpl$59();
+{
+  _tmpl$60();
+}
+{
+  _tmpl$61();
+}
+{
+  (() => {
+    var _el$109 = _tmpl$4();
+    _$effect(_$p =>
+      _$style(
+        _el$109,
+        {
+          [computedkey]: "clamp(2px, 2px, 2px)"
+        },
+        _$p
+      )
+    );
+    return _el$109;
+  })();
+}
+_$delegateEvents(["click", "input"]);
 const template89 = _tmpl$58();
 {
   const o = {
diff --git a/packages/babel-plugin-jsx-dom-expressions/test/__dom_hydratable_fixtures__/SVG/output.js b/packages/babel-plugin-jsx-dom-expressions/test/__dom_hydratable_fixtures__/SVG/output.js
index e970613a..6173e766 100644
--- a/packages/babel-plugin-jsx-dom-expressions/test/__dom_hydratable_fixtures__/SVG/output.js
+++ b/packages/babel-plugin-jsx-dom-expressions/test/__dom_hydratable_fixtures__/SVG/output.js
@@ -4,15 +4,15 @@ import { setAttributeNS as _$setAttributeNS } from "r-dom";
 import { createComponent as _$createComponent } from "r-dom";
 import { runHydrationEvents as _$runHydrationEvents } from "r-dom";
 import { spread as _$spread } from "r-dom";
+import { setStyleProperty as _$setStyleProperty } from "r-dom";
 import { setAttribute as _$setAttribute } from "r-dom";
 import { effect as _$effect } from "r-dom";
-import { setStyleProperty as _$setStyleProperty } from "r-dom";
 import { getNextElement as _$getNextElement } from "r-dom";
 var _tmpl$ = /*#__PURE__*/ _$template(
     `<svg width=400 height=180><rect stroke-width=2 x=50 y=20 rx=20 ry=20 width=150 height=150 style=fill:red;stroke:black;stroke-width:5;opacity:0.5></rect><linearGradient gradientTransform=rotate(25)><stop offset=0%>`
   ),
   _tmpl$2 = /*#__PURE__*/ _$template(
-    `<svg width=400 height=180><rect rx=20 ry=20 width=150 height=150>`
+    `<svg width=400 height=180><rect rx=20 ry=20 width=150 height=150 style=fill:red;stroke:black;opacity:0.5>`
   ),
   _tmpl$3 = /*#__PURE__*/ _$template(`<svg width=400 height=180><rect>`),
   _tmpl$4 = /*#__PURE__*/ _$template(
@@ -31,9 +31,6 @@ const template = _$getNextElement(_tmpl$);
 const template2 = (() => {
   var _el$2 = _$getNextElement(_tmpl$2),
     _el$3 = _el$2.firstChild;
-  _$setStyleProperty(_el$3, "fill", "red");
-  _$setStyleProperty(_el$3, "stroke", "black");
-  _$setStyleProperty(_el$3, "opacity", "0.5");
   _$effect(
     _p$ => {
       var _v$ = state.name,
@@ -83,4 +80,4 @@ const template8 = (() => {
     _el$12 = _el$11.firstChild;
   _$setProperty(_el$12, "textContent", text);
   return _el$11;
-})();
+})();
\ No newline at end of file
diff --git a/packages/babel-plugin-jsx-dom-expressions/test/__dom_hydratable_fixtures__/attributeExpressions/code.js b/packages/babel-plugin-jsx-dom-expressions/test/__dom_hydratable_fixtures__/attributeExpressions/code.js
index 34249d8f..9a476209 100644
--- a/packages/babel-plugin-jsx-dom-expressions/test/__dom_hydratable_fixtures__/attributeExpressions/code.js
+++ b/packages/babel-plugin-jsx-dom-expressions/test/__dom_hydratable_fixtures__/attributeExpressions/code.js
@@ -118,7 +118,7 @@ const template20 = (
   </div>
 );
 
-const template21 = <div style={{ a: "static", ...rest }}></div>;
+const template21 = <div style={{ c: "static", ...rest }}></div>;
 
 const template22 = <div data='"hi"' data2={'"'} />;
 
diff --git a/packages/babel-plugin-jsx-dom-expressions/test/__dom_hydratable_fixtures__/attributeExpressions/output.js b/packages/babel-plugin-jsx-dom-expressions/test/__dom_hydratable_fixtures__/attributeExpressions/output.js
index 8f8816a5..424faf5c 100644
--- a/packages/babel-plugin-jsx-dom-expressions/test/__dom_hydratable_fixtures__/attributeExpressions/output.js
+++ b/packages/babel-plugin-jsx-dom-expressions/test/__dom_hydratable_fixtures__/attributeExpressions/output.js
@@ -29,19 +29,20 @@ var _tmpl$ = /*#__PURE__*/ _$template(`<div id=main><h1 class=base id=my-h1><a h
   _tmpl$11 = /*#__PURE__*/ _$template(`<button class="a b c">Hi`),
   _tmpl$12 = /*#__PURE__*/ _$template(`<div class="bg-red-500 flex flex-col">`),
   _tmpl$13 = /*#__PURE__*/ _$template(`<div><input readonly><input>`),
-  _tmpl$14 = /*#__PURE__*/ _$template(`<div data="&quot;hi&quot;"data2="&quot;">`),
-  _tmpl$15 = /*#__PURE__*/ _$template(`<a>`),
-  _tmpl$16 = /*#__PURE__*/ _$template(`<div><!$><!/><a>`),
-  _tmpl$17 = /*#__PURE__*/ _$template(`<div start=Hi>Hi`),
-  _tmpl$18 = /*#__PURE__*/ _$template(`<label><span>Input is <!$><!/></span><input><div>`),
-  _tmpl$19 = /*#__PURE__*/ _$template(
+  _tmpl$14 = /*#__PURE__*/ _$template(`<div style=c:static>`),
+  _tmpl$15 = /*#__PURE__*/ _$template(`<div data="&quot;hi&quot;"data2="&quot;">`),
+  _tmpl$16 = /*#__PURE__*/ _$template(`<a>`),
+  _tmpl$17 = /*#__PURE__*/ _$template(`<div><!$><!/><a>`),
+  _tmpl$18 = /*#__PURE__*/ _$template(`<div start=Hi>Hi`),
+  _tmpl$19 = /*#__PURE__*/ _$template(`<label><span>Input is <!$><!/></span><input><div>`),
+  _tmpl$20 = /*#__PURE__*/ _$template(
     `<div class="class1 class2 class3 class4 class5 class6"random="random1 random2\n    random3 random4"style="color:red;background-color:blue !important;border:1px solid black;font-size:12px">`
   ),
-  _tmpl$20 = /*#__PURE__*/ _$template(`<button>`),
-  _tmpl$21 = /*#__PURE__*/ _$template(`<input value=10>`),
-  _tmpl$22 = /*#__PURE__*/ _$template(`<select><option>Red</option><option>Blue`),
-  _tmpl$23 = /*#__PURE__*/ _$template(`<div a a a a=0 a a a>`),
-  _tmpl$24 = /*#__PURE__*/ _$template(`<video>`);
+  _tmpl$21 = /*#__PURE__*/ _$template(`<button>`),
+  _tmpl$22 = /*#__PURE__*/ _$template(`<input value=10>`),
+  _tmpl$23 = /*#__PURE__*/ _$template(`<select><option>Red</option><option>Blue`),
+  _tmpl$24 = /*#__PURE__*/ _$template(`<div a a a a=0 a a a>`),
+  _tmpl$25 = /*#__PURE__*/ _$template(`<video>`);
 import * as styles from "./styles.module.css";
 const selected = true;
 let id = "my-h1";
@@ -259,12 +260,11 @@ const template20 = (() => {
   return _el$26;
 })();
 const template21 = (() => {
-  var _el$29 = _$getNextElement(_tmpl$4);
+  var _el$29 = _$getNextElement(_tmpl$14);
   _$effect(_$p =>
     _$style(
       _el$29,
       {
-        a: "static",
         ...rest
       },
       _$p
@@ -272,7 +272,7 @@ const template21 = (() => {
   );
   return _el$29;
 })();
-const template22 = _$getNextElement(_tmpl$14);
+const template22 = _$getNextElement(_tmpl$15);
 const template23 = (() => {
   var _el$31 = _$getNextElement(_tmpl$4);
   _$insert(_el$31, () => "t" in test && "true");
@@ -280,7 +280,7 @@ const template23 = (() => {
   return _el$31;
 })();
 const template24 = (() => {
-  var _el$32 = _$getNextElement(_tmpl$15);
+  var _el$32 = _$getNextElement(_tmpl$16);
   _$spread(
     _el$32,
     _$mergeProps(props, {
@@ -293,7 +293,7 @@ const template24 = (() => {
   return _el$32;
 })();
 const template25 = (() => {
-  var _el$33 = _$getNextElement(_tmpl$16),
+  var _el$33 = _$getNextElement(_tmpl$17),
     _el$35 = _el$33.firstChild,
     [_el$36, _co$] = _$getNextMarker(_el$35.nextSibling),
     _el$34 = _el$36.nextSibling;
@@ -310,14 +310,14 @@ const template25 = (() => {
   return _el$33;
 })();
 const template26 = (() => {
-  var _el$37 = _$getNextElement(_tmpl$17);
+  var _el$37 = _$getNextElement(_tmpl$18);
   _$setAttribute(_el$37, "middle", middle);
   _$spread(_el$37, spread, false, true);
   _$runHydrationEvents();
   return _el$37;
 })();
 const template27 = (() => {
-  var _el$38 = _$getNextElement(_tmpl$17);
+  var _el$38 = _$getNextElement(_tmpl$18);
   _$spread(
     _el$38,
     _$mergeProps(
@@ -334,7 +334,7 @@ const template27 = (() => {
   return _el$38;
 })();
 const template28 = (() => {
-  var _el$39 = _$getNextElement(_tmpl$18),
+  var _el$39 = _$getNextElement(_tmpl$19),
     _el$40 = _el$39.firstChild,
     _el$41 = _el$40.firstChild,
     _el$42 = _el$41.nextSibling,
@@ -355,7 +355,7 @@ const template29 = (() => {
   _$insert(_el$46, !!someValue);
   return _el$46;
 })();
-const template30 = _$getNextElement(_tmpl$19);
+const template30 = _$getNextElement(_tmpl$20);
 const template31 = (() => {
   var _el$48 = _$getNextElement(_tmpl$4);
   _$effect(_$p => _$setStyleProperty(_el$48, "background-color", getStore.itemProperties.color));
@@ -364,22 +364,22 @@ const template31 = (() => {
 const template32 = _$getNextElement(_tmpl$4);
 const template33 = [
   (() => {
-    var _el$50 = _$getNextElement(_tmpl$20);
+    var _el$50 = _$getNextElement(_tmpl$21);
     _$className(_el$50, styles.button);
     return _el$50;
   })(),
   (() => {
-    var _el$51 = _$getNextElement(_tmpl$20);
+    var _el$51 = _$getNextElement(_tmpl$21);
     _$className(_el$51, styles["foo--bar"]);
     return _el$51;
   })(),
   (() => {
-    var _el$52 = _$getNextElement(_tmpl$20);
+    var _el$52 = _$getNextElement(_tmpl$21);
     _$effect(() => _$className(_el$52, styles.foo.bar));
     return _el$52;
   })(),
   (() => {
-    var _el$53 = _$getNextElement(_tmpl$20);
+    var _el$53 = _$getNextElement(_tmpl$21);
     _$effect(() => _$className(_el$53, styles[foo()]));
     return _el$53;
   })()
@@ -416,14 +416,14 @@ const template38 = (() => {
   typeof _ref$7 === "function" && _$use(_ref$7, _el$58);
   return _el$58;
 })();
-const template39 = _$getNextElement(_tmpl$21);
+const template39 = _$getNextElement(_tmpl$22);
 const template40 = (() => {
   var _el$60 = _$getNextElement(_tmpl$4);
   _$effect(_$p => _$setStyleProperty(_el$60, "color", a()));
   return _el$60;
 })();
 const template41 = (() => {
-  var _el$61 = _$getNextElement(_tmpl$22),
+  var _el$61 = _$getNextElement(_tmpl$23),
     _el$62 = _el$61.firstChild,
     _el$63 = _el$62.nextSibling;
   _$effect(() => _$setProperty(_el$62, "value", Color.Red));
@@ -432,7 +432,7 @@ const template41 = (() => {
   return _el$61;
 })();
 const template42 = (() => {
-  var _el$64 = _$getNextElement(_tmpl$23);
+  var _el$64 = _$getNextElement(_tmpl$24);
   _$setAttribute(_el$64, "a", true);
   _$setAttribute(_el$64, "a", false);
   _$setAttribute(_el$64, "a", undefined);
@@ -441,32 +441,32 @@ const template42 = (() => {
   return _el$64;
 })();
 const template43 = (() => {
-  var _el$65 = _$getNextElement(_tmpl$24);
+  var _el$65 = _$getNextElement(_tmpl$25);
   _$setProperty(_el$65, "playsInline", value);
   return _el$65;
 })();
 const template44 = (() => {
-  var _el$66 = _$getNextElement(_tmpl$24);
+  var _el$66 = _$getNextElement(_tmpl$25);
   _$setProperty(_el$66, "playsInline", true);
   return _el$66;
 })();
 const template45 = (() => {
-  var _el$67 = _$getNextElement(_tmpl$24);
+  var _el$67 = _$getNextElement(_tmpl$25);
   _$setProperty(_el$67, "playsInline", false);
   return _el$67;
 })();
 const template46 = (() => {
-  var _el$68 = _$getNextElement(_tmpl$24);
+  var _el$68 = _$getNextElement(_tmpl$25);
   _$setProperty(_el$68, "playsInline", value);
   return _el$68;
 })();
 const template47 = (() => {
-  var _el$69 = _$getNextElement(_tmpl$24);
+  var _el$69 = _$getNextElement(_tmpl$25);
   _$setProperty(_el$69, "playsInline", true);
   return _el$69;
 })();
 const template48 = (() => {
-  var _el$70 = _$getNextElement(_tmpl$24);
+  var _el$70 = _$getNextElement(_tmpl$25);
   _$setProperty(_el$70, "playsInline", false);
   return _el$70;
 })();
diff --git a/packages/babel-plugin-jsx-dom-expressions/test/__dynamic_fixtures__/SVG/output.js b/packages/babel-plugin-jsx-dom-expressions/test/__dynamic_fixtures__/SVG/output.js
index 80152e2c..c1ba8308 100644
--- a/packages/babel-plugin-jsx-dom-expressions/test/__dynamic_fixtures__/SVG/output.js
+++ b/packages/babel-plugin-jsx-dom-expressions/test/__dynamic_fixtures__/SVG/output.js
@@ -2,14 +2,14 @@ import { template as _$template } from "r-dom";
 import { setAttributeNS as _$setAttributeNS } from "r-dom";
 import { createComponent as _$createComponent } from "r-custom";
 import { spread as _$spread } from "r-dom";
+import { setStyleProperty as _$setStyleProperty } from "r-dom";
 import { setAttribute as _$setAttribute } from "r-dom";
 import { effect as _$effect } from "r-custom";
-import { setStyleProperty as _$setStyleProperty } from "r-dom";
 var _tmpl$ = /*#__PURE__*/ _$template(
     `<svg width=400 height=180><rect stroke-width=2 x=50 y=20 rx=20 ry=20 width=150 height=150 style=fill:red;stroke:black;stroke-width:5;opacity:0.5></rect><linearGradient gradientTransform=rotate(25)><stop offset=0%>`
   ),
   _tmpl$2 = /*#__PURE__*/ _$template(
-    `<svg width=400 height=180><rect rx=20 ry=20 width=150 height=150>`
+    `<svg width=400 height=180><rect rx=20 ry=20 width=150 height=150 style=fill:red;stroke:black;opacity:0.5>`
   ),
   _tmpl$3 = /*#__PURE__*/ _$template(`<svg width=400 height=180><rect>`),
   _tmpl$4 = /*#__PURE__*/ _$template(
@@ -28,9 +28,6 @@ const template = _tmpl$();
 const template2 = (() => {
   var _el$2 = _tmpl$2(),
     _el$3 = _el$2.firstChild;
-  _$setStyleProperty(_el$3, "fill", "red");
-  _$setStyleProperty(_el$3, "stroke", "black");
-  _$setStyleProperty(_el$3, "opacity", "0.5");
   _$effect(
     _p$ => {
       var _v$ = state.name,
@@ -79,4 +76,4 @@ const template8 = (() => {
     _el$12 = _el$11.firstChild;
   _el$12.textContent = text;
   return _el$11;
-})();
+})();
\ No newline at end of file
diff --git a/packages/babel-plugin-jsx-dom-expressions/test/__ssr_fixtures__/attributeExpressions/code.js b/packages/babel-plugin-jsx-dom-expressions/test/__ssr_fixtures__/attributeExpressions/code.js
index f6757212..479fe358 100644
--- a/packages/babel-plugin-jsx-dom-expressions/test/__ssr_fixtures__/attributeExpressions/code.js
+++ b/packages/babel-plugin-jsx-dom-expressions/test/__ssr_fixtures__/attributeExpressions/code.js
@@ -118,7 +118,7 @@ const template20 = (
   </div>
 );
 
-const template21 = <div style={{ a: "static", ...rest }}></div>;
+const template21 = <div style={{ d: "static", ...rest }}></div>;
 
 const template22 = <div data='"hi"' data2={'"'} />;
 
diff --git a/packages/babel-plugin-jsx-dom-expressions/test/__ssr_fixtures__/attributeExpressions/output.js b/packages/babel-plugin-jsx-dom-expressions/test/__ssr_fixtures__/attributeExpressions/output.js
index 041d54d3..83e48eac 100644
--- a/packages/babel-plugin-jsx-dom-expressions/test/__ssr_fixtures__/attributeExpressions/output.js
+++ b/packages/babel-plugin-jsx-dom-expressions/test/__ssr_fixtures__/attributeExpressions/output.js
@@ -146,7 +146,7 @@ const template20 = _$ssr(
 const template21 = _$ssr(
   _tmpl$16,
   _$ssrStyle({
-    a: "static",
+    d: "static",
     ...rest
   })
 );
diff --git a/packages/babel-plugin-jsx-dom-expressions/test/__ssr_hydratable_fixtures__/attributeExpressions/code.js b/packages/babel-plugin-jsx-dom-expressions/test/__ssr_hydratable_fixtures__/attributeExpressions/code.js
index 0c74d090..d72b62a2 100644
--- a/packages/babel-plugin-jsx-dom-expressions/test/__ssr_hydratable_fixtures__/attributeExpressions/code.js
+++ b/packages/babel-plugin-jsx-dom-expressions/test/__ssr_hydratable_fixtures__/attributeExpressions/code.js
@@ -118,7 +118,7 @@ const template20 = (
   </div>
 );
 
-const template21 = <div style={{ a: "static", ...rest }}></div>;
+const template21 = <div style={{ e: "static", ...rest}}></div>;
 
 const template22 = <div data='"hi"' data2={'"'} />;
 
diff --git a/packages/babel-plugin-jsx-dom-expressions/test/__ssr_hydratable_fixtures__/attributeExpressions/output.js b/packages/babel-plugin-jsx-dom-expressions/test/__ssr_hydratable_fixtures__/attributeExpressions/output.js
index 333bbd94..0352351f 100644
--- a/packages/babel-plugin-jsx-dom-expressions/test/__ssr_hydratable_fixtures__/attributeExpressions/output.js
+++ b/packages/babel-plugin-jsx-dom-expressions/test/__ssr_hydratable_fixtures__/attributeExpressions/output.js
@@ -161,7 +161,7 @@ const template21 = _$ssr(
   _tmpl$16,
   _$ssrHydrationKey(),
   _$ssrStyle({
-    a: "static",
+    e: "static",
     ...rest
   })
 );