jdrouet · jdrouet · Apr 11, 2026 · Mar 29, 2026 · Apr 11, 2026 · Apr 11, 2026
diff --git a/contributing.md b/contributing.md
@@ -282,9 +282,7 @@ node scripts/update-resources.js
 
 This compiles every `.mjml` file in the comparison directories using the official mjml library, then applies cleanup transformations (ID normalization, whitespace normalization, rounding adjustments). The generated `.html` file is the expected output.
 
-**Manual adjustments.** Sometimes the generated HTML needs tweaking because the `pretty` formatter or ID normalization is too aggressive. Common cases:
-- User-specified `id` attributes in `mj-raw` content get normalized to `id="00000000"` -- restore the original value.
-- Self-closing non-void elements like `<v:fill ... />` may need to be changed to `<v:fill ...></v:fill>` to match what mrml renders.
+**Manual adjustments.** Sometimes the generated HTML needs tweaking because the `pretty` formatter introduces artifacts. Known cases are already handled in the script's `cleanup()` function, but new cases may need a manual fix or a new cleanup rule in the script.
 
 ### 3. Register the test
 

diff --git a/packages/mrml-core/resources/compare/success/mj-raw-vml-namespace.html b/packages/mrml-core/resources/compare/success/mj-raw-vml-namespace.html
@@ -60,7 +60,7 @@
 
   <body style="word-spacing:normal;">
     <div aria-roledescription="email" role="article" lang="und" dir="auto">
-      <!--[if mso]><v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:128px;"><v:fill type="frame" src="https://example.com/image.jpg"></v:fill></v:rect><![endif]-->
+      <!--[if mso]><v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:128px;"><v:fill type="frame" src="https://example.com/image.jpg" /></v:rect><![endif]-->
     </div>
   </body>
 

diff --git a/packages/mrml-core/resources/compare/success/mj-section-full-width-background-url.html b/packages/mrml-core/resources/compare/success/mj-section-full-width-background-url.html
@@ -0,0 +1,89 @@
+<!doctype html>
+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
+
+  <head>
+    <title></title>
+    <!--[if !mso]><!-->
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <!--<![endif]-->
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style type="text/css">
+      #outlook a {
+        padding: 0;
+      }
+
+      body {
+        margin: 0;
+        padding: 0;
+        -webkit-text-size-adjust: 100%;
+        -ms-text-size-adjust: 100%;
+      }
+
+      table,
+      td {
+        border-collapse: collapse;
+        mso-table-lspace: 0pt;
+        mso-table-rspace: 0pt;
+      }
+
+      img {
+        border: 0;
+        height: auto;
+        line-height: 100%;
+        outline: none;
+        text-decoration: none;
+        -ms-interpolation-mode: bicubic;
+      }
+
+      p {
+        display: block;
+        margin: 13px 0;
+      }
+    </style>
+    <!--[if mso]>
+<noscript>
+<xml>
+<o:OfficeDocumentSettings>
+<o:AllowPNG/>
+<o:PixelsPerInch>96</o:PixelsPerInch>
+</o:OfficeDocumentSettings>
+</xml>
+</noscript>
+<![endif]-->
+    <!--[if lte mso 11]>
+<style type="text/css">
+.mj-outlook-group-fix { width:100% !important; }
+</style>
+<![endif]-->
+  </head>
+
+  <body style="word-spacing:normal;">
+    <div aria-roledescription="email" role="article" lang="und" dir="auto">
+      <table align="center" background="https://www.rust-lang.org/static/images/rust-logo-blk.svg" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:url('https://www.rust-lang.org/static/images/rust-logo-blk.svg') center top / contain no-repeat;background-position:center top;background-repeat:no-repeat;background-size:contain;width:100%;">
+        <tbody>
+          <tr>
+            <td>
+              <!--[if mso | IE]><v:rect style="mso-width-percent:1000;" xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false"><v:fill origin="0, -0.5" position="0, -0.5" src="https://www.rust-lang.org/static/images/rust-logo-blk.svg" type="frame" size="1,1" aspect="atmost" /><v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0"><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+              <div style="margin:0px auto;max-width:600px;">
+                <div style="line-height:0;font-size:0;">
+                  <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+                    <tbody>
+                      <tr>
+                        <td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
+                          <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr></tr></table><![endif]-->
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+              <!--[if mso | IE]></td></tr></table></v:textbox></v:rect><![endif]-->
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </body>
+
+</html>
diff --git a/packages/mrml-core/resources/compare/success/mj-section-full-width-background-url.mjml b/packages/mrml-core/resources/compare/success/mj-section-full-width-background-url.mjml
@@ -0,0 +1,11 @@
+<mjml>
+  <mj-body>
+    <mj-section
+      full-width="full-width"
+      background-url="https://www.rust-lang.org/static/images/rust-logo-blk.svg"
+      background-size="contain"
+      background-repeat="no-repeat"
+    >
+    </mj-section>
+  </mj-body>
+</mjml>
diff --git a/packages/mrml-core/src/mj_section/render.rs b/packages/mrml-core/src/mj_section/render.rs
@@ -226,7 +226,7 @@ pub trait SectionLikeRender<'root>: WithMjSectionBackground<'root> {
     {
         let full_width = self.is_full_width();
         let vrect = Tag::new("v:rect")
-            .maybe_add_attribute(
+            .maybe_add_style(
                 "mso-width-percent",
                 if full_width { Some("1000") } else { None },
             )
@@ -489,6 +489,7 @@ pub trait SectionLikeRender<'root>: WithMjSectionBackground<'root> {
         td.render_open(&mut cursor.buffer)?;
         //
         if self.has_background() {
+            cursor.buffer.start_conditional_tag();
             self.render_with_background(cursor, |cursor| {
                 self.render_wrap(cursor, |cursor| {
                     cursor.buffer.end_conditional_tag();
@@ -497,6 +498,7 @@ pub trait SectionLikeRender<'root>: WithMjSectionBackground<'root> {
                     Ok(())
                 })
             })?;
+            cursor.buffer.end_conditional_tag();
         } else {
             self.render_wrap(cursor, |cursor| {
                 cursor.buffer.end_conditional_tag();
@@ -609,6 +611,10 @@ mod tests {
     crate::should_render!(class, "mj-section-class");
     crate::should_render!(direction, "mj-section-direction");
     crate::should_render!(full_width, "mj-section-full-width");
+    crate::should_render!(
+        full_width_background_url,
+        "mj-section-full-width-background-url"
+    );
     crate::should_render!(padding, "mj-section-padding");
     crate::should_render!(text_align, "mj-section-text-align");
 }
diff --git a/packages/mrml-core/src/node/render.rs b/packages/mrml-core/src/node/render.rs
@@ -22,7 +22,7 @@ where
                 .push_attribute(key.as_str(), value.as_deref())?;
         }
         if self.element.children.is_empty() {
-            if is_void_element(self.element.tag.as_str()) {
+            if is_void_element(self.element.tag.as_str()) || self.element.tag.contains(':') {
                 cursor.buffer.closed_tag();
             } else {
                 cursor.buffer.close_tag();

diff --git a/scripts/update-resources.js b/scripts/update-resources.js
@@ -10,9 +10,17 @@ const iterate = (list, callback) =>
 
 const cleanupIds = (content) => {
   console.log(`⌛️ doing some cleanup on ids`);
-  content = content
-    .replace(/for="([a-zA-Z0-9]+)"/g, 'for="00000000"')
-    .replace(/id="([a-zA-Z0-9]+)"/g, 'id="00000000"');
+  // Collect all generated IDs referenced by for attributes (these are mjml-generated
+  // for checkbox/label pairs in accordion, navbar, etc.)
+  const generatedIds = new Set();
+  for (const match of content.matchAll(/for="([a-zA-Z0-9]+)"/g)) {
+    generatedIds.add(match[1]);
+  }
+  // Only normalize IDs that are part of a generated for/id pair
+  for (const id of generatedIds) {
+    content = content.replaceAll(`for="${id}"`, 'for="00000000"');
+    content = content.replaceAll(`id="${id}"`, 'id="00000000"');
+  }
   let matches;
   while (
     (matches = /mj-carousel-([a-zA-Z0-9]{12,16})-([a-zA-Z0-9\-]+)/g.exec(content))