[main] add option inlineStyles to disable style inlining

packages/babel-plugin-jsx-dom-expressions/README.md

@@ -198,6 +198,13 @@ Example usage:
 const template = <div>Hello</div>;
 ```
 
+### inlineStyles
+
+- Type: `boolean`
+- Default: `true`
+
+Style attributes in templates are inlined when possible: value is a string, `Record<string, string>`, etc. Inlining styles may not be desired when using strong CSP configurations. Disabling `inlineStyles` will cause all of the style definitions to be set at runtime.
+
 ## Special Binding
 
 ### ref

packages/babel-plugin-jsx-dom-expressions/src/config.ts

@@ -14,5 +14,6 @@ export default {
   staticMarker: "@once",
   effectWrapper: "effect",
   memoWrapper: "memo",
-  validate: true
+  validate: true,
+  inlineStyles: true
 };

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

@@ -90,6 +90,27 @@ export function transformElement(path, info) {
       skipTemplate: false
     };
 
+  if (!config.inlineStyles) {
+    path
+      .get("openingElement")
+      .get("attributes")
+      .forEach(a => {
+        if (a.node.name?.name === "style") {
+          let value = a.node.value.expression ? a.node.value.expression : a.node.value;
+          if (t.isStringLiteral(value)) {
+            // jsx attribute value is a sting that may takes more than one line
+            value = t.templateLiteral(
+              [t.templateElement({ raw: value.value, cooked: value.value })],
+              []
+            );
+          }
+          a.get("value").replaceWith(
+            t.jSXExpressionContainer(t.callExpression(t.arrowFunctionExpression([], value), []))
+          );
+        }
+      });
+  }
+
   path
     .get("openingElement")
     .get("attributes")