Foundation-emails: Inliners overriding styles

[lspoor]

How can we reproduce this bug?
Create any email and use npm run build to inline it
Write out the HTML (or Inky code) that causes the issue.
Happens to all elements

What did you expect to happen?
When inlining, all styles to be carried over but they get overridden. For example..

using hide-for-large (show for small) on elements doesn't work as it gets 'display:none !important; inlined to it thus overriding the display:table; on the breakpoint

What happened instead?
using hide-for-large (show for small) on elements doesn't work as it gets 'display:none !important; inlined to it thus overriding the display:table; on the breakpoint

What email clients does this happen in?
Any client/browser

[stevesmename]

For me, this is specifically happening for .hide-for-large; foundation watch is not equivalent to foundation build. I'm noticing with the build process that 'display:none !important' is inlined.

[stevesmename]

This looks addressed by this commit. I tested with a div wrapper and had success in litmus. I just don't personally favor mixing a div around inky syntax. Inky should instead place div wrapper if class exists on element.

[stevesmename]

For now I am using a custom .hide-for-large-custom class instead. At some point this code snippet will be potentially useless and .hide-for-large will be working. Credit goes to @sergeylukin for most of the code seen.

div.hide-for-large-custom {
  display: none;
  mso-hide: all; // hide selected elements in Outlook 2007-2013
  overflow: hidden;
  max-height: 0;
  font-size: 0;
  width: 0;
  line-height: 0;

  @media only screen and (max-width: #{$global-breakpoint}) {
    display: block !important;
    width: auto !important;
    overflow: visible !important;
    max-height: none !important;
    font-size: inherit !important;
    line-height: inherit !important;
  }
}

table.body table.container div.hide-for-large-custom * {
  mso-hide: all; // hide selected elements in Outlook 2007-2013
}

table.body table.container div.hide-for-large-custom {
  @media only screen and (max-width: #{$global-breakpoint}) {
    display: table !important;
    width: 100% !important;
  }
}

[mathis89]

@stevesmename thanks for the fix! works like a charm :)

[DanielRuf]

So it seems this was already fixed in the latest release? Closing for now as this may be the case.

If not please let us know.