Inline in template value in style objects using evaluate().confident

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);
+              }
             }
           }
         }

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={'"'} />;