emjay 0.1.2 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 236a4d64e435fdf2e8616ef9212e7ce2cf4cf3d58c56e0fa5bb5b09783b807f7
-  data.tar.gz: bbc45d8d1ce8f19fb991c7741e8ce819d38dc9aac9c42582ccd7105fffe914c7
+  metadata.gz: b7e892dd10debedb98375075acbc595f229f28a1cf7976a90444748f123236b8
+  data.tar.gz: adfb7062c1f9ca6d7a7926f9add058896e1d71078a795a64f0638cc036ad387e
 SHA512:
-  metadata.gz: 7888e15b605b12cd5087271dea4982fa3b3a1a663bf97a9e93148982e94404e2b363928d5b0b66ab914d420bf9b37f0e7482fcba924db88f4184e98421e2dd19
-  data.tar.gz: 70ab5c53cf4b2302dc940ca0d9664705437174e5d6d5a64acf6536f8d1cb2f418d4e97b18dc2f003dc81131d87cb4332b49da109d9bed6e0e846978ee9843386
+  metadata.gz: b337e7f6f0ebeece8666fed2347bd0f00a5e1b814312b25d9ec81c31021749f7e81d576e4c318f38cc2c81fcc8560bb9914a9a146cf77d5a8729ada51510f046
+  data.tar.gz: 5b3b358d75521a337ef0ee78af3b1d7929dd8cdcec194d2762332619f067558e9a04289686364d8627e50cf4963ec6bd192de72c1d78bd17c371388b972e56cd

data/README.md

@@ -12,7 +12,7 @@ emjay implements the full set of standard MJML components:
 
 **Features:** CSS inlining via `<mj-style inline="inline">`, global default attributes, `mj-class`, `mj-html-attributes` with CSS selectors, custom fonts, responsive breakpoints, Outlook conditionals, `lang`/`dir` attributes.
 
-All components and features from the [MJML documentation](https://documentation.mjml.io/) should work as described. The [MJML templates and examples](https://mjml.io/templates) are a good starting point for building your own emails. Output is tested against the upstream [MJML 4 JavaScript implementation](https://github.com/mjmlio/mjml) using fixture-based comparison and backported behavioral tests. If you find a case where emjay produces different output from the reference MJML implementation, please [open an issue](https://github.com/julik/emjay/issues).
+All components and features from the [MJML documentation](https://documentation.mjml.io/) should work as described. The [MJML templates and examples](https://mjml.io/templates) are a good starting point for building your own emails. Output is tested against the upstream [MJML 5.4.0 JavaScript implementation](https://github.com/mjmlio/mjml/tree/5.4.0) using fixture-based comparison and backported behavioral tests. If you find a case where emjay produces different output from the reference MJML implementation, please [open an issue](https://github.com/julik/emjay/issues).
 
 ## Installation
 
@@ -141,6 +141,10 @@ MJML partials work with the standard `render` helper. Use them to share common s
 </mj-section>
 ```
 
+### mj-include is not supported
+
+emjay does not implement MJML's `<mj-include />` file-inclusion directive. In a Rails app, use standard ERB partials via `<%= render "shared/header" %>` (as shown above) — partials also accept locals, which `mj-include` does not.
+
 ### How it works
 
 The `.mjml` template handler is an ERB passthrough — it does not compile MJML itself. Instead, an ActionMailer interceptor (`Emjay::Rails::MailInterceptor`) compiles the assembled MJML to HTML after Rails has applied layouts and partials. This means `yield` in a layout receives MJML (not HTML), and the full document is compiled in one pass.

data/lib/emjay/components/body/mj_column.rb

@@ -71,6 +71,8 @@ module Emjay
       def get_styles
         has_br = has_border_radius?
         has_ibr = has_inner_border_radius?
+        outlook_gutter = get_outlook_gutter_styles
+        mobile_gutter = get_mobile_gutter_styles
 
         table_style = {
           "background-color" => get_attribute("background-color"),
@@ -91,7 +93,8 @@ module Emjay
             "direction" => get_attribute("direction"),
             "display" => "inline-block",
             "vertical-align" => get_attribute("vertical-align"),
-            "width" => get_mobile_width
+            "width" => get_mobile_width,
+            **mobile_gutter
           },
           table: {
             **(has_gutter? ? {
@@ -107,7 +110,8 @@ module Emjay
           },
           tdOutlook: {
             "vertical-align" => get_attribute("vertical-align"),
-            "width" => get_width_as_pixel
+            "width" => get_width_as_pixel,
+            **outlook_gutter
           },
           gutter: {
             **table_style,
@@ -121,7 +125,9 @@ module Emjay
       end
 
       def render
-        classes_name = "#{get_column_class} mj-outlook-group-fix"
+        classes_name = get_column_class.dup
+        classes_name += " #{get_desktop_gutter_class_name}" if has_column_gutter?
+        classes_name += " mj-outlook-group-fix"
         css_class = get_attribute("css-class")
         classes_name += " #{css_class}" if css_class
 
@@ -180,15 +186,20 @@ module Emjay
       def get_column_class
         add_media_query = @context[:add_media_query]
 
-        parsed = get_parsed_width
-        formatted = format_float(parsed[:parsed_width]).to_s.tr(".", "-")
+        parsed = has_column_gutter? ? get_desktop_width : get_parsed_width
+        normalized = (parsed[:unit] == "px") ? normalize_px_value(parsed[:parsed_width]) : parsed[:parsed_width]
+        formatted = format_float(normalized).to_s.tr(".", "-")
 
         class_name = case parsed[:unit]
         when "%" then "mj-column-per-#{formatted}"
         else "mj-column-px-#{formatted}"
         end
 
-        add_media_query&.call(class_name, parsed)
+        add_media_query&.call(class_name, {unit: parsed[:unit], parsed_width: normalized})
+
+        if has_column_gutter? && !@context[:is_in_group]
+          add_media_query&.call(get_desktop_gutter_class_name, {padding: get_desktop_padding})
+        end
 
         class_name
       end
@@ -198,6 +209,138 @@ module Emjay
         (value == value.to_i) ? value.to_i : value
       end
 
+      def has_column_gutter?
+        gutter = @context[:gutter]
+        !gutter.nil? && gutter != ""
+      end
+
+      def get_normalized_gutter_value(target_unit)
+        gutter = @context[:gutter]
+        return 0 if gutter.nil? || gutter == ""
+
+        parsed = WidthParser.call(gutter, parse_float_to_int: false)
+        parent_width = @context[:container_width]
+
+        return parsed[:parsed_width] if parsed[:unit] == target_unit
+
+        if target_unit == "%" && parsed[:unit] == "px"
+          (parsed[:parsed_width] / parent_width.to_f) * 100
+        elsif target_unit == "px" && parsed[:unit] == "%"
+          (parent_width.to_f * parsed[:parsed_width]) / 100
+        else
+          parsed[:parsed_width]
+        end
+      end
+
+      def get_desktop_unit
+        get_parsed_width[:unit]
+      end
+
+      def get_desktop_width
+        parsed = get_parsed_width
+        return parsed unless has_column_gutter?
+
+        sibling = @props[:sibling] || 1
+        index = @props[:index] || 0
+        unit = parsed[:unit]
+        gutter = get_normalized_gutter_value(unit)
+        reduction = (gutter * (sibling - 1)) / sibling.to_f
+        reduced = [0, normalize_unit_value(parsed[:parsed_width] - reduction)].max
+
+        if unit == "px"
+          floor_width = reduced.floor
+          fractional = reduced - floor_width
+          extra = [0, [sibling, (sibling * fractional).round].min].max
+          {parsed_width: floor_width + ((index < extra) ? 1 : 0), unit: unit}
+        else
+          {parsed_width: reduced, unit: unit}
+        end
+      end
+
+      def get_desktop_gutter_class_name
+        unit = get_desktop_unit
+        gutter = get_normalized_gutter_value(unit)
+        unit_token = (unit == "%") ? "per" : unit
+        direction_token = (@context[:direction] == "rtl") ? "-rtl" : ""
+        normalized = (unit == "px") ? normalize_px_value(gutter) : gutter
+        gutter_token = normalize_unit_value(normalized).to_s.tr(".", "-")
+        sibling = @props[:sibling] || 1
+        index = @props[:index] || 0
+        "mj-column-gutter-#{sibling}-#{index + 1}-#{unit_token}-#{gutter_token}#{direction_token}"
+      end
+
+      def get_desktop_padding_values(unit)
+        first = @props[:first]
+        last = @props[:last]
+        sibling = @props[:sibling] || 1
+        direction = @context[:direction]
+        gutter = get_normalized_gutter_value(unit)
+        normalized = (unit == "px") ? normalize_px_value(gutter) : gutter
+        is_px = unit == "px"
+        half_leading = is_px ? (normalized / 2.0).ceil : normalized / 2.0
+        half_trailing = is_px ? (normalized / 2.0).floor : normalized / 2.0
+        is_rtl = direction == "rtl"
+
+        return {top: 0, right: 0, bottom: 0, left: 0} if sibling == 1
+
+        if is_rtl
+          {top: 0, right: first ? 0 : half_trailing, bottom: 0, left: last ? 0 : half_leading}
+        else
+          {top: 0, right: last ? 0 : half_leading, bottom: 0, left: first ? 0 : half_trailing}
+        end
+      end
+
+      def get_mobile_padding_values
+        first = @props[:first]
+        last = @props[:last]
+        gutter = get_normalized_gutter_value("%")
+        half = gutter / 2.0
+        {top: first ? 0 : half, right: 0, bottom: last ? 0 : half, left: 0}
+      end
+
+      def format_padding(top, right, bottom, left, unit)
+        if unit == "px"
+          "#{normalize_px_value(top)}px #{normalize_px_value(right)}px #{normalize_px_value(bottom)}px #{normalize_px_value(left)}px"
+        else
+          "#{normalize_unit_value(top)}#{unit} #{normalize_unit_value(right)}#{unit} #{normalize_unit_value(bottom)}#{unit} #{normalize_unit_value(left)}#{unit}"
+        end
+      end
+
+      def get_desktop_padding
+        unit = get_desktop_unit
+        v = get_desktop_padding_values(unit)
+        format_padding(v[:top], v[:right], v[:bottom], v[:left], unit)
+      end
+
+      def get_mobile_padding
+        v = get_mobile_padding_values
+        format_padding(v[:top], v[:right], v[:bottom], v[:left], "%")
+      end
+
+      def get_outlook_gutter_styles
+        return {} unless has_column_gutter?
+        {"padding" => get_desktop_padding_values("px").then { |v| format_padding(v[:top], v[:right], v[:bottom], v[:left], "px") }}
+      end
+
+      def get_mobile_gutter_styles
+        return {} unless has_column_gutter?
+
+        if @context[:is_in_group]
+          {"padding" => get_desktop_padding}
+        else
+          {"padding" => get_mobile_padding}
+        end
+      end
+
+      def normalize_unit_value(value)
+        rounded = value.to_f.round(6)
+        (rounded == rounded.to_i) ? rounded.to_i : rounded
+      end
+
+      def normalize_px_value(value)
+        value.to_f.round
+      end
+
       def has_border_radius?
         br = get_attribute("border-radius")
         br && !br.empty?

data/lib/emjay/components/body/mj_section.rb

@@ -28,6 +28,7 @@ module Emjay
           "border-top" => "string",
           "direction" => "enum(ltr,rtl)",
           "full-width" => "enum(full-width,false,)",
+          "gutter" => "unit(px,%)",
           "padding" => "unit(px,%){1,4}",
           "padding-top" => "unit(px,%)",
           "padding-bottom" => "unit(px,%)",
@@ -54,7 +55,9 @@ module Emjay
         widths = get_box_widths
         @context.merge(
           container_width: "#{widths[:box]}px",
-          gap: get_attribute("gap")
+          gap: get_attribute("gap"),
+          gutter: get_attribute("gutter"),
+          direction: get_attribute("direction")
         )
       end
 

data/lib/emjay/components/body/mj_social_element.rb

@@ -48,6 +48,7 @@ module Emjay
           "align" => "left",
           "icon-position" => "left",
           "color" => "#000",
+          "border" => "0",
           "border-radius" => "3px",
           "font-family" => "Ubuntu, Helvetica, Arial, sans-serif",
           "font-size" => "13px",
@@ -66,6 +67,7 @@ module Emjay
           "icon-position" => "enum(left,right)",
           "background-color" => "color",
           "color" => "color",
+          "border" => "string",
           "border-radius" => "string",
           "font-family" => "string",
           "font-size" => "unit(px)",
@@ -123,6 +125,7 @@ module Emjay
             "width" => icon_size
           },
           img: {
+            "border" => get_attribute("border"),
             "border-radius" => get_attribute("border-radius"),
             "display" => "block"
           },

data/lib/emjay/renderer.rb

@@ -90,10 +90,13 @@ module Emjay
         global_data: global_data,
         container_width: "600px",
         add_media_query: ->(class_name, data) {
-          pw = data[:parsed_width]
-          pw = pw.to_i if pw == pw.to_i
-          global_data.media_queries[class_name] =
+          global_data.media_queries[class_name] = if data.key?(:padding)
+            "{ padding:#{data[:padding]} !important; }"
+          else
+            pw = data[:parsed_width]
+            pw = pw.to_i if pw == pw.to_i
             "{ width:#{pw}#{data[:unit]} !important; max-width: #{pw}#{data[:unit]}; }"
+          end
         },
         add_head_style: ->(identifier, head_style_fn) {
           global_data.head_style[identifier] = head_style_fn

data/lib/emjay/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Emjay
-  VERSION = "0.1.2"
+  VERSION = "0.2.0"
 end

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: emjay
 version: !ruby/object:Gem::Version
-  version: 0.1.2
+  version: 0.2.0
 platform: ruby
 authors:
 - Julik Tarkhanov
 bindir: bin
 cert_chain: []
-date: 2026-05-20 00:00:00.000000000 Z
+date: 2026-08-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: nokogiri
@@ -108,7 +108,7 @@ licenses:
 metadata:
   homepage_uri: https://github.com/julik/emjay
   source_code_uri: https://github.com/julik/emjay
-  changelog_uri: https://github.com/julik/emjay/commits/main
+  changelog_uri: https://github.com/julik/emjay/releases
 rdoc_options: []
 require_paths:
 - lib