mjml-rb 0.2.28 → 0.2.29

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d26c85019dd29ae196f94e69312c51874ee3fe9feccab39d74c0e91442c60746
-  data.tar.gz: 4bda9f651c55981d6a899a65ac97fafe73c98c85552c1d6c121c93c40ce1ab0d
+  metadata.gz: 5cd5e68ad11e8256180f4be4f8d00e86f647327695c9391904eb4ddd31ddc7ad
+  data.tar.gz: a7f4f27a8db1ab489a3ae5d2e4e52f556fed859cfc5c8d33beb6ea29a581e6e9
 SHA512:
-  metadata.gz: 34a1e8d518b0e7a650ee34505070344fc8c4509e9ccb54bb76eb7032a2a12071d3d5b8b5d8587a86ba4e94f83703f68d841896bbf6260595cc921affe0267fb5
-  data.tar.gz: 6718b0725c742ef05549cc32301a26a7012afb238da2d796ce1c6b4c54d66cc015fc7e0ae723953b8cd3972a9a7fbcfc914b69c52fdaed50bc8b758c639e5d12
+  metadata.gz: 34a43b990be0b2cb7176e8c4736f17a79adc327a67ab91bab09b80af9d5776ad908f18bfba5cf41cdb7ea7ff5a40ea3e2b1cfd088eb3db99e23eab8132023ade
+  data.tar.gz: c5dd780d2529994abcc89680862d29dcba174fa6b085e5d0c3fa588ab0048899c010d9ce4ff9565289459d95c86004ffa6bd328920782746ce94241433e4bc9e

data/README.md

@@ -34,46 +34,16 @@ bundle exec bin/mjml --validate example.mjml
 bundle exec bin/mjml --migrate old.mjml -s
 ```
 
-## Migration status
+## Implementation idea
 
-The table below tracks current JS-to-Ruby migration status for MJML components in this repo.
-
-| Component | Status | Notes |
-| --- | --- | --- |
-| `mj-body` | migrated | Ruby component exists and matches the upstream `mj-body` behavior currently vendored in `lib/mjml-rb/components/mjml-body`. |
-| `mj-section` | migrated | Implemented in `section.rb`. |
-| `mj-wrapper` | migrated | Implemented via `section.rb`. |
-| `mj-column` | migrated | Implemented in `column.rb`. |
-| `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`. |
-| `mj-divider` | migrated | Implemented in `divider.rb`. |
-| `mj-table` | migrated | Implemented in `table.rb`. |
-| `mj-social` | migrated | Implemented in `social.rb`. |
-| `mj-social-element` | migrated | Implemented in `social.rb`. |
-| `mj-accordion` | migrated | Implemented in `accordion.rb`. |
-| `mj-accordion-element` | migrated | Implemented in `accordion.rb`. |
-| `mj-accordion-title` | migrated | Implemented in `accordion.rb`. |
-| `mj-accordion-text` | migrated | Implemented in `accordion.rb`. |
-| `mj-spacer` | migrated | Implemented in `spacer.rb`. |
-| `mj-hero` | migrated | Implemented in `hero.rb` with fixed/fluid modes, inner content wrapper, and Outlook VML background fallback. |
-| `mj-navbar` | migrated | Implemented in `navbar.rb`, including `base-url` propagation and breakpoint-aware hamburger CSS. |
-| `mj-navbar-link` | migrated | Implemented in `navbar.rb` as an ending-tag navbar child component. |
-| `mj-raw` | migrated | Implemented in `raw.rb`, including head insertion and top-level `position="file-start"` output before the doctype. |
-| `mj-head` | migrated | Implemented in `head.rb` and dispatches supported head children through component handlers. |
-| `mj-attributes` | migrated | Implemented in `attributes.rb`, including npm-style `mj-class` descendant defaults. |
-| `mj-all` | migrated | Implemented through `attributes.rb` with npm-style global default attribute precedence. |
-| `mj-class` | migrated | Supported through `attributes.rb`, including nested per-tag descendant defaults. |
-| `mj-title` | migrated | Implemented in `head.rb`. |
-| `mj-preview` | migrated | Implemented in `head.rb`. |
-| `mj-style` | migrated | Implemented in `head.rb`, including inline-style registration. |
-| `mj-font` | migrated | Implemented in `head.rb`. |
-| `mj-carousel` | migrated | Implemented in `carousel.rb`, including per-instance radio/thumbnail CSS, Outlook fallback rendering, and thumbnail/control output. |
-| `mj-carousel-image` | migrated | Implemented in `carousel_image.rb`, including radio, thumbnail, and main image rendering helpers used by `mj-carousel`. |
-| `mj-breakpoint` | migrated | Supported in `mj-head` and used to control desktop column media-query widths. |
-| `mj-html-attributes` | migrated | Supported in `mj-head` and applied to the rendered HTML via CSS selectors. |
-| `mj-selector` | migrated | Supported as the selector container for `mj-html-attribute` rules. |
-| `mj-html-attribute` | migrated | Supported for injecting custom HTML attributes into matched rendered nodes. |
-
-A more detailed parity backlog lives in [doc/TODO.md](/doc/TODO.md).
+> **Zero-dependency pure-Ruby MJML renderer.**
+>
+> The npm `mjml` package requires Node.js at build time (or runtime via a child
+> process / FFI bridge). This project replaces that entire pipeline with a single
+> Ruby library: XML parsing, AST construction, attribute resolution, validation,
+> and HTML rendering — all in Ruby, with no native extensions and no Node.js
+> dependency. Drop it into a Rails, Sinatra, or plain Ruby project and render
+> MJML templates the same way you render ERB — no extra runtime, no
+> `package.json`, no `node_modules`.
+
+Remaining parity work is tracked in [doc/TODO.md](/doc/TODO.md).

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

@@ -50,7 +50,7 @@ module MjmlRb
         return "" if children.empty?
 
         carousel_id = SecureRandom.hex(8)
-        context[:head_styles] << component_head_style(carousel_id, children.length, a)
+        context[:component_head_styles] << component_head_style(carousel_id, children.length, a)
 
         outer_td_attrs = {
           "align" => a["align"],

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

@@ -49,7 +49,7 @@ module MjmlRb
           if node.attributes["inline"] == "inline"
             context[:inline_styles] << css
           else
-            context[:head_styles] << css
+            context[:user_styles] << css
           end
         when "mj-font"
           name = node.attributes["name"]

data/lib/mjml-rb/renderer.rb

@@ -71,7 +71,6 @@ module MjmlRb
       context[:column_widths] = {}
       append_component_head_styles(document, context)
       content = render_node(body, context, parent: "mjml")
-      append_column_width_styles(context)
       build_html_document(content, context)
     end
 
@@ -84,7 +83,8 @@ module MjmlRb
         breakpoint: "480px",
         before_doctype: "",
         head_raw: [],
-        head_styles: [],
+        component_head_styles: [],
+        user_styles: [],
         inline_styles: [],
         html_attributes: {},
         fonts: DEFAULT_FONTS.merge(hash_or_empty(options[:fonts])),
@@ -108,10 +108,12 @@ module MjmlRb
     def build_html_document(content, context)
       title = context[:title].to_s
       preview = context[:preview]
-      head_styles = ([DOCUMENT_RESET_CSS] + unique_strings(context[:head_styles])).join("\n")
       head_raw = Array(context[:head_raw]).join("\n")
       before_doctype = context[:before_doctype].to_s
       font_tags = build_font_tags(content, context[:inline_styles], context[:fonts])
+      media_queries_tags = build_media_queries_tags(context[:breakpoint], context[:column_widths])
+      component_styles_tag = build_style_tag(unique_strings(context[:component_head_styles]))
+      user_styles_tag = build_style_tag(unique_strings(context[:user_styles]))
       preview_block = preview.empty? ? "" : %(<div style="display:none;max-height:0;overflow:hidden;opacity:0;">#{escape_html(preview)}</div>)
       html_attributes = {
         "lang" => context[:lang],
@@ -133,10 +135,13 @@ module MjmlRb
             <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
             <meta charset="utf-8">
             <meta name="viewport" content="width=device-width, initial-scale=1">
+            <style type="text/css">#{DOCUMENT_RESET_CSS}</style>
             #{OUTLOOK_DOCUMENT_SETTINGS}
             #{OUTLOOK_GROUP_FIX}
             #{font_tags}
-            <style type="text/css">#{head_styles}</style>
+            #{media_queries_tags}
+            #{component_styles_tag}
+            #{user_styles_tag}
             #{head_raw}
           </head>
           <body style="#{body_style}">
@@ -226,28 +231,39 @@ module MjmlRb
       end
     end
 
-    def append_column_width_styles(context)
-      widths = context[:column_widths] || {}
-      return if widths.empty?
+    def build_media_queries_tags(breakpoint, column_widths)
+      widths = column_widths || {}
+      return "" if widths.empty?
 
-      css = widths.map do |suffix, pct|
+      base_rules = widths.map do |suffix, pct|
         ".mj-column-per-#{suffix} { width:#{pct}% !important; max-width: #{pct}%; }"
-      end.join("\n")
-      moz_css = widths.map do |suffix, pct|
+      end
+      moz_rules = widths.map do |suffix, pct|
         ".moz-text-html .mj-column-per-#{suffix} { width:#{pct}% !important; max-width: #{pct}%; }"
-      end.join("\n")
-      owa_css = widths.map do |suffix, pct|
+      end
+      owa_rules = widths.map do |suffix, pct|
         "[owa] .mj-column-per-#{suffix} { width:#{pct}% !important; max-width: #{pct}%; }"
-      end.join("\n")
-      breakpoint = context[:breakpoint].to_s.strip
-      if breakpoint.empty?
-        context[:head_styles] << css
-        context[:head_styles] << moz_css
+      end
+
+      bp = breakpoint.to_s.strip
+      parts = []
+
+      if bp.empty?
+        parts << "<style type=\"text/css\">\n#{base_rules.join("\n")}\n</style>"
+        parts << "<style type=\"text/css\">\n#{moz_rules.join("\n")}\n</style>"
       else
-        context[:head_styles] << "@media only screen and (min-width:#{breakpoint}) {\n#{css}\n}"
-        context[:head_styles] << "@media screen and (min-width:#{breakpoint}) {\n#{moz_css}\n}"
+        parts << "<style type=\"text/css\">\n@media only screen and (min-width:#{bp}) {\n#{base_rules.join("\n")}\n}\n</style>"
+        parts << "<style media=\"screen and (min-width:#{bp})\">\n#{moz_rules.join("\n")}\n</style>"
       end
-      context[:head_styles] << owa_css
+
+      parts << "<style type=\"text/css\">\n#{owa_rules.join("\n")}\n</style>"
+      parts.join("\n")
+    end
+
+    def build_style_tag(styles)
+      return "" if styles.empty?
+
+      "<style type=\"text/css\">#{styles.join("\n")}</style>"
     end
 
     def merge_outlook_conditionals(html)
@@ -482,7 +498,7 @@ module MjmlRb
                end
         next unless Array(tags).any? { |tag| contains_tag?(document, tag) }
 
-        context[:head_styles] << style
+        context[:component_head_styles] << style
       end
     end
 

data/lib/mjml-rb/version.rb

@@ -1,3 +1,3 @@
 module MjmlRb
-  VERSION = "0.2.28".freeze
+  VERSION = "0.2.29".freeze
 end

metadata

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