foundation-emails: uncss breaks iOS "unlink" date/phone color fix

On iOS, Mail inserts an <a> element inside of detected dates, times, and phone numbers, and they become blue.

To combat this, you must wrap phone numbers and dates in something like a <span> with a class, and set a style for <a> elements that are children of that class.

However, because these <a> elements don’t appear in our written markup, uncss believes any CSS that would apply to them to be extraneous, and removes it.

The result is that this iOS “hack” doesn’t work anymore.

https://litmus.com/help/email-clients/ios-blue-links/

How can we reproduce this bug?

Input HTML:

<span class="unlink">Wednesday, January 18,&nbsp;2017</span>

Input SCSS:

.unlink {
  &, a {
    color: $black !important;
  }
}

Output CSS:

.unlink{text-decoration:none!important;color:#191d1f!important}

Desired Output CSS:

.unlink,.unlink a{text-decoration:none!important;color:#191d1f!important}

What did you expect to happen?

The .unlink a declaration shouldn’t be stripped from the output.

What happened instead?

The .unlink a declaration is stripped from the output.

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 2
Comments: 16 (8 by maintainers)

Most upvoted comments

In the meantime, a quick fix is to disable the removeStyleTags option in gulpfile.babel.js

// Inlines CSS into HTML, adds media query CSS into the <style> tag of the email, and compresses the HTML
function inliner(css) {
  var css = fs.readFileSync(css).toString();
  var mqCss = siphon(css);

  var pipe = lazypipe()
    .pipe($.inlineCss, {
      applyStyleTags: false,
      removeStyleTags: false,// <-- change this to "false"
      preserveMediaQueries: true,
      removeLinkTags: false
    })
    .pipe($.replace, '<!-- <style> -->', `<style>${mqCss}</style>`)
    .pipe($.replace, '<link rel="stylesheet" type="text/css" href="css/app.css">', '')
    .pipe($.htmlmin, {
      collapseWhitespace: false,
      minifyCSS: true
    });

  return pipe();
}

tedw on Dec 5, 2016