mjml-rb 0.2.23 → 0.2.25

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f62367f40ca4f73440f35e4878e7adcfcb8002cb1011639bbe1cd55f922b7580
-  data.tar.gz: 952c39acdd8b9cf3e1f84da47b4b3dc11c4f35c4cf521cfaf30ad4c890197dc5
+  metadata.gz: e364fd8b1b8bb2e9020dec1afe71062b8efa5e6db3000edead4dad5280adb5c5
+  data.tar.gz: d975ccd74e68c83cd9324c538bd76046d9e2b29a9ce27e23054ebde79195bc6e
 SHA512:
-  metadata.gz: bd7df7e7cb49e766d89895bf5cd38351e5ce00a5b33c28ceabbf9de99a6bc88b5f2c66eec31cec72b36506c7a0a871b170d77bea0441ba964ec17990f4411d3f
-  data.tar.gz: 11a977350b4941d6dc852e5b4a7caa0d0a7f3b5e42a4e53d0f44bbb0ccee1ce55425d4bf66bed4024c9896ec9a44d64d884f986c56f8080b0dfb8684b625de1b
+  metadata.gz: 147b6bf2c9abda80086c29e440d002d3fab3768e96ee71e7faa8e8be5defb2e91e11d51ee422ce07caf3f2a698f23dd1001382bc3e69a4e1bd0e49d68a7f0659
+  data.tar.gz: 142f4902cb84b3fa00adb1608186d13e40559e60127c18ac7213bcf89804069bafc97666b2013d67fd3fdd2083a75b27e38fa63e97d71ed7cc9600bf9d92eba6

data/lib/mjml-rb/components/section.rb

@@ -541,10 +541,27 @@ module MjmlRb
         bg_color     = a["background-color"]
         border_radius = a["border-radius"]
         full_width   = a["full-width"] == "full-width"
+        bg_has       = has_background?(a)
         wrapper_gap  = context[:_wrapper_child_gap]
         has_border_radius = has_border_radius?(border_radius)
 
-        # renderBefore — same structure as section
+        # Background styles: url-based or color-only
+        background_styles = if bg_has
+                              bg_value = get_background(a)
+                              {
+                                "background" => bg_value,
+                                "background-position" => get_background_string(a),
+                                "background-repeat" => a["background-repeat"],
+                                "background-size" => a["background-size"]
+                              }
+                            else
+                              {
+                                "background" => bg_color,
+                                "background-color" => bg_color
+                              }
+                            end
+
+        # renderBefore — Outlook conditional table wrapper
         outlook_class = css_class ? "#{css_class}-outlook" : ""
         before_pairs = [
           ["align",       "center"],
@@ -560,22 +577,23 @@ module MjmlRb
 
         render_before = %(<!--[if mso | IE]><table#{outlook_attrs(before_pairs)}><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->)
 
+        # div and table styles: include background only when not full-width
         div_style = style_join(
-          "background"       => bg_color,
-          "background-color" => bg_color,
-          "border-radius"    => border_radius,
-          "overflow"         => (has_border_radius ? "hidden" : nil),
-          "margin"           => "0px auto",
-          "margin-top"       => wrapper_gap,
-          "max-width"        => (full_width ? nil : "#{container_px}px")
+          {
+            "border-radius"    => border_radius,
+            "overflow"         => (has_border_radius ? "hidden" : nil),
+            "margin"           => "0px auto",
+            "margin-top"       => wrapper_gap,
+            "max-width"        => (full_width ? nil : "#{container_px}px")
+          }.merge(full_width ? {} : background_styles)
         )
 
         table_style = style_join(
-          "background"       => bg_color,
-          "background-color" => bg_color,
-          "border-radius"    => border_radius,
-          "border-collapse"  => (has_border_radius ? "separate" : nil),
-          "width"            => "100%"
+          {
+            "border-radius"    => border_radius,
+            "border-collapse"  => (has_border_radius ? "separate" : nil),
+            "width"            => "100%"
+          }.merge(full_width ? {} : background_styles)
         )
 
         td_style = style_join(
@@ -590,17 +608,49 @@ module MjmlRb
           "text-align"     => a["text-align"]
         )
 
-        div_attrs = {"class" => css_class, "style" => div_style}
+        div_attrs = {"class" => (full_width ? nil : css_class), "style" => div_style}
         inner = merge_outlook_conditionals(render_wrapped_children_wrapper(node, context, container_px, a["gap"]))
+        inner_content = bg_has ? %(<div style="line-height:0;font-size:0">#{inner}</div>) : inner
+
+        table_attrs = {
+          "align" => "center",
+          "background" => (bg_has && !full_width ? a["background-url"] : nil),
+          "border" => "0",
+          "cellpadding" => "0",
+          "cellspacing" => "0",
+          "role" => "presentation",
+          "style" => table_style,
+          "width" => "100%"
+        }
 
         wrapper_html =
           %(<div#{html_attrs(div_attrs)}>) +
-          %(<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="#{table_style}" width="100%">) +
-          %(<tbody><tr><td style="#{td_style}">#{inner}</td></tr></tbody></table></div>)
+          %(<table#{html_attrs(table_attrs)}>) +
+          %(<tbody><tr><td style="#{td_style}">#{inner_content}</td></tr></tbody></table></div>)
 
         render_after = %(<!--[if mso | IE]></td></tr></table><![endif]-->)
 
-        "#{render_before}\n#{wrapper_html}\n#{render_after}"
+        if full_width
+          inner_all = "#{render_before}\n#{wrapper_html}\n#{render_after}"
+          body = bg_has ? render_with_background(inner_all, a, container_px, full_width: true) : inner_all
+
+          outer_style = full_width_table_style(a)
+          outer_attrs = {
+            "align" => "center",
+            "class" => css_class,
+            "background" => bg_has ? a["background-url"] : nil,
+            "border" => "0",
+            "cellpadding" => "0",
+            "cellspacing" => "0",
+            "role" => "presentation",
+            "style" => outer_style
+          }
+
+          %(<table#{html_attrs(outer_attrs)}><tbody><tr><td>#{body}</td></tr></tbody></table>)
+        else
+          body = bg_has ? render_with_background(wrapper_html, a, container_px) : wrapper_html
+          "#{render_before}\n#{body}\n#{render_after}"
+        end
       end
 
       # Wrap each child mj-section/mj-wrapper in an Outlook conditional <td>.

data/lib/mjml-rb/parser.rb

@@ -92,9 +92,13 @@ module MjmlRb
     end
 
     def normalize_html_void_tags(content)
-      # Remove closing tags for void elements (e.g. </br>, </hr>).
-      # These are invalid in both HTML and XML but appear in legacy content.
-      content = content.gsub(/<\/(#{HTML_VOID_TAGS.join("|")})\s*>/i, "")
+      # Legacy mail templates sometimes emit invalid closing </br> tags.
+      # Browser-style recovery treats them as actual line breaks, so preserve that.
+      content = content.gsub(%r{</br\s*>}i, "<br />")
+
+      # Remove other closing tags for void elements (e.g. </hr>, </img>).
+      # These are invalid in both HTML and XML and HTML5 recovery drops them.
+      content = content.gsub(/<\/(#{(HTML_VOID_TAGS - ["br"]).join("|")})\s*>/i, "")
 
       # Self-close opening void tags that aren't already self-closed.
       pattern = /<(#{HTML_VOID_TAGS.join("|")})(\s[^<>]*?)?>/i

data/lib/mjml-rb/version.rb

@@ -1,3 +1,3 @@
 module MjmlRb
-  VERSION = "0.2.23".freeze
+  VERSION = "0.2.25".freeze
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: mjml-rb
 version: !ruby/object:Gem::Version
-  version: 0.2.23
+  version: 0.2.25
 platform: ruby
 authors:
 - Andrei Andriichuk