# Resolve final styles in email notifications

**URL:** https://meta.discourse.org/t/resolve-final-styles-in-email-notifications/310219
**Category:** Feature
**Tags:** email, pr-welcome, css
**Created:** [June 1, 2024, 11:09pm UTC](https://meta.discourse.org/t/resolve-final-styles-in-email-notifications/310219 "2024-06-01T23:09:19Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![thoka](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/thoka/32/115652_2.png) [@thoka](https://meta.discourse.org/u/thoka)
#### Post date: [June 1, 2024, 11:09pm UTC](https://meta.discourse.org/t/resolve-final-styles-in-email-notifications/310219/1 "2024-06-01T23:09:19Z")

</div>

At least [posteo.de](http://posteo.de) web email client renders colors with the first value given in a CSS style definition, which yields unreadable buttons in notifications:

![image](https://global.discourse-cdn.com/meta/original/4X/a/3/1/a3113ffcb27e16be22f88ee25aee33ec1b9dd5e4.png)

instead of

![This image shows a rectangular blue bar with white text that appears to be instructions in German for how to reply to an email, with the German words "Rufe das Thema auf oder antworte auf diese E-Mail, um zu antworten." (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/d/f/0/df096fd41cdc30fcbbc9a3526d022482d7265d05.png)

Currently, the according style is

 

```css
font-weight: normal;; text-decoration: none; font-weight: bold; color: #006699;; background-color: #2F70AC; color: #FFFFFF; border-top: 4px solid #2F70AC; border-right: 6px solid #2F70AC; border-bottom: 4px solid #2F70AC; border-left: 6px solid #2F70AC; display: inline-block; font-weight: bold;

```

 

If changed to include only the latest definitions

 

```css
font-weight: normal; text-decoration: none; font-weight: bold; background-color: #2F70AC; color: #FFFFFF; border-top: 4px solid #2F70AC; border-right: 6px solid #2F70AC; border-bottom: 4px solid #2F70AC; border-left: 6px solid #2F70AC; display: inline-block; font-weight: bold;

```

 

one gets the desired behavior.

Since there is no benefit by sending later overwritten styles, rendering problems with buggy email viewers could be resolved by sending only the final CSS definitions.

---

<div class="post-metadata">

### Author: ![thoka](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/thoka/32/115652_2.png) [@thoka](https://meta.discourse.org/u/thoka)
#### Post date: [June 1, 2024, 11:59pm UTC](https://meta.discourse.org/t/resolve-final-styles-in-email-notifications/310219/2 "2024-06-01T23:59:03Z")

</div>

There is an implementation in

[https://github.com/thoka/discourse/commit/1b376184a6477c21b41e7acd6121c5775705ddde](https://github.com/thoka/discourse/commit/1b376184a6477c21b41e7acd6121c5775705ddde)

---

<div class="post-metadata">

### Author: ![zogstrip](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/zogstrip/32/512781_2.png) [@zogstrip](https://meta.discourse.org/u/zogstrip)
#### Post date: [November 28, 2024, 10:43pm UTC](https://meta.discourse.org/t/resolve-final-styles-in-email-notifications/310219/3 "2024-11-28T22:43:04Z")

</div>

If you feel like making a pull request, I’d happily merge it 👍

It doesn’t solve [this issue](https://meta.discourse.org/t/replying-in-iphone-mail-in-dark-mode-input-is-white-characters-on-white-background/281380) but having duplicate styling is wasteful and bug-prone anyways.

I would make some slight tweaks to the `deduplicate_style` function, mostly to make sure both the `key` and the `values` are present.

```ruby
def deduplicate_style(style)
  styles = {}

  style
    .split(";")
    .select(&:present?)
    .map { _1.split(":", 2).map(&:strip) }
    .each { |k, v| styles[k] = v if k.present? && v.present? }

  styles.map { |k, v| "#{k}:#{v}" }.join(";")
end

```

---

<div class="post-metadata">

### Author: ![thoka](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/thoka/32/115652_2.png) [@thoka](https://meta.discourse.org/u/thoka)
#### Post date: [November 29, 2024, 9:23pm UTC](https://meta.discourse.org/t/resolve-final-styles-in-email-notifications/310219/4 "2024-11-29T21:23:15Z")

</div>

[https://github.com/discourse/discourse/pull/30003](https://github.com/discourse/discourse/pull/30003)

---

<div class="post-metadata">

### Author: ![zogstrip](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/zogstrip/32/512781_2.png) [@zogstrip](https://meta.discourse.org/u/zogstrip)
#### Post date: [November 30, 2024, 1:51pm UTC](https://meta.discourse.org/t/resolve-final-styles-in-email-notifications/310219/5 "2024-11-30T13:51:28Z")

</div>

Thanks, just merged it :git_merged:

---

<div class="post-metadata">

### Author: ![zogstrip](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/zogstrip/32/512781_2.png) [@zogstrip](https://meta.discourse.org/u/zogstrip)
#### Post date: [December 3, 2024, 11:00am UTC](https://meta.discourse.org/t/resolve-final-styles-in-email-notifications/310219/6 "2024-12-03T11:00:35Z")

</div>

This topic was automatically closed after 2 days. New replies are no longer allowed.