diff --git a/packages/babel-plugin-jsx-dom-expressions/src/ssr/element.js b/packages/babel-plugin-jsx-dom-expressions/src/ssr/element.js
index 285d7b09..e62ea365 100644
--- a/packages/babel-plugin-jsx-dom-expressions/src/ssr/element.js
+++ b/packages/babel-plugin-jsx-dom-expressions/src/ssr/element.js
@@ -332,14 +332,20 @@ function transformAttributes(path, results, info) {
             t.isObjectExpression(value.expression) &&
             !value.expression.properties.some(p => t.isSpreadElement(p))
           ) {
-            const props = value.expression.properties.map((p, i) =>
-              t.callExpression(registerImportMethod(path, "ssrStyleProperty"), [
+            const props = value.expression.properties.map((p, i) => {
+              if (p.computed) {
+                return t.callExpression(registerImportMethod(path, "ssrStyleProperty"), [
+                  t.binaryExpression("+", p.key, t.stringLiteral(":")),
+                  escapeExpression(path, p.value, true, true)
+                ]);
+              }
+              return t.callExpression(registerImportMethod(path, "ssrStyleProperty"), [
                 t.stringLiteral(
                   (i ? ";" : "") + (t.isIdentifier(p.key) ? p.key.name : p.key.value) + ":"
                 ),
                 escapeExpression(path, p.value, true, true)
-              ])
-            );
+              ]);
+            });
 
             let res = props[0];
             for (let i = 1; i < props.length; i++) {
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 479fe358..29bf4bb8 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
@@ -245,3 +245,13 @@ const template51 = (
   />
 );
 
+function Progress(props) {
+  return (
+    <div
+      class="progress-fill"
+      style={{
+        [props.orientation === 'y' ? 'height' : 'width']: `${props.value * 100}%`,
+      }}
+    />
+  );
+}
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 83e48eac..4bf22868 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
@@ -34,7 +34,8 @@ var _tmpl$ = ['<a href="/" class="', '">Welcome</a>'],
   _tmpl$26 = ["<video", "></video>"],
   _tmpl$27 = "<video playsinline></video>",
   _tmpl$28 = "<video></video>",
-  _tmpl$29 = ['<div class="bg-(--bg)" style="', '"></div>'];
+  _tmpl$29 = ['<div class="bg-(--bg)" style="', '"></div>'],
+  _tmpl$30 = ['<div class="progress-fill" style="', '"></div>'];
 import * as styles from "./styles.module.css";
 const selected = true;
 let id = "my-h1";
@@ -310,3 +311,12 @@ const template49 = _$ssr(_tmpl$27);
 const template50 = _$ssr(_tmpl$28);
 const nope = () => undefined;
 const template51 = _$ssr(_tmpl$29, _$ssrStyleProperty("--bg:", _$escape(nope(), true)));
+function Progress(props) {
+  return _$ssr(
+    _tmpl$30,
+    _$ssrStyleProperty(
+      (props.orientation === "y" ? "height" : "width") + ":",
+      `${_$escape(props.value, true) * 100}%`
+    )
+  );
+}
diff --git a/packages/dom-expressions/test/ssr/ssr.spec.js b/packages/dom-expressions/test/ssr/ssr.spec.js
index ad9beb94..862cfae7 100644
--- a/packages/dom-expressions/test/ssr/ssr.spec.js
+++ b/packages/dom-expressions/test/ssr/ssr.spec.js
@@ -10,7 +10,7 @@ globalThis.TextEncoder = function () {
   return { encode: v => v };
 };
 
-const fixture = `<div data-hk="0" id="main" data-id="12" aria-role="button" class="static selected" checked style="color:red" ><h1 custom-attr="1" disabled title="Hello John" style="background-color:red" class="selected"><a href="/">Welcome</a></h1></div>`;
+const fixture = `<div data-hk="0" id="main" data-id="12" aria-role="button" class="static selected" checked style="color:red" ><h1 custom-attr="1" disabled title="Hello John" style="background-color:red;width:100%" class="selected"><a href="/">Welcome</a></h1></div>`;
 const fixture2 = `<span data-hk="0" class="Hello John" > Hello &lt;div/> </span>`;
 const fixture3 = `<span> Hello &lt;div/><script nonce=\"1a2s3d4f5g\">window._$HY||(e=>{let t=e=>e&&e.hasAttribute&&(e.hasAttribute(\"data-hk\")?e:t(e.host&&e.host.nodeType?e.host:e.parentNode));[\"click\", \"input\"].forEach((o=>document.addEventListener(o,(o=>{if(!e.events)return;let s=t(o.composedPath&&o.composedPath()[0]||o.target);s&&!e.completed.has(s)&&e.events.push([s,o])}))))})(_$HY={events:[],completed:new WeakSet,r:{},fe(){}});</script><!--xs--><link rel=\"modulepreload\" href=\"chunk.js\"></span>`;
 const fixture4 = `<span > Hello &lt;div/> </span>`;
@@ -35,6 +35,8 @@ const Comp1 = () => {
       "custom-attr": "1"
     });
 
+  const props = { something: !!1, value: 1 }
+
   return r.ssrElement(
     "div",
     {
@@ -54,6 +56,7 @@ const Comp1 = () => {
           "background-color": color(),
           "border-color": colorUndefined,
           "color": colorUndefinedFn(),
+          [props.something === true ? "width" : 'height']: `${props.value * 100}%`,
         },
         classList: {
           selected: selected(),