activemail 2.0.0 → 2.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c37e5bd4d1c2746462f33f9b221a2734081ec4f89be697f77e22f8402767c879
-  data.tar.gz: 69b5e178c7521b8f741a504af3c4d5524373b68b80cbe44af35a38a168e77389
+  metadata.gz: 3dc3ba94cb3bbe53858813d40a054636f6b445a39fa7c52fcd0a8839e1fb6af0
+  data.tar.gz: 0a9f87dd6be3ed968f7a24d0110e0a59d52074d0a582ee8dd69ee430bf126784
 SHA512:
-  metadata.gz: 2611a2f9405fcdb5e41de1f5817b603d3574ccbc5a0607cd45b22ec85f34cf283d3bd8bfdb22786b48e8248b6b941935a126466fb83a5e70c25ce144be41b64b
-  data.tar.gz: 7d398eb0eaa80095458a9eb3811aa906f85d212abb6c784166edceeb3249c91f33d3e011efe55b9f4be3fd6e24aadf0246539f0be5f29dc6e9ca28a297475bd9
+  metadata.gz: 71a238775cdcfee13478fded9dee238e7abc374bd481ff0a8e4995616f329d6490efe939b0fc4bd4d8ae4fb8ab2b8622f44b162aa89c94fb1152570d0f1a8a9b
+  data.tar.gz: ef6f072e79dd25da4149fd47db1abbc33b0c97afd198835c97d36b5f1624e23e2245affef488fc931b323ba3e1a9842a45f3177c4b14abf1740d9121d351da42

data/CHANGELOG.md

@@ -5,7 +5,57 @@ All notable changes to this project are documented here.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [2.0.0] - Unreleased
+## [2.1.0] - 2026-10-19
+
+Behaviour changes to review before upgrading: see [UPGRADING.md](UPGRADING.md).
+
+### Added
+
+- `container_gutter` spacing token (16px) and `$am-container-gutter`: the first
+  and last column of a row carry it as an outer, border-box, inlined padding;
+  nested columns do not repeat it.
+- `<title>` in the layout head, set to the message subject (new
+  `layouts/activemail/_document_head` partial).
+- Quality rules, on by default and disableable: `title`, `anchor_href`,
+  `placeholder` (`BuiltinRules::PLACEHOLDER`), `unsupported_color`,
+  `text_entities`.
+- `Quality::Configuration#allow_declined` and the `allow_declined:` option of
+  `Guard#violations`, `Guard#valid?`, `assert_email_quality` and
+  `be_a_valid_email`.
+- `Quality::Configuration#rule_exemptions` (by preview name or `preview#email`) and
+  the `skip:` option of `Guard#violations`, `Guard#valid?`, `assert_email_quality`
+  and `be_a_valid_email`: exempt a preview from named rules, built-in or custom,
+  without disabling them for every preview.
+- `mso-padding-alt` on the button cell so Outlook keeps the padding.
+- Below the container width, stacked columns take the container gutter on both
+  sides in clients that keep media queries.
+
+### Changed
+
+- A nested `<columns>` ghost cell and `max-width` are computed against the
+  content box of the enclosing columns (their share minus their padding)
+  instead of the container.
+- The MSO ghost cell of a column wraps it in its own `<table><tr>` (the `<th>`
+  used to sit directly in a `<td>`).
+- Conditional comments use `<!--[if mso]>` instead of `<!--[if mso | IE]>`.
+- `<button>` and `<cta>`: the fill and the radius live on the cell only; the
+  `<a>` carries `display:inline-block`, the body font and a `1.25` line height.
+  The dark-mode fill targets the cell.
+- `<center>` renders a `<center align="center" class="float-center">` and no
+  longer rewrites its children.
+- A mailer that declines to send (`NullMail`) is a `declined` violation unless
+  allowed.
+- The generated layouts render the same `_document_head`, `_head` and `_footer`
+  partials as the gem layout.
+- With Premailer the parsed framework CSS is cached per stylesheet fingerprint
+  (a FIFO of 16) instead of being re-parsed for every email.
+
+### Removed
+
+- The `.columns.first.last` SCSS rule: a lone column now takes both container
+  gutters through `.first` and `.last`.
+
+## [2.0.0] - 2026-10-16
 
 Breaking release: see [UPGRADING.md](UPGRADING.md).
 
@@ -191,5 +241,7 @@ toolkit for Rails.
 - Rails `>= 7.1` (tested up to 8.1).
 - Nokogiri `>= 1.16`.
 
+[2.1.0]: https://github.com/AdVitam/activemail/compare/v2.0.0...v2.1.0
+[2.0.0]: https://github.com/AdVitam/activemail/compare/v1.2.3...v2.0.0
 [1.0.1]: https://github.com/AdVitam/activemail/compare/v1.0.0...v1.0.1
 [1.0.0]: https://github.com/AdVitam/activemail/releases/tag/v1.0.0

data/README.md

@@ -35,14 +35,14 @@ renders consistently from Apple Mail to Outlook (Word engine) to Gmail mobile.
 - **Automatic CSS inlining** via a pluggable adapter (premailer by default, roadie
   optional, or your own).
 - **Generators** to install, eject views/styles, and scaffold components.
-- **Opt-in quality layer**: a Guard (size, `role`, `alt`, `lang`), preview
+- **Opt-in quality layer**: a Guard (size, `role`, `alt`, `lang`, `title`, links, placeholders), preview
   renderer, Minitest assertions + RSpec matcher, and a `render_all` rake task.
 
 ## Installation
 
 ```ruby
 # Gemfile
-gem 'activemail', '~> 2.0'
+gem 'activemail', '~> 2.1'
 ```
 
 ```bash
@@ -136,7 +136,9 @@ Override at three levels, cheapest first:
 3. **`bin/rails g activemail:views`** — eject the default layout + partials
    (`app/views/layouts/activemail/*`); a same-named file in your app wins by
    Rails path precedence. Put your logo/header/footer here — those are the app's
-   identity, not the gem's.
+   identity, not the gem's. The `<head>` lives in `_document_head` (metas,
+   `<title>` set to the message subject, Outlook settings, inlined styles) and
+   is shared by the default layout and the generated one.
 
 Dark mode ships on: a `<style>` block keys off `prefers-color-scheme: dark` (Apple
 Mail/iOS) and Outlook's `[data-ogsc]`, with surfaces derived from your tokens.
@@ -147,7 +149,9 @@ Email clients (Gmail mobile, Orange.fr) strip `<style>`, so critical CSS must be
 inlined. When a mailer renders an inky HTML template, ActiveMail transpiles the
 whole body (view + layout) and runs the configured inliner once. Text parts,
 attachments and non-ActiveMail emails are never touched; your `<style>`
-enhancement block (media queries, dark mode) is preserved.
+enhancement block (media queries, dark mode) is preserved. With Premailer the
+parsed framework CSS is cached per stylesheet, so it is parsed once, not once per
+email.
 
 The layout embeds the compiled stylesheets with `activemail_inline_styles`
 (Sprockets or Propshaft); pass your own on top of the framework's:
@@ -182,11 +186,11 @@ Fluid-hybrid wrapper, capped at `container_width`, wrapped in an MSO ghost table
 ```
 
 ```html
-<!--[if mso | IE]><table role="presentation" align="center" width="600">...<![endif]-->
+<!--[if mso]><table role="presentation" align="center" width="600">...<![endif]-->
 <table class="container" align="center" style="width:100%;max-width:600px;margin:0 auto;">
   <tbody><tr><td>...</td></tr></tbody>
 </table>
-<!--[if mso | IE]></td></tr></table><![endif]-->
+<!--[if mso]></td></tr></table><![endif]-->
 ```
 
 ### `<row>` / `<columns>`
@@ -201,16 +205,24 @@ media-query enhancement.
 ```
 
 Column widths are computed as `container_width × large / column_count`, capped
-at `container_width`, **with no gutter model**: two `large="6"` columns sit
-edge-to-edge (300px + 300px in a 600px container). Add padding inside your
-columns for gutters, and keep the `large` sizes of a row summing to at most
-`column_count`, otherwise the ghost cells will wrap in Outlook.
+at `container_width`. A nested `<columns>` is sized against its enclosing column
+(a `large="6"` inside a `large="6"` is 150px in a 600px container). Keep the
+`large` sizes of a row summing to at most `column_count`, otherwise the ghost
+cells will wrap in Outlook.
+
+Gutters are border-box padding inlined on the columns: `gutter` (8px) on each
+side between two columns, and `container_gutter` (16px) on the outer edge of the
+first and last column, so content never touches the screen edge. A nested row
+adds no outer gutter. Both are spacing tokens
+(`config.tokens.spacing :container_gutter, '0px'` restores edge-to-edge columns)
+and SCSS variables (`$am-gutter`, `$am-container-gutter`).
 
 ### `<button>`
 
 Bulletproof button styled inline from the tokens (`Tokens#button_style`): the
-padding lives on the `<a>` so the whole control is clickable, and a variant
-border sits on the cell only. `class="secondary"` selects the secondary variant;
+padding lives on the `<a>` so the whole control is clickable (mirrored on the
+cell with `mso-padding-alt` for Outlook), the fill and radius sit on the cell
+only, and a variant border sits on the cell as well. `class="secondary"` selects the secondary variant;
 `expand` makes it full width; without `href` the label renders as a `<span>`.
 
 ```html
@@ -220,8 +232,8 @@ border sits on the cell only. `class="secondary"` selects the secondary variant;
 ```html
 <table class="secondary button"><tbody><tr><td>
   <table><tbody><tr>
-    <td style="background:#264653;border-radius:4px;">
-      <a href="#" style="display:inline-block;text-decoration:none;padding:12px 24px;background:#264653;color:#ffffff;font-weight:bold;border-radius:4px;">Go</a>
+    <td style="background:#264653;border-radius:4px;mso-padding-alt:12px 24px;">
+      <a href="#" style="display:inline-block;text-decoration:none;padding:12px 24px;font-family:Arial, sans-serif;line-height:1.25;color:#ffffff;font-weight:bold;">Go</a>
     </td>
   </tr></tbody></table>
 </td></tr></tbody></table>
@@ -258,7 +270,7 @@ border sits on the cell only. `class="secondary"` selects the secondary variant;
 
 - `<wrapper class="header">` → `<table class="header wrapper" align="center" style="width:100%;">` with a `.wrapper-inner` cell.
 - `<h-line>` → a full-width single-cell table drawn as a 1px rule in the `border` color.
-- `<center>` adds `align="center"` and `.float-center` to its element children (and `.float-center` to nested menu items).
+- `<center>` renders a `<center align="center" class="float-center">` around its content and leaves the content untouched.
 
 ### `<raw>`
 
@@ -367,8 +379,18 @@ expect(rendered_html).to be_a_valid_email
 
 The Guard checks byte size (Gmail clips ~102 KB), parse errors,
 `role="presentation"` on every table, `alt` on every image, `lang` on full
-documents, a single `<html>`/`<body>`, missing translations, and — given a
-message — a plain text part. Built-in rules can be disabled and your own added:
+documents, a single `<html>`/`<body>`, missing translations, a non-blank
+`<title>`, an `href` on every link, unresolved `{{placeholders}}`, CSS colors
+clients ignore (`rgb(… %)`, `hsl()`, `color-mix()`, `var()`), and — given a
+message — a plain text part free of HTML entities. A mailer that declines to
+send (`NullMail`) is a violation unless it is listed in `allow_declined`
+(`assert_email_quality(mail, allow_declined: true)` or
+`be_a_valid_email(allow_declined: true)` for one call). Built-in rules can be
+disabled and your own added; a single email can also be exempt from a rule
+(`assert_email_quality(html, skip: %i[img_alt])`, `be_a_valid_email(skip: …)`, or
+`rule_exemptions` below) while every other rule still applies to it. A name the
+guard does not know raises an `ArgumentError` before any preview renders; a
+disabled rule is a known name.
 
 ```ruby
 signature = ActiveMail::Quality::Rule.html(:single_signature) do |doc, _html|
@@ -377,6 +399,11 @@ end
 
 ActiveMail::Quality.configure do |c|
   c.required_previews = %w[welcome_mailer#welcome]
+  c.allow_declined = %w[reminder_mailer#maybe_skipped] # previews allowed to return a NullMail
+  c.rule_exemptions = {                      # a preview name covers all its emails
+    'legacy_mailer' => %i[img_alt],
+    'welcome_mailer#welcome' => %i[single_signature]
+  }
   c.guard = ActiveMail::Quality::Guard.new(max_bytes: 90_000, disable: %i[img_alt], rules: [signature])
   c.locales = %i[fr en]                      # or ->(preview) { [...] }; each preview gets params[:locale]
   c.formats = %i[html text]

data/UPGRADING.md

@@ -1,3 +1,76 @@
+# Upgrading to ActiveMail 2.1
+
+## Gemfile
+
+```ruby
+gem 'activemail', '~> 2.1'
+```
+
+## Outer gutter
+
+Rows now keep content off the screen edge: the first and last column of a row
+get a 16px (`container_gutter`) border-box padding on their outer side, inlined
+like every other framework rule. Columns still sum to `container_width`; the
+text area is 16px narrower on each side.
+
+- To keep edge-to-edge columns: `config.tokens.spacing :container_gutter, '0px'`
+  (or `$am-container-gutter: 0`).
+- Content you padded by hand to avoid the edge now has the padding twice:
+  remove it.
+- A nested row does not repeat the outer gutter. The `.columns.first.last` SCSS
+  rule is gone; ejected `_grid.scss` copies (`activemail:styles`) must be
+  re-ejected.
+
+## Outlook markup
+
+- Conditional comments are `<!--[if mso]>` (`mso` alone targets Outlook
+  for Windows). Tests matching `[if mso | IE]` must change.
+- Each column ghost cell wraps its column in a `<table><tr>`. A nested column
+  is sized against the content box of its enclosing column: `large="6"` in a
+  lone `large="6"` is 134px (300px minus two 16px gutters, halved), not 300px.
+
+## Buttons
+
+- The fill and the radius are on the cell, not on the `<a>`. The `<a>` carries
+  `display:inline-block`, `font-family` (the `body` font token) and
+  `line-height:1.25`; the cell gets `mso-padding-alt`.
+- A dark-mode override of the button fill must target `table td`, not `a`.
+
+## Center
+
+`<center>` no longer adds `align="center"` and `.float-center` to its children
+(nor to nested menu items): it renders one `<center align="center">` and leaves
+its content as written. Put `class="float-center"` or `align="center"` on the
+children that need it.
+
+## Layouts
+
+The `<head>` of the default layout moved to `layouts/activemail/_document_head`,
+with `<title><%= message.subject %></title>`. The generated layouts
+(`activemail:install`, `--haml`, `--slim`) render that partial and the `_head`
+and `_footer` partials: regenerate yours or add the `<title>`. The partial reads
+`message`, so it only renders inside a mailer view.
+
+## Quality
+
+New built-in rules flag emails that passed before: `title`, `anchor_href`,
+`placeholder`, `unsupported_color`, `text_entities`. Disable any with
+`Guard.new(disable: [...])`.
+
+A `NullMail` (a mailer that returned without sending) is now a `declined`
+violation, in `Guard`, `render_all`, `assert_email_quality`,
+`assert_quality_for_all_previews` and `be_a_valid_email`. List the previews that
+decline on purpose:
+
+```ruby
+ActiveMail::Quality.configure { |c| c.allow_declined = %w[reminder_mailer#maybe_skipped] }
+```
+
+or pass `allow_declined: true` to `Guard#violations`, `Guard#valid?`,
+`assert_email_quality` and `be_a_valid_email`.
+
+---
+
 # Upgrading to ActiveMail 2.0
 
 ## Gemfile

data/app/assets/stylesheets/activemail/_dark.scss

@@ -32,25 +32,30 @@
     color: $am-dark-link !important;
   }
 
+  // The fill lives on the cell alone: a filled link would square off its rounded corners.
   .button table td,
+  .cta table td {
+    background: $am-button-primary-bg !important;
+  }
+
   .button a,
   .button span,
-  .cta table td,
   .cta a,
   .cta span {
-    background: $am-button-primary-bg !important;
     color: $am-button-primary-color !important;
   }
 
   // Restore the secondary fill AND text — the primary rule above would be unreadable
   // on a light secondary fill.
   .button.secondary table td,
+  .cta.secondary table td {
+    background: $am-button-secondary-bg !important;
+  }
+
   .button.secondary a,
   .button.secondary span,
-  .cta.secondary table td,
   .cta.secondary a,
   .cta.secondary span {
-    background: $am-button-secondary-bg !important;
     color: $am-button-secondary-color !important;
   }
 
@@ -104,22 +109,26 @@
   }
 
   [data-ogsc] .button table td,
+  [data-ogsc] .cta table td {
+    background: $am-button-primary-bg !important;
+  }
+
   [data-ogsc] .button a,
   [data-ogsc] .button span,
-  [data-ogsc] .cta table td,
   [data-ogsc] .cta a,
   [data-ogsc] .cta span {
-    background: $am-button-primary-bg !important;
     color: $am-button-primary-color !important;
   }
 
   [data-ogsc] .button.secondary table td,
+  [data-ogsc] .cta.secondary table td {
+    background: $am-button-secondary-bg !important;
+  }
+
   [data-ogsc] .button.secondary a,
   [data-ogsc] .button.secondary span,
-  [data-ogsc] .cta.secondary table td,
   [data-ogsc] .cta.secondary a,
   [data-ogsc] .cta.secondary span {
-    background: $am-button-secondary-bg !important;
     color: $am-button-secondary-color !important;
   }
 

data/app/assets/stylesheets/activemail/_grid.scss

@@ -1,7 +1,6 @@
 @use "settings" as *;
 
-// Gutters are unconditional padding (inlined by the CSS inliner): the gem emits
-// none, and they must not depend on media queries (stripped by Gmail mobile).
+// Gutters are plain padding, inlined: Gmail mobile strips media queries.
 
 .container {
   width: 100%;
@@ -17,11 +16,8 @@
   width: 100%;
 }
 
-// Gutters: half on each side, outer edges collapsed via first/last so content
-// stays flush with the container.
-// box-sizing keeps the gutter inside the inline max-width — without it a 300px
-// 2-col cell + 8px padding becomes 316px and the row overflows ~616px, wrapping
-// in clients that honor inline padding.
+// border-box keeps each gutter inside the inline max-width, else the row overflows and wraps;
+// the container takes no padding for the same reason.
 .columns {
   box-sizing: border-box;
   padding-left: $am-gutter;
@@ -29,23 +25,51 @@
 }
 
 .columns.first {
-  padding-left: 0;
+  padding-left: $am-container-gutter;
 }
 
 .columns.last {
-  padding-right: 0;
+  padding-right: $am-container-gutter;
 }
 
-// A single full-width column carries no side gutter.
-.columns.first.last {
+// A nested row already sits inside its parent column's padding.
+.columns .columns.first {
   padding-left: 0;
+}
+
+.columns .columns.last {
   padding-right: 0;
 }
 
-// Collapse removes gutters on demand (e.g. edge-to-edge images). Columns are not
-// direct children of .row — the real markup nests them as <th class="columns">
-// under tbody > tr — so this must be a descendant selector, not a child one.
+// Descendant selector: columns render as <th> under tbody > tr, not as children of .row.
 .row.collapse .columns {
   padding-left: 0;
   padding-right: 0;
 }
+
+// Below the container width every full row stacks, so each top-level column edge is an outer one.
+// Nested columns may still sit side by side and keep the regular gutters. Gmail strips this query.
+@media only screen and (max-width: $am-breakpoint - 1px) {
+  .columns {
+    padding-left: $am-container-gutter !important;
+    padding-right: $am-container-gutter !important;
+  }
+
+  .columns .columns {
+    padding-left: $am-gutter !important;
+    padding-right: $am-gutter !important;
+  }
+
+  .columns .columns.first {
+    padding-left: 0 !important;
+  }
+
+  .columns .columns.last {
+    padding-right: 0 !important;
+  }
+
+  .row.collapse .columns {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
+}

data/app/assets/stylesheets/activemail/_settings.scss

@@ -34,6 +34,7 @@ $am-box-radius: $am-radius-box !default;
 // aligned with the transpiled markup (ghost tables, column max-width).
 $am-container-width: $am-grid-container-width !default;
 $am-gutter: $am-spacing-sm !default;
+$am-container-gutter: $am-spacing-container-gutter !default;
 $am-breakpoint: $am-container-width !default;
 
 // Dark mode

data/app/views/layouts/activemail/_document_head.html.erb

@@ -0,0 +1,18 @@
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="x-apple-disable-message-reformatting">
+  <meta name="color-scheme" content="light dark">
+  <meta name="supported-color-schemes" content="light dark">
+  <title><%= message.subject %></title>
+  <!--[if mso]>
+  <noscript>
+    <xml>
+      <o:OfficeDocumentSettings>
+        <o:PixelsPerInch>96</o:PixelsPerInch>
+      </o:OfficeDocumentSettings>
+    </xml>
+  </noscript>
+  <![endif]-->
+  <%= activemail_inline_styles %>
+</head>

data/app/views/layouts/activemail/mailer.html.inky-erb

@@ -1,22 +1,6 @@
 <!DOCTYPE html>
 <html lang="<%= I18n.locale %>" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="x-apple-disable-message-reformatting">
-    <meta name="color-scheme" content="light dark">
-    <meta name="supported-color-schemes" content="light dark">
-    <!--[if mso]>
-    <noscript>
-      <xml>
-        <o:OfficeDocumentSettings>
-          <o:PixelsPerInch>96</o:PixelsPerInch>
-        </o:OfficeDocumentSettings>
-      </xml>
-    </noscript>
-    <![endif]-->
-    <%= activemail_inline_styles %>
-  </head>
+  <%= render "layouts/activemail/document_head" %>
 
   <body style="margin:0;padding:0;word-spacing:normal;">
     <div role="article" aria-roledescription="email" lang="<%= I18n.locale %>" style="width:100%;">

data/lib/activemail/components/button_renderer.rb

@@ -14,6 +14,8 @@ module ActiveMail
       abstract!
 
       CONTROL_PADDING = 'padding:12px 24px;'
+      MSO_CELL_PADDING = 'mso-padding-alt:12px 24px;'
+      LINE_HEIGHT = '1.25'
 
       sig { abstract.returns(String) }
       def root_class; end
@@ -38,7 +40,8 @@ module ActiveMail
         LINK_ATTRIBUTES
       end
 
-      # Padding on the control makes the whole button a clickable target.
+      # Padding on the control makes the whole button a clickable target; Outlook Word
+      # ignores it there, so the cell repeats it as `mso-padding-alt`.
       sig { params(node: Nokogiri::XML::Node, inner: String, style: ActiveMail::Tokens::ButtonStyle, expand: T::Boolean).returns(String) }
       def control(node, inner, style, expand)
         css = control_style(style, expand)
@@ -48,17 +51,18 @@ module ActiveMail
         anchor(node, inner, before: extra, after: style_attribute(node, css))
       end
 
-      # The outline lives on the cell only: repeating it on the control would double the line.
+      # Fill, corners and outline live on the cell only: repeating them on the control would double them.
       sig { params(style: ActiveMail::Tokens::ButtonStyle, expand: T::Boolean).returns(String) }
       def cell_style(style, expand)
         border = style.border ? "border:1px solid #{style.border};" : ''
-        "background:#{style.background};border-radius:#{style.radius};#{border}#{'text-align:center;' if expand}"
+        "background:#{style.background};border-radius:#{style.radius};#{border}#{MSO_CELL_PADDING}#{'text-align:center;' if expand}"
       end
 
       sig { params(style: ActiveMail::Tokens::ButtonStyle, expand: T::Boolean).returns(String) }
       def control_style(style, expand)
         "display:#{expand ? 'block' : 'inline-block'};text-decoration:none;#{CONTROL_PADDING}" \
-          "background:#{style.background};color:#{style.color};font-weight:bold;border-radius:#{style.radius};"
+          "font-family:#{escape_attr(core.config.tokens.font!(:body))};line-height:#{LINE_HEIGHT};" \
+          "color:#{style.color};font-weight:bold;"
       end
     end
   end

data/lib/activemail/components/center.rb

@@ -10,12 +10,14 @@ module ActiveMail
 
       sig { override.params(node: Nokogiri::XML::Node, inner: String).returns(String) }
       def transform(node, inner)
-        node.elements.each do |child|
-          child['align'] = 'center'
-          child['class'] = combine_classes(child, 'float-center')
-        end
-        node.css('.menu-item').each { |item| item['class'] = combine_classes(item, 'float-center') }
-        %(<center#{root_attributes(node, classes: nil)}>#{inner}</center>)
+        %(<center#{root_attributes(node, classes: 'float-center')} align="center">#{inner}</center>)
+      end
+
+      private
+
+      sig { override.returns(T::Array[String]) }
+      def consumed_attributes
+        ['align']
       end
     end
   end

data/lib/activemail/components/columns.rb

@@ -11,12 +11,12 @@ module ActiveMail
       sig { override.params(node: Nokogiri::XML::Node, inner: String).returns(String) }
       def transform(node, inner)
         small, large = column_sizes(node)
-        width_px = ghost_width(large)
+        width_px = ghost_width(node, large)
 
         [
-          %(<!--[if mso | IE]><td width="#{width_px}" valign="top"><![endif]-->),
+          %(<!--[if mso]><td width="#{width_px}" valign="top"><table #{TABLE_RESET} width="#{width_px}"><tr><![endif]-->),
           column_markup(node, inner, column_classes(node, small, large), width_px, expander(node, large)),
-          '<!--[if mso | IE]></td><![endif]-->'
+          '<!--[if mso]></tr></table></td><![endif]-->'
         ].join
       end
 
@@ -65,11 +65,35 @@ module ActiveMail
         %(<th class="expander"></th>)
       end
 
-      # Clamp: an oversized `large` would push the MSO ghost cell past the
-      # container and force a wrap in Outlook Word.
-      sig { params(large: Integer).returns(Integer) }
-      def ghost_width(large)
-        [((large.to_f / column_count) * container_width).round, container_width].min
+      # Columns are transformed leaves first, so the enclosing <columns> are still raw nodes whose
+      # sizes and positions are readable. A nested row shares the content box of its parent column.
+      sig { params(node: Nokogiri::XML::Node, large: Integer).returns(Integer) }
+      def ghost_width(node, large)
+        available = node.ancestors('columns').reverse.reduce(Rational(container_width)) do |width, ancestor|
+          share_of(width, column_sizes(ancestor).last) - horizontal_padding(ancestor)
+        end
+        share_of(available, large).round
+      end
+
+      # Clamped: an oversized `large` would push the MSO ghost cell past its parent and force a wrap in Outlook Word.
+      sig { params(width: Rational, share: Integer).returns(Rational) }
+      def share_of(width, share)
+        width * Rational([share, column_count].min, column_count)
+      end
+
+      # Mirrors _grid.scss, whose padding is inlined on each column.
+      sig { params(node: Nokogiri::XML::Node).returns(Rational) }
+      def horizontal_padding(node)
+        return Rational(0) if node.ancestors('row').any? { |row| class?(row, 'collapse') }
+
+        siblings = column_siblings(node)
+        outer_side = node.ancestors('columns').empty? ? spacing(:container_gutter) : Rational(0)
+        [siblings.first, siblings.last].sum(Rational(0)) { |edge| edge == node ? outer_side : spacing(:sm) }
+      end
+
+      sig { params(name: Symbol).returns(Rational) }
+      def spacing(name)
+        Rational(core.config.tokens.spacing!(name).delete_suffix('px'))
       end
 
       sig { params(node: Nokogiri::XML::Node, inner: String, classes: String, width_px: Integer, expander: String).returns(String) }

data/lib/activemail/components/container.rb

@@ -14,10 +14,10 @@ module ActiveMail
         attributes = root_attributes(node, classes: 'container', layout_style: "width:100%;max-width:#{width}px;margin:0 auto;")
         # Outlook Word ignores max-width; the MSO ghost table pins the width.
         [
-          %(<!--[if mso | IE]><table #{TABLE_RESET} align="center" width="#{width}"><tr><td><![endif]-->),
+          %(<!--[if mso]><table #{TABLE_RESET} align="center" width="#{width}"><tr><td><![endif]-->),
           %(<table#{attributes} #{TABLE_RESET} align="center">),
           %(<tbody><tr><td>#{inner}</td></tr></tbody></table>),
-          '<!--[if mso | IE]></td></tr></table><![endif]-->'
+          '<!--[if mso]></td></tr></table><![endif]-->'
         ].join
       end