mjml-rb 0.2.30 → 0.2.32

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 60152ad5a5d0db48c258f49e6f8b0f3af02fafc7a792b2eb5466a9ea9a2e5648
-  data.tar.gz: 39e06f0b1987f17f75a03a18b20e35926a46972d8a128be50dc903d52643629b
+  metadata.gz: 5f70adefb32b3a7bb2df503b8749cfbd2fde06bb819c6bfc3e587a1a8eb65772
+  data.tar.gz: ef1c17cd44ec046c37c75b3a6650610161fe74f71824dfe64b72db2958e24f77
 SHA512:
-  metadata.gz: 68d49bbb4d009ab6438e7a768f9fcc83c585d9bb7b95ab7966eed475cfea825226adb5af16c86f6a457513b3abd46f4c3b8db3ff32fcc881cdc5a7c5d2993fea
-  data.tar.gz: 104af894e026ca52a8132f8797ed57d9541da6ebe47f38cc24d61a67daf248df81f972fb90f9d5fb51eba3cc4294a428621db8f287fa0fd2a781a1de6de7a95c
+  metadata.gz: 64230656cfbf00b6d220cb579e078cddda30edeb5ccf1faa9f4245ed389ba76f6fe1990a10f48a6ccc2e67ecc3deb0c09cb6d4d146079d992e08cf5376f55c60
+  data.tar.gz: cb12486d8dd7571e11f19bbed0054a7698def27350678874c65c07688baf28a5b2e19f5bb31db4d4ce7c761e3509114c6d2b85155567a842e1812a1d82ba985b

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

@@ -42,11 +42,18 @@ module MjmlRb
         css_class = attrs["css-class"]
         a = self.class.default_attributes.merge(attrs)
 
-        pct_str          = width_pct.to_f.to_s.sub(/\.?0+$/, "")
-        col_class_suffix = pct_str.gsub(".", "-")
-        context[:column_widths][col_class_suffix] = pct_str if context[:column_widths]
+        explicit_width = a["width"]
+        if explicit_width && explicit_width.strip.end_with?("px")
+          px_val = explicit_width.to_f.to_s.sub(/\.?0+$/, "")
+          col_class_name = "mj-column-px-#{px_val.gsub('.', '-')}"
+          context[:column_widths][col_class_name] = "#{px_val}px" if context[:column_widths]
+        else
+          pct_str = width_pct.to_f.to_s.sub(/\.?0+$/, "")
+          col_class_name = "mj-column-per-#{pct_str.gsub('.', '-')}"
+          context[:column_widths][col_class_name] = "#{pct_str}%" if context[:column_widths]
+        end
 
-        col_class = "mj-column-per-#{col_class_suffix} mj-outlook-group-fix"
+        col_class = "#{col_class_name} mj-outlook-group-fix"
         col_class = "#{col_class} #{css_class}" if css_class && !css_class.empty?
 
         vertical_align = a["vertical-align"]

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

@@ -26,10 +26,10 @@ module MjmlRb
         css_class = a["css-class"]
 
         pct_str = width_pct.to_f.to_s.sub(/\.?0+$/, "")
-        class_suffix = pct_str.gsub(".", "-")
-        context[:column_widths][class_suffix] = pct_str if context[:column_widths]
+        col_class_name = "mj-column-per-#{pct_str.gsub('.', '-')}"
+        context[:column_widths][col_class_name] = "#{pct_str}%" if context[:column_widths]
 
-        group_class = "mj-column-per-#{class_suffix} mj-outlook-group-fix"
+        group_class = "#{col_class_name} mj-outlook-group-fix"
         group_class = "#{group_class} #{css_class}" if css_class && !css_class.empty?
 
         group_width = group_container_width(context, a, width_pct)

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

@@ -123,6 +123,12 @@ module MjmlRb
         value && !value.to_s.strip.empty?
       end
 
+      # Matches npm's suffixCssClasses: "foo bar" → "foo-outlook bar-outlook"
+      def suffix_css_classes(classes, suffix = "outlook")
+        return "" unless classes && !classes.strip.empty?
+        classes.split(" ").map { |c| "#{c}-#{suffix}" }.join(" ")
+      end
+
       # Merge adjacent Outlook conditional comments.  Applied locally within
       # each section/wrapper to avoid incorrectly merging across sibling sections.
       def merge_outlook_conditionals(html)
@@ -388,7 +394,8 @@ module MjmlRb
       end
 
       def render_section_before(css_class, container_px, bg_color, wrapper_gap)
-        outlook_class = css_class ? "#{css_class}-outlook" : ""
+        outlook_class = suffix_css_classes(css_class)
+        has_gap = wrapper_gap && !wrapper_gap.to_s.strip.empty?
         before_pairs = [
           ["align",       "center"],
           ["border",      "0"],
@@ -399,7 +406,7 @@ module MjmlRb
           ["style",       style_join("width" => "#{container_px}px", "padding-top" => wrapper_gap) + ";"],
           ["width",       container_px.to_s]
         ]
-        before_pairs << ["bgcolor", bg_color] if bg_color
+        before_pairs << ["bgcolor", bg_color] if bg_color && !has_gap
 
         %(<!--[if mso | IE]><table#{outlook_attrs(before_pairs)}><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->)
       end
@@ -502,7 +509,12 @@ module MjmlRb
       end
 
       # Generate Outlook IE conditional wrappers around each column/group.
+      # Mirrors npm section's getChildContext() by setting containerWidth to
+      # the section's box width so that column children compute correct widths.
       def render_section_columns(node, context, box_width)
+        previous_container_width = context[:container_width]
+        context[:container_width] = "#{box_width}px"
+
         columns = node.element_children.select { |e| %w[mj-column mj-group].include?(e.tag_name) }
         return render_children(node, context, parent: "mj-section") if columns.empty?
 
@@ -517,9 +529,16 @@ module MjmlRb
           columns.each_with_index.map do |col, i|
             col_attrs = resolved_attributes(col, context)
             v_align   = col_attrs["vertical-align"] || "top"
-            col_px    = (box_width.to_f * widths[i] / 100.0).round
-
-            td_open  = %(<!--[if mso | IE]><td class="" style="vertical-align:#{v_align};width:#{col_px}px;" ><![endif]-->)
+            col_css   = col_attrs["css-class"]
+            outlook_class = col_css ? col_css.split(" ").map { |c| "#{c}-outlook" }.join(" ") : ""
+            col_width_attr = col_attrs["width"]
+            col_px = if col_width_attr && col_width_attr.strip.end_with?("px")
+                       col_width_attr.to_f.round
+                     else
+                       (box_width.to_f * widths[i] / 100.0).round
+                     end
+
+            td_open  = %(<!--[if mso | IE]><td class="#{escape_attr(outlook_class)}" style="vertical-align:#{v_align};width:#{col_px}px;" ><![endif]-->)
             td_close = %(<!--[if mso | IE]></td><![endif]-->)
 
             context[:_column_width_pct] = widths[i]
@@ -530,6 +549,8 @@ module MjmlRb
         end
 
         ([open_table, open_tr] + col_parts + [close_tr, close_table]).join("\n")
+      ensure
+        context[:container_width] = previous_container_width
       end
 
       # ── mj-wrapper ─────────────────────────────────────────────────────────
@@ -562,7 +583,8 @@ module MjmlRb
                             end
 
         # renderBefore — Outlook conditional table wrapper
-        outlook_class = css_class ? "#{css_class}-outlook" : ""
+        outlook_class = suffix_css_classes(css_class)
+        has_gap = wrapper_gap && !wrapper_gap.to_s.strip.empty?
         before_pairs = [
           ["align",       "center"],
           ["border",      "0"],
@@ -573,7 +595,7 @@ module MjmlRb
           ["style",       style_join("width" => "#{container_px}px", "padding-top" => wrapper_gap) + ";"],
           ["width",       container_px.to_s]
         ]
-        before_pairs << ["bgcolor", bg_color] if bg_color
+        before_pairs << ["bgcolor", bg_color] if bg_color && !has_gap
 
         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]-->)
 
@@ -608,6 +630,17 @@ module MjmlRb
           "text-align"     => a["text-align"]
         )
 
+        # Compute box width and update context for children, matching npm
+        # wrapper's getChildContext() which sets containerWidth to box width.
+        border_left  = parse_border_width(a["border-left"] || a["border"])
+        border_right = parse_border_width(a["border-right"] || a["border"])
+        pad_left     = parse_padding_side(a, "left")
+        pad_right    = parse_padding_side(a, "right")
+        box_width    = container_px - pad_left - pad_right - border_left - border_right
+
+        previous_container_width = context[:container_width]
+        context[:container_width] = "#{box_width}px"
+
         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
@@ -651,22 +684,27 @@ module MjmlRb
           body = bg_has ? render_with_background(wrapper_html, a, container_px) : wrapper_html
           "#{render_before}\n#{body}\n#{render_after}"
         end
+      ensure
+        context[:container_width] = previous_container_width if previous_container_width
       end
 
-      # Wrap each child mj-section/mj-wrapper in an Outlook conditional <td>.
+      # Wrap each child mj-section/mj-wrapper in an Outlook conditional <tr><td>.
+      # npm wrapper renders each child in its own row, unlike section which
+      # places all columns in a single row.
       def render_wrapped_children_wrapper(node, context, container_px, gap)
         children = node.element_children.select { |e| %w[mj-section mj-wrapper].include?(e.tag_name) }
         return render_children(node, context, parent: "mj-wrapper") if children.empty?
 
         open_table  = %(<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><![endif]-->)
-        open_tr     = %(<!--[if mso | IE]><tr><![endif]-->)
-        close_tr    = %(<!--[if mso | IE]></tr><![endif]-->)
         close_table = %(<!--[if mso | IE]></table><![endif]-->)
 
         section_parts = with_inherited_mj_class(context, node) do
           children.each_with_index.map do |child, index|
-            td_open  = %(<!--[if mso | IE]><td class="" width="#{container_px}px" ><![endif]-->)
-            td_close = %(<!--[if mso | IE]></td><![endif]-->)
+            child_attrs = resolved_attributes(child, context)
+            child_css   = child_attrs["css-class"]
+            outlook_class = suffix_css_classes(child_css)
+            td_open  = %(<!--[if mso | IE]><tr><td class="#{escape_attr(outlook_class)}" width="#{container_px}px" ><![endif]-->)
+            td_close = %(<!--[if mso | IE]></td></tr><![endif]-->)
             child_html = with_wrapper_child_gap(context, index.zero? ? nil : gap) do
               render_node(child, context, parent: "mj-wrapper")
             end
@@ -674,7 +712,7 @@ module MjmlRb
           end
         end
 
-        ([open_table, open_tr] + section_parts + [close_tr, close_table]).join("\n")
+        ([open_table] + section_parts + [close_table]).join("\n")
       end
 
       def with_wrapper_child_gap(context, gap)

data/lib/mjml-rb/renderer.rb

@@ -235,14 +235,14 @@ module MjmlRb
       widths = column_widths || {}
       return "" if widths.empty?
 
-      base_rules = widths.map do |suffix, pct|
-        ".mj-column-per-#{suffix} { width:#{pct}% !important; max-width: #{pct}%; }"
+      base_rules = widths.map do |class_name, width_str|
+        ".#{class_name} { width:#{width_str} !important; max-width: #{width_str}; }"
       end
-      moz_rules = widths.map do |suffix, pct|
-        ".moz-text-html .mj-column-per-#{suffix} { width:#{pct}% !important; max-width: #{pct}%; }"
+      moz_rules = widths.map do |class_name, width_str|
+        ".moz-text-html .#{class_name} { width:#{width_str} !important; max-width: #{width_str}; }"
       end
-      owa_rules = widths.map do |suffix, pct|
-        "[owa] .mj-column-per-#{suffix} { width:#{pct}% !important; max-width: #{pct}%; }"
+      owa_rules = widths.map do |class_name, width_str|
+        "[owa] .#{class_name} { width:#{width_str} !important; max-width: #{width_str}; }"
       end
 
       bp = breakpoint.to_s.strip

data/lib/mjml-rb/version.rb

@@ -1,3 +1,3 @@
 module MjmlRb
-  VERSION = "0.2.30".freeze
+  VERSION = "0.2.32".freeze
 end

metadata

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