Preserve supported MJML button appearance on import

packages/email-renderer/src/mjml.ts

@@ -250,17 +250,35 @@ export function importMjml(
           slots: {},
         },
       ];
-    if (node.tagName === "mj-button")
+    if (node.tagName === "mj-button") {
+      const buttonStyles: BlockNode["styles"] = {};
+      const mappings: Record<string, [string, RegExp]> = {
+        align: ["textAlign", /^(left|center|right|start|end)$/],
+        "background-color": ["backgroundColor", /^(#[0-9a-f]{3,8}|rgba?\([0-9., %]+\))$/i],
+        color: ["color", /^(#[0-9a-f]{3,8}|rgba?\([0-9., %]+\))$/i],
+        "font-size": ["fontSize", /^\d+(?:\.\d+)?(?:px|rem|em|%)$/],
+        "font-weight": ["fontWeight", /^(normal|bold|[1-9]00)$/],
+        "border-radius": ["borderRadius", /^\d+(?:\.\d+)?(?:px|rem|em|%)$/],
+      };
+      for (const [attribute, raw] of Object.entries(a)) {
+        if (attribute === "href") continue;
+        const mapping = mappings[attribute];
+        const value = decode(raw).trim();
+        if (!mapping || value.length > 80 || !mapping[1].test(value)) {
+          errors.push({ code: "mjml.button-attribute", message: `Unsupported button attribute or value: ${attribute}.`, severity: "error", element: node.tagName, attribute });
+        } else buttonStyles[mapping[0]] = { base: value };
+      }
       return [
         {
           id,
           type: "content.button",
           version: 1,
-          props: { label: node.content ?? "Button", href: a.href ?? "" },
-          styles: {},
+          props: { label: decode(node.content ?? "Button"), href: decode(a.href ?? "") },
+          styles: buttonStyles,
           slots: {},
         },
       ];
+    }
     if (node.tagName === "mj-divider")
       return [{ id, type: "content.divider", version: 1, props: {}, styles: {}, slots: {} }];
     if (node.tagName === "mj-spacer")