CSS boilerplate #465

daniel-thisnow · 2021-05-10T20:20:21Z

daniel-thisnow
May 10, 2021

I'm having trouble adding to the white list for purgeCss and removeUnusedCss to add something like this

a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}

To try to stop blue links.

Some of the boilerplate is compiling, but not all.

Answered by cossssmin

May 11, 2021

This is actually caused by the Juice inliner, not purgeCSS or removeUnusedCSS.

Juice already has a way of preventing inlining (2), but maybe it could benefit from an option that prevents inlining matched CSS selectors. Kind of like how safelist works in PurgeCSS.

For now there are a few ways around it. In no particular order:

1. Disable `removeStyleTags`

removeStyleTags is turned on by default in the CSS inliner - this option removes the original <style></style> tags contents after (possibly) inlining the CSS in them. You can disable it like this:

// config.production.js

module.exports = {
  inlineCSS: {
    removeStyleTags: false
  },
}

Note that this will result in other CSS resets like …

View full answer

cossssmin · 2021-05-11T12:07:19Z

cossssmin
May 11, 2021
Maintainer

This is actually caused by the Juice inliner, not purgeCSS or removeUnusedCSS.

Juice already has a way of preventing inlining (2), but maybe it could benefit from an option that prevents inlining matched CSS selectors. Kind of like how safelist works in PurgeCSS.

For now there are a few ways around it. In no particular order:

1. Disable `removeStyleTags`

removeStyleTags is turned on by default in the CSS inliner - this option removes the original <style></style> tags contents after (possibly) inlining the CSS in them. You can disable it like this:

// config.production.js

module.exports = {
  inlineCSS: {
    removeStyleTags: false
  },
}

Note that this will result in other CSS resets like the ones for <body> and <img> to be preserved in the compiled HTML. Not a big issue, but can add some KB to your code if you have lots of resets.

2. Use `<style data-embed>`

Juice will not inline CSS from a <style> tag that has the data-embed attribute (see docs).

So you can add that CSS right in your Layout file, for example before where the compiled Tailwind CSS will be output:

<style data-embed>
  a[x-apple-data-detectors] {
    color: inherit !important;
    text-decoration: none !important;
    font-size: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
  }
</style>
<if condition="page.css">
  <style>{{{ page.css }}}</style>
</if>

You could even extract this to a Component like in src/components/resets.html and include it:

<component src="src/components/resets.html"></component>
<if condition="page.css">
  <style>{{{ page.css }}}</style>
</if>

3. Use `@media` queries

This can only work for some cases, specifically where @media queries are supported. It's probably a bad idea if you need to consider clients that don't support them. Just wrap the CSS in a CSS media query like this:

@media screen {
  a[x-apple-data-detectors] {
    color: inherit !important;
    text-decoration: none !important;
    font-size: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
  }
}

Out of these, 1) and 2) will work best. Which one to use is mostly preference since both have the downside of adding to your code, but can actually end up weighing the same: 1) might preserve already-inlined selectors like body or img, but the extra style tag in 2) and the code indendation inside it will most likely result in similar code weights (if that is a concern in your case).

I wouldn't really use 3) in a production email (with some targeting hacks, it won't even work) - I just added it here to show that it's possible.

2 replies

cossssmin May 11, 2021
Maintainer

I should probably add this to the docs... 🙂

daniel-thisnow May 12, 2021
Author

I almost tried data-embed - feel a bit of a fool - I am still getting clear on what postCss is even though it's great.

Seems like a perfect solution. Thanks very much 👏👌😁

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Maizzle

CSS boilerplate #465

{{title}}

Replies: 1 comment 2 replies

{{title}}

{{title}}

{{title}}

Select a reply

Maizzle

CSS boilerplate #465

daniel-thisnow May 10, 2021

1. Disable removeStyleTags

Replies: 1 comment · 2 replies

cossssmin May 11, 2021 Maintainer

1. Disable removeStyleTags

2. Use <style data-embed>

3. Use @media queries

cossssmin May 11, 2021 Maintainer

daniel-thisnow May 12, 2021 Author

daniel-thisnow
May 10, 2021

1. Disable `removeStyleTags`

Replies: 1 comment 2 replies

cossssmin
May 11, 2021
Maintainer

1. Disable `removeStyleTags`

2. Use `<style data-embed>`

3. Use `@media` queries

cossssmin May 11, 2021
Maintainer

daniel-thisnow May 12, 2021
Author