mjml-rb 0.2.13 → 0.2.15

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9c54cb0ddf9071b81422853dfcca7e3748ed404b7ea1afba2a99ce9a42229d01
-  data.tar.gz: 7d2469230fa62b2dd52df43e3e8858f1a38aeb5964469af5ec8669182664e9f8
+  metadata.gz: 990083fd9e656cfe50b74937926c14f37ea359adf49530e5ffbacf17ef0ea00a
+  data.tar.gz: a03cc468ddcdb25fdde896f3d53bbd8febaad32db0b3aae3ccad69725f11920c
 SHA512:
-  metadata.gz: 8e349fdbec211923111e8ce2f7a593f46f18308aef3461c531dc3fa6ccfdf97d024c8b181e0289c0b8819db272d49fd3c45c2130298373a8867f6f8f19f14916
-  data.tar.gz: 9603224d7e49fc263441767a0d3a289bd5bbba4cdf93afebc07b1dd7dd0416f8cd5e0161843d50d31e2f21b6390be8a946569027c52f19ab4d6605442544507b
+  metadata.gz: ee2bff6d7a36be6fe4f95b19eefd60e9ff295d62d681cd7e3131ff9e298859b66fea7f5d6887ae3f984d9f13fc6aeda4f3f58b8ee6e6cfd9b603d804cb0305a2
+  data.tar.gz: fdd623a60697cb966591bfcad9fc973e71586ffc3776f6f3de5944fc63c2ea413324b3b6ca288303117b58fbfc12c8e2b13aca174b657a5e8c4a33eb73138e97

data/README.md

@@ -44,7 +44,7 @@ The table below tracks current JS-to-Ruby migration status for MJML components i
 | `mj-section` | migrated | Implemented in `section.rb`. |
 | `mj-wrapper` | migrated | Implemented via `section.rb`. |
 | `mj-column` | migrated | Implemented in `column.rb`. |
-| `mj-group` | migrated | Rendered directly by the renderer. |
+| `mj-group` | migrated | Implemented in `group.rb`, including width-aware child rendering and Outlook table wrappers. |
 | `mj-text` | migrated | Implemented in `text.rb`. |
 | `mj-image` | migrated | Implemented in `image.rb`. |
 | `mj-button` | migrated | Implemented in `button.rb`. |

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

@@ -0,0 +1,134 @@
+require_relative "base"
+
+module MjmlRb
+  module Components
+    class Group < Base
+      TAGS = ["mj-group"].freeze
+
+      ALLOWED_ATTRIBUTES = {
+        "background-color" => "color",
+        "direction" => "enum(ltr,rtl)",
+        "vertical-align" => "enum(top,bottom,middle)",
+        "width" => "unit(px,%)"
+      }.freeze
+
+      DEFAULT_ATTRIBUTES = {
+        "direction" => "ltr"
+      }.freeze
+
+      def tags
+        TAGS
+      end
+
+      def render(tag_name:, node:, context:, attrs:, parent:)
+        width_pct = context.delete(:_column_width_pct) || 100.0
+        a = DEFAULT_ATTRIBUTES.merge(attrs)
+        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]
+
+        group_class = "mj-column-per-#{class_suffix} 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)
+        div_style = style_join(
+          "font-size" => "0",
+          "line-height" => "0",
+          "text-align" => "left",
+          "display" => "inline-block",
+          "width" => "100%",
+          "direction" => a["direction"],
+          "vertical-align" => a["vertical-align"],
+          "background-color" => a["background-color"]
+        )
+
+        inner = with_group_container_width(context, group_width) do
+          render_group_children(node, context, a, group_width)
+        end
+
+        %(<div class="#{escape_attr(group_class)}" style="#{div_style}">#{inner}</div>)
+      end
+
+      private
+
+      def render_group_children(node, context, attrs, group_width)
+        columns = node.element_children.select { |child| child.tag_name == "mj-column" }
+        widths = renderer.send(:compute_column_widths, columns, context)
+        group_width_px = parse_pixel_value(group_width)
+        group_bg = attrs["background-color"]
+        table_attrs = {
+          "bgcolor" => (group_bg == "none" ? nil : group_bg),
+          "border" => "0",
+          "cellpadding" => "0",
+          "cellspacing" => "0",
+          "role" => "presentation"
+        }
+
+        open_table = %(<!--[if mso | IE]><table#{html_attrs(table_attrs)}><tr><![endif]-->)
+        close_table = %(<!--[if mso | IE]></tr></table><![endif]-->)
+        column_index = 0
+
+        body = with_inherited_mj_class(context, node) do
+          node.children.map do |child|
+            case child.tag_name
+            when "mj-column"
+              width_pct = widths[column_index] || 100.0
+              column_index += 1
+              context[:_column_width_pct] = width_pct
+              td_style = style_join(
+                "vertical-align" => resolved_attributes(child, context)["vertical-align"] || "top",
+                "width" => "#{(group_width_px * width_pct / 100.0).round}px"
+              )
+              td_open = %(<!--[if mso | IE]><td#{html_attrs("style" => td_style)}><![endif]-->)
+              td_close = %(<!--[if mso | IE]></td><![endif]-->)
+              "#{td_open}#{render_node(child, context, parent: "mj-group")}#{td_close}"
+            when "mj-raw"
+              render_node(child, context, parent: "mj-group")
+            else
+              render_node(child, context, parent: "mj-group")
+            end
+          end.join("\n")
+        end
+
+        "#{open_table}#{body}#{close_table}"
+      end
+
+      def with_group_container_width(context, width)
+        previous = context[:container_width]
+        context[:container_width] = width
+        yield
+      ensure
+        context[:container_width] = previous
+      end
+
+      def group_container_width(context, attrs, width_pct)
+        parent_width = parse_pixel_value(context[:container_width] || "600px")
+        width = attrs["width"]
+
+        raw_width =
+          if present_attr?(width) && width.end_with?("%")
+            parent_width * parse_pixel_value(width) / 100.0
+          elsif present_attr?(width) && width.end_with?("px")
+            parse_pixel_value(width)
+          else
+            parent_width * width_pct / 100.0
+          end
+
+        "#{[raw_width, 0].max}px"
+      end
+
+      def present_attr?(value)
+        value && !value.empty?
+      end
+
+      def parse_pixel_value(value)
+        return 0.0 unless present_attr?(value)
+
+        matched = value.to_s.match(/(-?\d+(?:\.\d+)?)/)
+        matched ? matched[1].to_f : 0.0
+      end
+    end
+  end
+end

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

@@ -233,12 +233,8 @@ module MjmlRb
             td_open  = %(<!--[if mso | IE]><td class="" style="vertical-align:#{v_align};width:#{col_px}px;" ><![endif]-->)
             td_close = %(<!--[if mso | IE]></td><![endif]-->)
 
-            col_html = if col.tag_name == "mj-group"
-                         renderer.send(:render_group, col, context, widths[i])
-                       else
-                         context[:_column_width_pct] = widths[i]
-                         render_node(col, context, parent: "mj-section")
-                       end
+            context[:_column_width_pct] = widths[i]
+            col_html = render_node(col, context, parent: "mj-section")
 
             "#{td_open}\n#{col_html}\n#{td_close}"
           end

data/lib/mjml-rb/renderer.rb

@@ -7,6 +7,7 @@ require_relative "components/breakpoint"
 require_relative "components/button"
 require_relative "components/carousel"
 require_relative "components/carousel_image"
+require_relative "components/group"
 require_relative "components/head"
 require_relative "components/hero"
 require_relative "components/image"
@@ -163,24 +164,7 @@ module MjmlRb
       if (component = component_for(node.tag_name))
         return component.render(tag_name: node.tag_name, node: node, context: context, attrs: attrs, parent: parent)
       end
-
-      case node.tag_name
-      when "mj-group"
-        render_group(node, context)
-      else
-        render_children(node, context, parent: node.tag_name)
-      end
-    end
-
-    def render_group(node, context, width_pct = 100)
-      items = node.element_children.select { |e| e.tag_name == "mj-column" }
-      widths = compute_column_widths(items, context)
-      with_inherited_mj_class(context, node) do
-        items.each_with_index.map do |item, i|
-          context[:_column_width_pct] = widths[i]
-          render_node(item, context, parent: "mj-group")
-        end.join("\n")
-      end
+      render_children(node, context, parent: node.tag_name)
     end
 
     def compute_column_widths(columns, context)
@@ -360,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"
@@ -406,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)
@@ -444,6 +454,7 @@ module MjmlRb
         register_component(registry, Components::Button.new(self))
         register_component(registry, Components::Carousel.new(self))
         register_component(registry, Components::CarouselImage.new(self))
+        register_component(registry, Components::Group.new(self))
         register_component(registry, Components::Hero.new(self))
         register_component(registry, Components::Image.new(self))
         register_component(registry, Components::Navbar.new(self))

data/lib/mjml-rb/version.rb

@@ -1,3 +1,3 @@
 module MjmlRb
-  VERSION = "0.2.13".freeze
+  VERSION = "0.2.15".freeze
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: mjml-rb
 version: !ruby/object:Gem::Version
-  version: 0.2.13
+  version: 0.2.15
 platform: ruby
 authors:
 - Andrei Andriichuk
@@ -63,6 +63,7 @@ files:
 - lib/mjml-rb/components/carousel_image.rb
 - lib/mjml-rb/components/column.rb
 - lib/mjml-rb/components/divider.rb
+- lib/mjml-rb/components/group.rb
 - lib/mjml-rb/components/head.rb
 - lib/mjml-rb/components/hero.rb
 - lib/mjml-rb/components/html_attributes.rb