mjml-rb 0.5.1 → 0.6.0

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

@@ -9,7 +9,7 @@ module MjmlRb
 
       ALLOWED_ATTRIBUTES = {
         "align" => "enum(left,center,right)",
-        "border-radius" => "unit(px,%){1,4}",
+        "border-radius" => "string",
         "container-background-color" => "color",
         "icon-width" => "unit(px,%)",
         "left-icon" => "string",
@@ -21,7 +21,7 @@ module MjmlRb
         "right-icon" => "string",
         "thumbnails" => "enum(visible,hidden,supported)",
         "tb-border" => "string",
-        "tb-border-radius" => "unit(px,%)",
+        "tb-border-radius" => "string",
         "tb-hover-border-color" => "color",
         "tb-selected-border-color" => "color",
         "tb-width" => "unit(px,%)"

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

@@ -13,9 +13,9 @@ module MjmlRb
         "title" => "string",
         "src" => "string",
         "thumbnails-src" => "string",
-        "border-radius" => "unit(px,%){1,4}",
+        "border-radius" => "string",
         "tb-border" => "string",
-        "tb-border-radius" => "unit(px,%){1,4}"
+        "tb-border-radius" => "string"
       }.freeze
 
       DEFAULT_ATTRIBUTES = {

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

@@ -10,7 +10,7 @@ module MjmlRb
         "border" => "string",
         "border-bottom" => "string",
         "border-left" => "string",
-        "border-radius" => "unit(px,%){1,4}",
+        "border-radius" => "string",
         "border-right" => "string",
         "border-top" => "string",
         "direction" => "enum(ltr,rtl)",
@@ -18,7 +18,7 @@ module MjmlRb
         "inner-border" => "string",
         "inner-border-bottom" => "string",
         "inner-border-left" => "string",
-        "inner-border-radius" => "unit(px,%){1,4}",
+        "inner-border-radius" => "string",
         "inner-border-right" => "string",
         "inner-border-top" => "string",
         "padding" => "unit(px,%){1,4}",
@@ -40,21 +40,25 @@ module MjmlRb
       def render(tag_name:, node:, context:, attrs:, parent:)
         width_pct = context.delete(:_column_width_pct) || 100.0
         mobile_width = context.delete(:_column_mobile_width)
+        column_gutter = context.delete(:_column_gutter)
         css_class = attrs["css-class"]
         a = self.class.default_attributes.merge(attrs)
 
-        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]
+        if column_gutter
+          col_class_name = column_gutter.width_class
+          responsive_width = column_gutter.width
+          context[:column_widths][column_gutter.padding_class] = {padding: column_gutter.desktop_padding} unless column_gutter.grouped?
+        elsif a["width"]&.strip&.end_with?("px")
+          px_val = a["width"].to_f.round.to_s
+          col_class_name = "mj-column-px-#{px_val}"
+          responsive_width = "#{px_val}px"
         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]
+          responsive_width = "#{pct_str}%"
         end
-
-        col_class = "#{col_class_name} mj-outlook-group-fix"
+        context[:column_widths][col_class_name] = responsive_width if context[:column_widths]
+        col_class = [col_class_name, column_gutter&.padding_class, "mj-outlook-group-fix"].compact.join(" ")
         col_class = "#{col_class} #{css_class}" if css_class && !css_class.empty?
 
         vertical_align = a["vertical-align"]
@@ -64,7 +68,8 @@ module MjmlRb
           "direction" => a["direction"],
           "display" => "inline-block",
           "vertical-align" => vertical_align,
-          "width" => (mobile_width ? mobile_width_value(a, width_pct, context[:container_width]) : "100%")
+          "width" => (column_gutter ? column_gutter.mobile_width : mobile_width ? mobile_width_value(a, width_pct, context[:container_width]) : "100%"),
+          "padding" => column_gutter&.mobile_padding
         )
 
         column_markup =

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

@@ -1,4 +1,5 @@
 require_relative "base"
+require_relative "../column_gutter"
 
 module MjmlRb
   module Components
@@ -21,9 +22,11 @@ module MjmlRb
         a = DEFAULT_ATTRIBUTES.merge(attrs)
         css_class = a["css-class"]
 
-        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]
+        unit = a["width"]&.end_with?("px") ? "px" : "%"
+        value = unit == "px" ? a["width"].to_f : width_pct
+        width_string = value.to_s.sub(/\.?0+$/, "")
+        col_class_name = "mj-column-#{unit == '%' ? 'per' : 'px'}-#{width_string.tr('.', '-')}"
+        context[:column_widths][col_class_name] = "#{width_string}#{unit}" if context[:column_widths]
 
         group_class = "#{col_class_name} mj-outlook-group-fix"
         group_class = "#{group_class} #{css_class}" if css_class && !css_class.empty?
@@ -71,12 +74,18 @@ module MjmlRb
             case child.tag_name
             when "mj-column"
               width_pct = widths[column_index] || 100.0
+              gutter = if context[:gutter]
+                         ColumnGutter.new(width: resolved_attributes(child, context)["width"] || "#{width_pct}%", container_width: group_width,
+                                          gutter: context[:gutter], count: columns.size, index: column_index, direction: attrs["direction"], grouped: true)
+                       end
+              context[:_column_gutter] = gutter
               column_index += 1
               context[:_column_width_pct] = width_pct
               context[:_column_mobile_width] = true
               td_style = style_join(
                 "vertical-align" => resolved_attributes(child, context)["vertical-align"] || "top",
-                "width" => "#{(group_width_px * width_pct / 100.0).round}px"
+                "width" => "#{(group_width_px * width_pct / 100.0).round}px",
+                "padding" => gutter&.desktop_padding("px")
               )
               td_open = %(<!--[if mso | IE]><td#{html_attrs("style" => td_style)}><![endif]-->)
               td_close = %(<!--[if mso | IE]></td><![endif]-->)

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

@@ -42,14 +42,14 @@ module MjmlRb
           context[:preview] = raw_inner(node).strip
         when "mj-style"
           css = raw_inner(node)
-          if node.attributes["inline"] == "inline"
+          if node["inline"] == "inline"
             context[:inline_styles] << css
           else
             context[:user_styles] << css
           end
         when "mj-font"
-          name = node.attributes["name"]
-          href = node.attributes["href"]
+          name = node["name"]
+          href = node["href"]
           context[:fonts][name] = href if name && href
         end
       end

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

@@ -13,7 +13,6 @@ module MjmlRb
         "background-height" => "unit(px,%)",
         "background-position" => "string",
         "border-radius" => "string",
-        "container-background-color" => "color",
         "inner-background-color" => "color",
         "inner-padding" => "unit(px,%){1,4}",
         "inner-padding-top" => "unit(px,%)",
@@ -131,6 +130,7 @@ module MjmlRb
       end
 
       def render_content(attrs, content, container_width)
+        container_width = hero_container_width(attrs, container_width)
         outlook_attrs = {
           "align" => "center",
           "border" => "0",
@@ -152,7 +152,12 @@ module MjmlRb
           "class" => "mj-hero-content",
           "style" => style_join(
             "background-color" => attrs["inner-background-color"],
-            "margin" => "0px auto"
+            "margin" => "0px auto",
+            "padding" => attrs["inner-padding"],
+            "padding-top" => attrs["inner-padding-top"],
+            "padding-right" => attrs["inner-padding-right"],
+            "padding-bottom" => attrs["inner-padding-bottom"],
+            "padding-left" => attrs["inner-padding-left"]
           )
         }
         inner_table_attrs = {

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

@@ -32,16 +32,16 @@ module MjmlRb
         node.element_children.each do |selector|
           next unless selector.tag_name == "mj-selector"
 
-          path = selector.attributes["path"].to_s.strip
+          path = selector["path"].to_s.strip
           next if path.empty?
 
           custom_attrs = selector.element_children.each_with_object({}) do |child, memo|
             next unless child.tag_name == "mj-html-attribute"
 
-            name = child.attributes["name"].to_s.strip
+            name = child["name"].to_s.strip
             next if name.empty?
 
-            memo[name] = child.text_content
+            memo[name] = child.content
           end
           next if custom_attrs.empty?
 

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

@@ -20,7 +20,7 @@ module MjmlRb
         "border-left" => "string",
         "border-right" => "string",
         "border-top" => "string",
-        "border-radius" => "unit(px,%){1,4}",
+        "border-radius" => "string",
         "container-background-color" => "color",
         "fluid-on-mobile" => "boolean",
         "full-width" => "enum(full-width)",
@@ -168,8 +168,6 @@ module MjmlRb
       end
 
       def img_width_attribute(attrs, content_width)
-        return "auto" if attrs["width"] && attrs["height"] && attrs["height"] != "auto"
-        return attrs["width"].to_i.to_s if attrs["width"] && attrs["width"] =~ /^(\d+(?:\.\d+)?)\s*px$/
 
         content_width.to_i.to_s
       end

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

@@ -14,7 +14,7 @@ module MjmlRb
       end
 
       def handle_head(node, context)
-        context[:head_raw] << raw_inner(node)
+        context[:head_raw] << renderer.send(:protect_raw_html, raw_inner(node))
       end
     end
   end

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

@@ -1,4 +1,5 @@
 require_relative "base"
+require_relative "../column_gutter"
 
 module MjmlRb
   module Components
@@ -20,6 +21,7 @@ module MjmlRb
         "border-right" => "string",
         "border-top" => "string",
         "direction" => "enum(ltr,rtl)",
+        "gutter" => "unit(px,%)",
         "full-width" => "enum(full-width,false,)",
         "padding" => "unit(px,%){1,4}",
         "padding-bottom" => "unit(px,%)",
@@ -30,7 +32,7 @@ module MjmlRb
         "text-padding" => "unit(px,%){1,4}"
       }.freeze
 
-      WRAPPER_ALLOWED_ATTRIBUTES = SECTION_ALLOWED_ATTRIBUTES.merge(
+      WRAPPER_ALLOWED_ATTRIBUTES = SECTION_ALLOWED_ATTRIBUTES.reject { |key, _| key == "gutter" }.merge(
         "gap" => "unit(px)",
       ).freeze
 
@@ -79,7 +81,7 @@ module MjmlRb
       def parse_padding_value(str)
         return 0 if str.nil? || str.to_s.strip.empty?
 
-        str =~ /(\d+(?:\.\d+)?)\s*px/ ? $1.to_i : 0
+        str.to_f
       end
 
       def parse_padding_side(attrs, side)
@@ -122,7 +124,7 @@ module MjmlRb
       # Merge adjacent Outlook conditional comments.  Applied locally within
       # each section/wrapper to avoid incorrectly merging across sibling sections.
       def merge_outlook_conditionals(html)
-        html.gsub(/<!\[endif\]-->\s*<!--\[if mso \| IE\]>/m, "")
+        renderer.send(:merge_outlook_conditionals, html)
       end
 
       # Build an attribute string for Outlook conditional comment tags.
@@ -439,7 +441,6 @@ module MjmlRb
         )
         table_style = style_join(
           {
-            "border-radius" => border_radius,
             "border-collapse" => (has_border_radius ? "separate" : nil),
             "width" => "100%"
           }.merge(full_width ? {} : background_styles)
@@ -510,6 +511,9 @@ module MjmlRb
       # 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]
+        previous_gutter, previous_direction = context.values_at(:gutter, :section_direction)
+        attrs = self.class.default_attributes.merge(resolved_attributes(node, context))
+        context[:gutter], context[:section_direction] = attrs.values_at("gutter", "direction")
         context[:container_width] = "#{box_width}px"
 
         columns = node.element_children.select { |e| %w[mj-column mj-group].include?(e.tag_name) }
@@ -523,7 +527,9 @@ module MjmlRb
         close_table = %(<!--[if mso | IE]></table><![endif]-->)
 
         col_parts = with_inherited_mj_class(context, node) do
-          columns.each_with_index.map do |col, i|
+          node.children.map do |col|
+            i = columns.index(col)
+            next render_node(col, context, parent: "mj-section") unless i
             col_attrs = resolved_attributes(col, context)
             v_align   = col_attrs["vertical-align"] || "top"
             col_css   = col_attrs["css-class"]
@@ -535,10 +541,16 @@ module MjmlRb
                        (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]-->)
+            gutter = if context[:gutter] && col.tag_name == "mj-column"
+                       ColumnGutter.new(width: col_width_attr || "#{widths[i]}%", container_width: box_width,
+                                        gutter: context[:gutter], count: columns.size, index: i, direction: context[:section_direction])
+                     end
+            padding = gutter ? "padding:#{gutter.desktop_padding('px')};" : ""
+            td_open = %(<!--[if mso | IE]><td class="#{escape_attr(outlook_class)}" style="vertical-align:#{v_align};width:#{col_px}px;#{padding}" ><![endif]-->)
             td_close = %(<!--[if mso | IE]></td><![endif]-->)
 
             context[:_column_width_pct] = widths[i]
+            context[:_column_gutter] = gutter
             col_html = render_node(col, context, parent: "mj-section")
 
             "#{td_open}\n#{col_html}\n#{td_close}"
@@ -548,6 +560,7 @@ module MjmlRb
         ([open_table, open_tr] + col_parts + [close_tr, close_table]).join("\n")
       ensure
         context[:container_width] = previous_container_width
+        context[:gutter], context[:section_direction] = previous_gutter, previous_direction
       end
 
       # ── mj-wrapper ─────────────────────────────────────────────────────────
@@ -692,14 +705,16 @@ module MjmlRb
       # 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) }
+        children = node.element_children.reject { |e| e.tag_name == "mj-raw" }
         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]-->)
         close_table = %(<!--[if mso | IE]></table><![endif]-->)
 
         section_parts = with_inherited_mj_class(context, node) do
-          children.each_with_index.map do |child, index|
+          node.children.map do |child|
+            index = children.index(child)
+            next render_node(child, context, parent: "mj-wrapper") unless index
             child_attrs = resolved_attributes(child, context)
             child_css   = child_attrs["css-class"]
             outlook_class = suffix_css_classes(child_css)

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

@@ -34,7 +34,8 @@ module MjmlRb
 
       SOCIAL_ALLOWED_ATTRIBUTES = {
         "align" => "enum(left,right,center)",
-        "border-radius" => "unit(px,%)",
+        "border" => "string",
+        "border-radius" => "string",
         "container-background-color" => "color",
         "color" => "color",
         "font-family" => "string",
@@ -63,7 +64,8 @@ module MjmlRb
         "icon-position" => "enum(left,right)",
         "background-color" => "color",
         "color" => "color",
-        "border-radius" => "unit(px)",
+        "border" => "string",
+        "border-radius" => "string",
         "font-family" => "string",
         "font-size" => "unit(px)",
         "font-style" => "string",
@@ -103,7 +105,7 @@ module MjmlRb
 
       # Attributes Social parent passes down to its mj-social-element children
       INHERITED_ATTRS = %w[
-        border-radius color font-family font-size font-weight font-style
+        border border-radius color font-family font-size font-weight font-style
         icon-size icon-height icon-padding text-padding line-height text-decoration
       ].freeze
 
@@ -121,6 +123,7 @@ module MjmlRb
       }.freeze
 
       ELEMENT_DEFAULT_ATTRIBUTES = {
+        "border" => "0",
         "alt"             => "",
         "align"           => "left",
         "icon-position"   => "left",
@@ -198,38 +201,25 @@ module MjmlRb
       def render_horizontal(node, context, social_attrs)
         align     = social_attrs["align"]
         inherited = inherited_attrs(social_attrs)
-        elements  = social_element_children(node)
-        return "" if elements.empty?
-
-        outlook_open  = %(<!--[if mso | IE]><table align="#{escape_attr(align)}" border="0" cellpadding="0" cellspacing="0" role="presentation" ><tr>)
-        outlook_close = %(</tr></table><![endif]-->)
-
         children_html = with_inherited_mj_class(context, node) do
-          elements.map.with_index do |child, idx|
-            child_attrs  = resolved_attributes(child, context)
-            merged_attrs = ELEMENT_DEFAULT_ATTRIBUTES.merge(inherited).merge(child_attrs)
-            el_html      = render_social_element(child, merged_attrs)
-
-            outlook_td_open  = idx == 0 ? "<td>" : "</td><td>"
-            %(#{outlook_td_open}<![endif]--><table align="#{escape_attr(align)}" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;"><tbody>#{el_html}</tbody></table><!--[if mso | IE]>)
+          node.children.map do |child|
+            next render_node(child, context, parent: "mj-social") unless child.tag_name == "mj-social-element"
+            child_attrs = ELEMENT_DEFAULT_ATTRIBUTES.merge(inherited).merge(resolved_attributes(child, context))
+            el_html = render_social_element(child, child_attrs)
+            %(<!--[if mso | IE]><td><![endif]--><table align="#{escape_attr(align)}" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;"><tbody>#{el_html}</tbody></table><!--[if mso | IE]></td><![endif]-->)
           end.join
         end
-
-        %(#{outlook_open}#{children_html}</td>#{outlook_close})
+        %(<!--[if mso | IE]><table align="#{escape_attr(align)}" border="0" cellpadding="0" cellspacing="0" role="presentation"><tr><![endif]-->#{children_html}<!--[if mso | IE]></tr></table><![endif]-->)
       end
 
       def render_vertical(node, context, social_attrs)
         inherited = inherited_attrs(social_attrs)
-        elements  = social_element_children(node)
-
         children_html = with_inherited_mj_class(context, node) do
-          elements.map do |child|
-            child_attrs  = resolved_attributes(child, context)
-            merged_attrs = ELEMENT_DEFAULT_ATTRIBUTES.merge(inherited).merge(child_attrs)
-            render_social_element(child, merged_attrs)
+          node.children.map do |child|
+            next render_node(child, context, parent: "mj-social") unless child.tag_name == "mj-social-element"
+            render_social_element(child, ELEMENT_DEFAULT_ATTRIBUTES.merge(inherited).merge(resolved_attributes(child, context)))
           end.join
         end
-
         %(<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="margin:0px;"><tbody>#{children_html}</tbody></table>)
       end
 
@@ -237,7 +227,7 @@ module MjmlRb
 
       def render_social_element(node, attrs)
         a        = attrs # already merged with defaults by caller
-        net_name = node.attributes["name"]
+        net_name = node["name"]
         network  = SOCIAL_NETWORKS[net_name] || {}
 
         # Resolve href: if network has a share-url, substitute [[URL]] with the raw href
@@ -296,6 +286,7 @@ module MjmlRb
         )
 
         img_style = style_join(
+          "border" => a["border"],
           "border-radius" => border_radius,
           "display"       => "block"
         )
@@ -325,7 +316,7 @@ module MjmlRb
         HTML
 
         # Content cell (text)
-        content = node.text_content.strip
+        content = raw_inner_for_body(node).strip
         content_cell = if content.empty?
                          ""
                        else
@@ -344,7 +335,7 @@ module MjmlRb
                            "text-decoration" => a["text-decoration"]
                          )
 
-                         inner_text = " #{escape_html(content)} "
+                         inner_text = " #{content} "
                          text_elem = if has_link
                                        link_attrs_str = html_attrs({ "href" => final_href, "style" => text_style, "rel" => rel_val, "target" => target_val })
                                        %(<a#{link_attrs_str}>#{inner_text}</a>)

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

@@ -118,7 +118,7 @@ module MjmlRb
 
       def serialize_table_node(node)
         return node.content.to_s if node.text?
-        return "" if node.comment?
+        return "<!--#{node.content}-->" if node.comment?
 
         attrs = normalize_table_node_attributes(node)
         attr_html = attrs.map { |key, value| %( #{key}="#{escape_attr(value)}") }.join
@@ -130,7 +130,7 @@ module MjmlRb
       end
 
       def normalize_table_node_attributes(node)
-        attrs = node.attributes.dup
+        attrs = node_string_attributes(node).dup
         style_map = parse_style_map(attrs["style"])
 
         if %w[table td th a].include?(node.tag_name)

data/lib/mjml-rb/config_file.rb

@@ -1,8 +1,10 @@
 require "json"
+require_relative "options"
 
 module MjmlRb
   class ConfigFile
-    DEFAULT_NAME = ".mjmlrc"
+    DEFAULT_NAME = ".mjmlconfig"
+    NAMES = [DEFAULT_NAME, ".mjmlrc", ".mjmlconfig.js"].freeze
 
     class ConfigError < StandardError
       attr_reader :path
@@ -13,30 +15,38 @@ module MjmlRb
       end
     end
 
-    def self.load(dir = Dir.pwd)
-      path = File.join(dir, DEFAULT_NAME)
-      return {} unless File.exist?(path)
+    def self.load(location = Dir.pwd)
+      path = if File.directory?(location)
+               NAMES.map { |name| File.join(location, name) }.find { |candidate| File.file?(candidate) }
+             else
+               location
+             end
+      return {} unless path
+      if path.end_with?(".js")
+        raise ConfigError.new("JavaScript MJML configuration is unsupported; use JSON and register Ruby components", path: path)
+      end
 
       raw = JSON.parse(File.read(path))
+      raise ArgumentError, "Configuration root must be an object" unless raw.is_a?(Hash)
       config = {}
-
+      if raw.key?("options") && !raw["options"].is_a?(Hash)
+        raise ArgumentError, "Configuration options must be an object"
+      end
+      config[:options] = Options.normalize(raw["options"]) if raw["options"]
       if raw["packages"].is_a?(Array)
-        raw["packages"].each do |pkg_path|
-          resolved = File.expand_path(pkg_path, dir)
-          require resolved
+        raw["packages"].each do |package|
+          unless package.is_a?(String) && package.end_with?(".rb")
+            raise ArgumentError, "JavaScript component packages are unsupported; use a Ruby .rb component file"
+          end
+          require File.expand_path(package, File.dirname(path))
         end
         config[:packages_loaded] = raw["packages"]
       end
-
-      if raw["options"].is_a?(Hash)
-        config[:options] = raw["options"].each_with_object({}) do |(k, v), memo|
-          memo[k.to_s.tr("-", "_").to_sym] = v
-        end
-      end
-
       config
     rescue JSON::ParserError => e
       raise ConfigError.new("Failed to parse #{path}: #{e.message}", path: path)
+    rescue ArgumentError, SystemCallError, LoadError => e
+      raise ConfigError.new("Failed to load #{path}: #{e.message}", path: path)
     end
   end
 end

data/lib/mjml-rb/dependencies.rb

@@ -14,6 +14,7 @@ module MjmlRb
       mj-raw
       mj-table
       mj-text
+      mj-social-element
     ]).freeze
 
     RULES = {