mjml-rb 0.2.31 → 0.2.33

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 512c35b10aab7894e19942c4c881e3f08c127c8660c587192a0f9bc3972092cd
-  data.tar.gz: d18d2c2bc8bbdf369af791ebc41841b3b762d85e4811b5cdb408ff66a45dd3e7
+  metadata.gz: 6147ba24e9e7ede9406ebbaa48655e885f72e7f61d14c0da37ecde7ecdc66a68
+  data.tar.gz: 6809e1ba8ee7927d565831840a5938dea5bc37abfaff3691d4b60dd4eacd67d0
 SHA512:
-  metadata.gz: 46e4bb2310909df561685b8307543662bb90ab02678e2db7f81bf9ff0139ddc62a7aa12982bbbd97b0b416b4b0ca5dc5478cda8694f846a303060d7e27915921
-  data.tar.gz: d2ab3041d34a146c49528cb3c7e63c1f3acaab077f565707057626bacb77df5578787ce7ea955ed8e1e9884442c66aabde30af8411ddc552e418e39d8386f0fa
+  metadata.gz: 961a93196418591ce8d2f485697ac7cdf7bd4ef2cbf2f53eac02b0811190b324e9d035c442d6d53b48e3faa94db47c44a3b32098354e36f5348ae2b4d1351372
+  data.tar.gz: 98a28a390dda4f04d50ab4170c8e277cb7546023bcb5da0aefd242e2524a00d9beb5a91d5c28c18dc308644072911630da43437a5f2b06d96972aa3b13454175

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
@@ -576,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"],
@@ -587,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]-->)
 
@@ -622,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
@@ -665,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
@@ -688,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/components/text.rb

@@ -76,7 +76,7 @@ module MjmlRb
           "height" => height
         )
 
-        content = html_inner(node)
+        content = raw_inner(node)
         inner_div = %(<div style="#{div_style}">#{content}</div>)
 
         body = if height

data/lib/mjml-rb/parser.rb

@@ -8,6 +8,15 @@ module MjmlRb
     include REXML
     HTML_VOID_TAGS = %w[area base br col embed hr img input link meta param source track wbr].freeze
 
+    # Ending-tag components whose inner HTML is preserved as raw content via CDATA
+    # wrapping, matching upstream npm's endingTag behavior. mj-table is excluded
+    # because its component needs structural AST access for attribute normalization.
+    # mj-carousel-image is excluded because it has no meaningful inner content.
+    ENDING_TAGS_FOR_CDATA = %w[
+      mj-accordion-text mj-accordion-title mj-button
+      mj-navbar-link mj-raw mj-text
+    ].freeze
+
     class ParseError < StandardError
       attr_reader :line
 
@@ -20,7 +29,7 @@ module MjmlRb
     def parse(mjml, options = {})
       opts = normalize_options(options)
       xml = apply_preprocessors(mjml.to_s, opts[:preprocessors])
-      xml = wrap_raw_tags_in_cdata(xml)
+      xml = wrap_ending_tags_in_cdata(xml)
       xml = normalize_html_void_tags(xml)
       xml = expand_includes(xml, opts) unless opts[:ignore_includes]
 
@@ -48,29 +57,66 @@ module MjmlRb
       end
     end
 
-    def expand_includes(xml, options)
-      xml = wrap_raw_tags_in_cdata(xml)
+    def expand_includes(xml, options, included_in = [])
+      xml = wrap_ending_tags_in_cdata(xml)
       xml = normalize_html_void_tags(xml)
       doc = Document.new(sanitize_bare_ampersands(xml))
       includes = XPath.match(doc, "//mj-include")
       return xml if includes.empty?
 
+      css_includes = []
+
       includes.reverse_each do |include_node|
         path_attr = include_node.attributes["path"]
         raise ParseError, "mj-include path is required" if path_attr.to_s.empty?
 
         include_type = include_node.attributes["type"].to_s
-        resolved_path = resolve_include_path(path_attr, options[:actual_path], options[:file_path])
-        include_content = File.read(resolved_path)
+        parent = include_node.parent
+
+        resolved_path = begin
+          resolve_include_path(path_attr, options[:actual_path], options[:file_path])
+        rescue Errno::ENOENT
+          nil
+        end
+
+        include_content = resolved_path ? File.read(resolved_path) : nil
+
+        if include_content.nil?
+          # Collect error as an mj-raw comment node instead of raising
+          display_path = resolved_path || File.expand_path(path_attr, options[:file_path].to_s)
+          error_comment = "<!-- mj-include fails to read file : #{path_attr} at #{display_path} -->"
+          error_node = Element.new("mj-raw")
+          error_node.add(CData.new(error_comment))
+          parent.insert_before(include_node, error_node)
+          parent.delete(include_node)
+          next
+        end
+
+        # Circular include detection
+        if included_in.include?(resolved_path)
+          raise ParseError, "Circular inclusion detected on file : #{resolved_path}"
+        end
+
+        if include_type == "css"
+          # CSS includes get collected and added to mj-head later
+          css_inline = include_node.attributes["css-inline"].to_s
+          css_includes << { content: include_content, inline: css_inline == "inline" }
+          parent.delete(include_node)
+          next
+        end
 
         replacement = if include_type == "html"
                         %(<mj-raw><![CDATA[#{escape_cdata(include_content)}]]></mj-raw>)
                       else
-                        wrap_raw_tags_in_cdata(normalize_html_void_tags(strip_xml_declaration(include_content)))
+                        prepared = wrap_ending_tags_in_cdata(normalize_html_void_tags(strip_xml_declaration(include_content)))
+                        # Recursively expand includes in the included content
+                        expand_includes(prepared, options.merge(
+                          actual_path: resolved_path,
+                          file_path: File.dirname(resolved_path)
+                        ), included_in + [resolved_path])
                       end
 
         fragment = Document.new(sanitize_bare_ampersands("<include-root>#{replacement}</include-root>"))
-        parent = include_node.parent
         insert_before = include_node
         fragment.root.children.each do |child|
           parent.insert_before(insert_before, deep_clone(child))
@@ -78,15 +124,44 @@ module MjmlRb
         parent.delete(include_node)
       end
 
+      # Inject CSS includes into mj-head
+      unless css_includes.empty?
+        inject_css_includes(doc, css_includes)
+      end
+
       output = +""
       doc.write(output)
       output
-    rescue Errno::ENOENT => e
-      raise ParseError, "Cannot read included file: #{e.message}"
     rescue ParseException => e
       raise ParseError, "Failed to parse included content: #{e.message}"
     end
 
+    def inject_css_includes(doc, css_includes)
+      mjml_root = doc.root
+      return unless mjml_root
+
+      # Find or create mj-head
+      head = XPath.first(mjml_root, "mj-head")
+      unless head
+        head = Element.new("mj-head")
+        # Insert mj-head before mj-body if possible
+        body = XPath.first(mjml_root, "mj-body")
+        if body
+          mjml_root.insert_before(body, head)
+        else
+          mjml_root.add(head)
+        end
+      end
+
+      # Add each CSS include as an mj-style element
+      css_includes.each do |css_include|
+        style_node = Element.new("mj-style")
+        style_node.add_attribute("inline", "inline") if css_include[:inline]
+        style_node.add(CData.new(css_include[:content]))
+        head.add(style_node)
+      end
+    end
+
     def strip_xml_declaration(content)
       content.sub(/\A<\?xml[^>]*\?>\s*/m, "")
     end
@@ -107,14 +182,20 @@ module MjmlRb
       end
     end
 
-    def wrap_raw_tags_in_cdata(content)
-      content.gsub(/<mj-raw(\s[^<>]*?)?>(.*?)<\/mj-raw>/mi) do
-        attrs = Regexp.last_match(1).to_s
-        inner = Regexp.last_match(2).to_s
+    def wrap_ending_tags_in_cdata(content)
+      tag_pattern = ENDING_TAGS_FOR_CDATA.map { |t| Regexp.escape(t) }.join("|")
+      # Negative lookbehind (?<!\/) ensures self-closing tags like <mj-text ... /> are skipped
+      content.gsub(/<(#{tag_pattern})(\s[^<>]*?)?(?<!\/)>(.*?)<\/\1>/mi) do
+        tag = Regexp.last_match(1)
+        attrs = Regexp.last_match(2).to_s
+        inner = Regexp.last_match(3).to_s
         if inner.include?("<![CDATA[")
-          "<mj-raw#{attrs}>#{inner}</mj-raw>"
+          "<#{tag}#{attrs}>#{inner}</#{tag}>"
         else
-          "<mj-raw#{attrs}><![CDATA[#{escape_cdata(inner)}]]></mj-raw>"
+          # Pre-process content: normalize void tags and sanitize bare ampersands
+          # before wrapping in CDATA, so the raw HTML is well-formed for output.
+          prepared = sanitize_bare_ampersands(normalize_html_void_tags(inner))
+          "<#{tag}#{attrs}><![CDATA[#{escape_cdata(prepared)}]]></#{tag}>"
         end
       end
     end
@@ -164,6 +245,19 @@ module MjmlRb
     def element_to_ast(element, keep_comments:)
       raise ParseError, "Missing XML root element" unless element
 
+      # For ending-tag elements whose content was wrapped in CDATA, store
+      # the raw HTML directly as content instead of parsing structurally.
+      if ENDING_TAGS_FOR_CDATA.include?(element.name)
+        raw_content = element.children.select { |c| c.is_a?(Text) }.map(&:value).join
+        return AstNode.new(
+          tag_name: element.name,
+          attributes: element.attributes.each_with_object({}) { |(name, val), h| h[name] = val },
+          children: [],
+          content: raw_content.empty? ? nil : raw_content,
+          line: nil
+        )
+      end
+
       children = element.children.each_with_object([]) do |child, memo|
         case child
         when Element

data/lib/mjml-rb/renderer.rb

@@ -296,7 +296,9 @@ module MjmlRb
       return html if css_blocks.empty?
 
       document = parse_html_document(html)
-      parse_inline_css_rules(css_blocks.join("\n")).each do |selector, declarations|
+      rules, at_rules_css = parse_inline_css_rules(css_blocks.join("\n"))
+
+      rules.each do |selector, declarations|
         next if selector.empty? || declarations.empty?
 
         select_nodes(document, selector).each do |node|
@@ -304,6 +306,11 @@ module MjmlRb
         end
       end
 
+      # Inject preserved @-rules (@media, @font-face, etc.) as a <style> block.
+      # These rules cannot be inlined into style attributes but should be kept
+      # in the document for runtime application by email clients.
+      inject_preserved_at_rules(document, at_rules_css)
+
       document.to_html
     end
 
@@ -315,6 +322,18 @@ module MjmlRb
       end
     end
 
+    def inject_preserved_at_rules(document, at_rules_css)
+      return if at_rules_css.nil? || at_rules_css.strip.empty?
+
+      head = document.at_css("head")
+      return unless head
+
+      style = Nokogiri::XML::Node.new("style", document)
+      style["type"] = "text/css"
+      style.content = at_rules_css.strip
+      head.add_child(style)
+    end
+
     def select_nodes(document, selector)
       document.css(selector)
     rescue Nokogiri::CSS::SyntaxError, Nokogiri::XML::XPath::SyntaxError
@@ -356,21 +375,34 @@ module MjmlRb
 
     def parse_inline_css_rules(css)
       stripped_css = strip_css_comments(css.to_s)
-      plain_css = strip_css_at_rules(stripped_css)
+      plain_css, at_rules_css = extract_css_at_rules(stripped_css)
 
-      plain_css.scan(/([^{}]+)\{([^{}]+)\}/m).flat_map do |selector_group, declarations|
+      rules = plain_css.scan(/([^{}]+)\{([^{}]+)\}/m).flat_map do |selector_group, declarations|
         selectors = selector_group.split(",").map(&:strip).reject(&:empty?)
         declaration_map = parse_css_declarations(declarations)
         selectors.map { |selector| [selector, declaration_map] }
       end
+
+      # Sort rules by specificity (ascending). With the "last wins" merge
+      # strategy, higher-specificity rules applied later correctly override
+      # lower-specificity ones — matching CSS cascade behavior.
+      sorted = rules.each_with_index
+                    .sort_by { |(selector, _), idx| [css_specificity(selector), idx] }
+                    .map(&:first)
+
+      [sorted, at_rules_css]
     end
 
     def strip_css_comments(css)
       css.gsub(%r{/\*.*?\*/}m, "")
     end
 
-    def strip_css_at_rules(css)
-      result = +""
+    # Separates @-rules (@media, @font-face, etc.) from plain CSS selectors.
+    # Returns [plain_css, at_rules_css]. The at_rules_css can be injected as a
+    # <style> block since @-rules cannot be inlined into style attributes.
+    def extract_css_at_rules(css)
+      plain = +""
+      at_rules = +""
       index = 0
 
       while index < css.length
@@ -378,11 +410,14 @@ module MjmlRb
           brace_index = css.index("{", index)
           semicolon_index = css.index(";", index)
 
+          # Simple @-rules like @import or @charset end with semicolon
           if semicolon_index && (brace_index.nil? || semicolon_index < brace_index)
+            at_rules << css[index..semicolon_index] << "\n"
             index = semicolon_index + 1
             next
           end
 
+          # Block @-rules like @media, @font-face have nested braces
           if brace_index
             depth = 1
             cursor = brace_index + 1
@@ -391,16 +426,49 @@ module MjmlRb
               depth -= 1 if css[cursor] == "}"
               cursor += 1
             end
+            at_rules << css[index...cursor] << "\n"
             index = cursor
             next
           end
         end
 
-        result << css[index]
+        plain << css[index]
         index += 1
       end
 
-      result
+      [plain, at_rules]
+    end
+
+    # Calculates CSS specificity as a comparable [a, b, c] tuple:
+    #   a = number of ID selectors (#id)
+    #   b = number of class selectors (.class), attribute selectors ([attr]),
+    #       and pseudo-classes (:hover, :lang())
+    #   c = number of type selectors (div, p) and pseudo-elements (::before)
+    def css_specificity(selector)
+      s = selector.to_s
+
+      # a: ID selectors
+      a = s.scan(/#[\w-]+/).length
+
+      # b: class selectors + attribute selectors + pseudo-classes
+      b = s.scan(/\.[\w-]+/).length +
+          s.scan(/\[[^\]]*\]/).length +
+          s.scan(/:(?!:)[\w-]+/).length
+
+      # c: type selectors + pseudo-elements
+      # Strip everything except element names and combinators
+      cleaned = s
+        .gsub(/#[\w-]+/, "")                           # remove IDs
+        .gsub(/\.[\w-]+/, "")                           # remove classes
+        .gsub(/\[[^\]]*\]/, "")                         # remove attribute selectors
+        .gsub(/:[\w-]+(?:\([^)]*\))?/, "")              # remove pseudo-classes
+        .gsub(/::[\w-]+/, "")                           # remove pseudo-elements (counted separately)
+        .gsub(/[>+~]/, " ")                             # combinators → spaces
+        .gsub(/\*/, "")                                 # universal selector has no specificity
+      c = cleaned.split.reject(&:empty?).length +
+          s.scan(/::[\w-]+/).length
+
+      [a, b, c]
     end
 
     def parse_css_declarations(declarations)
@@ -580,6 +648,9 @@ module MjmlRb
     end
 
     def raw_inner(node)
+      # For ending-tag nodes whose content was preserved as raw HTML by the parser
+      return node.content if node.element? && node.content
+
       if node.respond_to?(:children)
         node.children.map do |child|
           if child.text?

data/lib/mjml-rb/version.rb

@@ -1,3 +1,3 @@
 module MjmlRb
-  VERSION = "0.2.31".freeze
+  VERSION = "0.2.33".freeze
 end

metadata

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