mjml-rb 0.2.14 → 0.2.16

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2d1dc49d39635e3f4530f642a8699646f3bff8e545213387f91d95bb461ea67d
-  data.tar.gz: 15139737ec96a78601bd7d0e0a992b8743060d4923664eea05462a76e70dc7d3
+  metadata.gz: 3808a2e62a0c9a19970937ba5890b4257e8623442efc738e7725b20b11f412e0
+  data.tar.gz: 82f3f5e33d4f0b302cc0329dde2b4402713349850865cf591ade0762650f8579
 SHA512:
-  metadata.gz: 486e95fb106f03ebb1ae929ec548996f9d53868b360fcff23cfd0aa28d9e4240e3a3181f611b3270837c9012e523c32f3089c0ebe3a82e9bd6e067735a955bec
-  data.tar.gz: 5bf0eb72f669aed9eb59dc1b8fbe16563082392bbc8d05e2f8d4ce4098a492606303cea65692757fdf5b8eed2c0fc2be7080daeac73f6f242b0a1dfc1c0d5551
+  metadata.gz: 47b7c807c43e56df28c60a7c0fae60002c8a95782bc733e293aff5f3b41e06952fd94bedd421fb669fe3002ce261708146d628bce64a79a929706530f6069028
+  data.tar.gz: 740e73174150f6130b39f8be696e584a75f56a5daa5387bfd45458f1a44706f84d2c6d25e000229f9ba3a5b28036236de7fa16deb3c1158979d3a1d55e9afd6c

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

@@ -7,6 +7,12 @@ module MjmlRb
 
       SECTION_ALLOWED_ATTRIBUTES = {
         "background-color" => "color",
+        "background-url" => "string",
+        "background-repeat" => "enum(repeat,no-repeat)",
+        "background-size" => "string",
+        "background-position" => "string",
+        "background-position-x" => "string",
+        "background-position-y" => "string",
         "border" => "string",
         "border-bottom" => "string",
         "border-left" => "string",
@@ -27,9 +33,12 @@ module MjmlRb
       ).freeze
 
       DEFAULT_ATTRIBUTES = {
-        "direction"  => "ltr",
-        "padding"    => "20px 0",
-        "text-align" => "center"
+        "direction"           => "ltr",
+        "padding"             => "20px 0",
+        "text-align"          => "center",
+        "background-repeat"   => "repeat",
+        "background-size"     => "auto",
+        "background-position" => "top center"
       }.freeze
 
       class << self
@@ -116,6 +125,166 @@ module MjmlRb
         " #{parts.join(' ')} "
       end
 
+      # ── Background helpers ───────────────────────────────────────────────
+
+      VERTICAL_KEYWORDS   = %w[top bottom].freeze
+      HORIZONTAL_KEYWORDS = %w[left right].freeze
+
+      def has_background?(a)
+        url = a["background-url"]
+        url && !url.to_s.strip.empty?
+      end
+
+      def parse_background_position(position_str)
+        tokens = position_str.to_s.strip.split(/\s+/)
+
+        case tokens.size
+        when 0
+          {x: "center", y: "top"}
+        when 1
+          if VERTICAL_KEYWORDS.include?(tokens[0])
+            {x: "center", y: tokens[0]}
+          else
+            {x: tokens[0], y: "center"}
+          end
+        when 2
+          first, second = tokens
+          if VERTICAL_KEYWORDS.include?(first) ||
+             (first == "center" && HORIZONTAL_KEYWORDS.include?(second))
+            {x: second, y: first}
+          else
+            {x: first, y: second}
+          end
+        else
+          {x: "center", y: "top"}
+        end
+      end
+
+      def get_background_position(a)
+        base = parse_background_position(a["background-position"] || "top center")
+        pos_x = a["background-position-x"]
+        pos_y = a["background-position-y"]
+        x = (pos_x && !pos_x.to_s.empty?) ? pos_x : base[:x]
+        y = (pos_y && !pos_y.to_s.empty?) ? pos_y : base[:y]
+        {x: x, y: y}
+      end
+
+      def get_background_string(a)
+        pos = get_background_position(a)
+        "#{pos[:x]} #{pos[:y]}"
+      end
+
+      def get_background(a)
+        bg_url    = a["background-url"]
+        bg_color  = a["background-color"]
+        bg_size   = a["background-size"]
+        bg_repeat = a["background-repeat"]
+
+        if has_background?(a)
+          pos_str = get_background_string(a)
+          parts = []
+          parts << bg_color if bg_color && !bg_color.to_s.empty?
+          parts << "url('#{bg_url}')"
+          parts << pos_str
+          parts << "/ #{bg_size}"
+          parts << bg_repeat
+          parts.join(" ")
+        else
+          bg_color
+        end
+      end
+
+      # ── VML background for Outlook ───────────────────────────────────────
+
+      PERCENTAGE_RE = /\A\d+(\.\d+)?%\z/
+
+      VML_KEYWORD_TO_PERCENT = {
+        "left" => "0%", "top" => "0%",
+        "center" => "50%",
+        "right" => "100%", "bottom" => "100%"
+      }.freeze
+
+      def render_with_background(section_html, a, container_px)
+        bg_url    = a["background-url"]
+        bg_color  = a["background-color"]
+        bg_repeat = a["background-repeat"] || "repeat"
+        bg_size   = a["background-size"]   || "auto"
+        is_repeat = bg_repeat == "repeat"
+
+        pos = get_background_position(a)
+
+        # Normalize keywords to percentages
+        bg_pos_x = VML_KEYWORD_TO_PERCENT.fetch(pos[:x], nil) || (pos[:x] =~ PERCENTAGE_RE ? pos[:x] : "50%")
+        bg_pos_y = VML_KEYWORD_TO_PERCENT.fetch(pos[:y], nil) || (pos[:y] =~ PERCENTAGE_RE ? pos[:y] : "0%")
+
+        # Compute VML origin/position per axis
+        v_origin_x, v_pos_x = vml_axis_values(bg_pos_x, is_repeat, true)
+        v_origin_y, v_pos_y = vml_axis_values(bg_pos_y, is_repeat, false)
+
+        # VML size attributes
+        v_size_attrs = vml_size_attributes(bg_size)
+
+        # VML type
+        is_auto  = bg_size == "auto"
+        vml_type = (!is_repeat && !is_auto) ? "frame" : "tile"
+
+        # Auto special case: force tile, reset position
+        if is_auto
+          v_origin_x = 0.5; v_pos_x = 0.5
+          v_origin_y = 0;   v_pos_y = 0
+        end
+
+        # Build v:fill attributes
+        fill_pairs = [
+          ["origin", "#{v_origin_x}, #{v_origin_y}"],
+          ["position", "#{v_pos_x}, #{v_pos_y}"],
+          ["src", bg_url],
+          ["color", bg_color],
+          ["type", vml_type]
+        ]
+        fill_pairs << ["size", v_size_attrs[:size]] if v_size_attrs[:size]
+        fill_pairs << ["aspect", v_size_attrs[:aspect]] if v_size_attrs[:aspect]
+        fill_str = fill_pairs.map { |(k, v)| %(#{k}="#{escape_attr(v.to_s)}") }.join(" ")
+
+        %(<!--[if mso | IE]><v:rect style="mso-width-percent:1000;" xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false"><v:fill #{fill_str} /><v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0"><![endif]-->) +
+        section_html +
+        %(<!--[if mso | IE]></v:textbox></v:rect><![endif]-->)
+      end
+
+      def vml_axis_values(pct_str, is_repeat, is_x)
+        if pct_str =~ PERCENTAGE_RE
+          decimal = pct_str.to_f / 100.0
+          if is_repeat
+            [decimal, decimal]
+          else
+            val = (-50 + decimal * 100) / 100.0
+            [val, val]
+          end
+        elsif is_repeat
+          [is_x ? 0.5 : 0, is_x ? 0.5 : 0]
+        else
+          [is_x ? 0 : -0.5, is_x ? 0 : -0.5]
+        end
+      end
+
+      def vml_size_attributes(bg_size)
+        case bg_size
+        when "cover"
+          {size: "1,1", aspect: "atleast"}
+        when "contain"
+          {size: "1,1", aspect: "atmost"}
+        when "auto"
+          {}
+        else
+          parts = bg_size.to_s.strip.split(/\s+/)
+          if parts.size == 1
+            {size: bg_size, aspect: "atmost"}
+          else
+            {size: parts.join(",")}
+          end
+        end
+      end
+
       # ── mj-section ─────────────────────────────────────────────────────────
 
       def render_section(node, context, attrs)
@@ -124,6 +293,7 @@ module MjmlRb
         css_class    = a["css-class"]
         bg_color     = a["background-color"]
         border_radius = a["border-radius"]
+        bg_has       = has_background?(a)
 
         # Box width: container minus horizontal padding and borders
         border_left  = parse_border_width(a["border-left"] || a["border"])
@@ -148,46 +318,85 @@ 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]-->)
 
-        # Section div, table, td
-        div_style = style_join(
-          "background"       => bg_color,
-          "background-color" => bg_color,
-          "margin"           => "0px auto",
-          "max-width"        => "#{container_px}px"
-        )
-
+        # Section div, table, td — styles differ based on background-url presence
         border_val = a["border"]
         border_val = nil if border_val.nil? || border_val.to_s.strip.empty? || border_val.to_s.strip == "none"
 
-        td_style = style_join(
-          "border"         => border_val,
-          "border-top"     => a["border-top"],
-          "border-right"   => a["border-right"],
-          "border-bottom"  => a["border-bottom"],
-          "border-left"    => a["border-left"],
-          "border-radius"  => border_radius,
-          "background"     => bg_color,
-          "background-color" => bg_color,
-          "direction"      => a["direction"],
-          "font-size"      => "0px",
-          "padding"        => a["padding"],
-          "padding-top"    => a["padding-top"],
-          "padding-right"  => a["padding-right"],
-          "padding-bottom" => a["padding-bottom"],
-          "padding-left"   => a["padding-left"],
-          "text-align"     => a["text-align"]
-        )
-
-        table_style = style_join(
-          "background"       => bg_color,
-          "background-color" => bg_color,
-          "border-radius"    => border_radius,
-          "width"            => "100%"
-        )
+        if bg_has
+          bg_value  = get_background(a)
+          bg_string = get_background_string(a)
+          bg_repeat = a["background-repeat"]
+          bg_size   = a["background-size"]
+
+          div_style = style_join(
+            "background"          => bg_value,
+            "background-position" => bg_string,
+            "background-repeat"   => bg_repeat,
+            "background-size"     => bg_size,
+            "margin"              => "0px auto",
+            "max-width"           => "#{container_px}px"
+          )
+          table_style = style_join(
+            "background"          => bg_value,
+            "background-position" => bg_string,
+            "background-repeat"   => bg_repeat,
+            "background-size"     => bg_size,
+            "border-radius"       => border_radius,
+            "width"               => "100%"
+          )
+          td_style = style_join(
+            "border"         => border_val,
+            "border-top"     => a["border-top"],
+            "border-right"   => a["border-right"],
+            "border-bottom"  => a["border-bottom"],
+            "border-left"    => a["border-left"],
+            "border-radius"  => border_radius,
+            "direction"      => a["direction"],
+            "font-size"      => "0px",
+            "padding"        => a["padding"],
+            "padding-top"    => a["padding-top"],
+            "padding-right"  => a["padding-right"],
+            "padding-bottom" => a["padding-bottom"],
+            "padding-left"   => a["padding-left"],
+            "text-align"     => a["text-align"]
+          )
+        else
+          div_style = style_join(
+            "background"       => bg_color,
+            "background-color" => bg_color,
+            "margin"           => "0px auto",
+            "max-width"        => "#{container_px}px"
+          )
+          table_style = style_join(
+            "background"       => bg_color,
+            "background-color" => bg_color,
+            "border-radius"    => border_radius,
+            "width"            => "100%"
+          )
+          td_style = style_join(
+            "border"         => border_val,
+            "border-top"     => a["border-top"],
+            "border-right"   => a["border-right"],
+            "border-bottom"  => a["border-bottom"],
+            "border-left"    => a["border-left"],
+            "border-radius"  => border_radius,
+            "background"     => bg_color,
+            "background-color" => bg_color,
+            "direction"      => a["direction"],
+            "font-size"      => "0px",
+            "padding"        => a["padding"],
+            "padding-top"    => a["padding-top"],
+            "padding-right"  => a["padding-right"],
+            "padding-bottom" => a["padding-bottom"],
+            "padding-left"   => a["padding-left"],
+            "text-align"     => a["text-align"]
+          )
+        end
 
         div_attrs = {"class" => css_class, "style" => div_style}
         table_attrs = {
           "align" => "center",
+          "background" => bg_has ? a["background-url"] : nil,
           "border" => "0",
           "cellpadding" => "0",
           "cellspacing" => "0",
@@ -202,14 +411,19 @@ module MjmlRb
         }
         inner = merge_outlook_conditionals(render_section_columns(node, context, box_width))
 
+        # Wrap in innerDiv when background image is present (prevents Yahoo whitespace gaps)
+        inner_content = bg_has ? %(<div style="line-height:0;font-size:0">#{inner}</div>) : inner
+
         section_html =
           %(<div#{html_attrs(div_attrs)}>) +
           %(<table#{html_attrs(table_attrs)}>) +
-          %(<tbody><tr><td#{html_attrs(td_attrs)}>#{inner}</td></tr></tbody></table></div>)
+          %(<tbody><tr><td#{html_attrs(td_attrs)}>#{inner_content}</td></tr></tbody></table></div>)
 
         render_after = %(<!--[if mso | IE]></td></tr></table><![endif]-->)
 
-        "#{render_before}\n#{section_html}\n#{render_after}"
+        body = bg_has ? render_with_background(section_html, a, container_px) : section_html
+
+        "#{render_before}\n#{body}\n#{render_after}"
       end
 
       # Generate Outlook IE conditional wrappers around each column/group.

data/lib/mjml-rb/renderer.rb

@@ -344,25 +344,32 @@ module MjmlRb
         property, value = entry.split(":", 2).map { |part| part&.strip }
         next if property.nil? || property.empty? || value.nil? || value.empty?
 
-        memo[property] = value.sub(/\s*!important\s*\z/, "").strip
+        important = value.match?(/\s*!important\s*\z/)
+        memo[property] = {
+          value: value.sub(/\s*!important\s*\z/, "").strip,
+          important: important
+        }
       end
     end
 
     def merge_inline_style!(node, declarations)
       existing = parse_css_declarations(node["style"].to_s)
       declarations.each do |property, value|
-        existing[property] = value
+        existing[property] = merge_css_declaration(existing[property], value)
       end
       normalize_background_fallbacks!(node, existing)
-      node["style"] = existing.map { |property, value| "#{property}: #{value}" }.join("; ")
+      node["style"] = serialize_css_declarations(existing)
     end
 
     def normalize_background_fallbacks!(node, declarations)
-      background_color = declarations["background-color"]
+      background_color = declaration_value(declarations["background-color"])
       return if background_color.nil? || background_color.empty?
 
-      if syncable_background?(declarations["background"])
-        declarations["background"] = background_color
+      if syncable_background?(declaration_value(declarations["background"]))
+        declarations["background"] = {
+          value: background_color,
+          important: declarations.fetch("background-color", {}).fetch(:important, false)
+        }
       end
 
       return unless node.name == "td"
@@ -390,6 +397,25 @@ module MjmlRb
         !normalized.include?(" right")
     end
 
+    def merge_css_declaration(existing, incoming)
+      return incoming if existing.nil?
+      return existing if existing[:important] && !incoming[:important]
+
+      incoming
+    end
+
+    def declaration_value(declaration)
+      declaration && declaration[:value]
+    end
+
+    def serialize_css_declarations(declarations)
+      declarations.map do |property, declaration|
+        value = declaration[:value]
+        value = "#{value} !important" if declaration[:important]
+        "#{property}: #{value}"
+      end.join("; ")
+    end
+
     def append_component_head_styles(document, context)
       component_registry.each_value.uniq.each do |component|
         next unless component.respond_to?(:head_style)

data/lib/mjml-rb/version.rb

@@ -1,3 +1,3 @@
 module MjmlRb
-  VERSION = "0.2.14".freeze
+  VERSION = "0.2.16".freeze
 end

metadata

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