prevent inlineCSS from removing gmail iOS font inversion hack

[moiseev-loona]

What am I trying to achieve: preserve gmail hack in the upper most style block which I locate in the style block of the layout or inside custom css

/*! purgecss start ignore */
u + .body .gmail-blend-screen {
background: #000;
mix-blend-mode: screen;
}
u + .body .gmail-blend-difference {
background: #000;
mix-blend-mode: difference;
}
/*! purgecss end ignore */

The problem: inlineCSS is stripping that style no matter what I do. even with mix-blend-mode excluded in config.production

 inlineCSS: {
    excludedProperties: ['mix-blend-mode'],
  },

Current workaround: adding the styling inside template, and then after build manually moving it from second style block to the first uppermost style block. Then problem here that manual tweaking is required after template has been built

	<style data-embed postcss>
			/*! purgecss start ignore */
u + .body .gmail-blend-screen {
background: #000;
mix-blend-mode: screen;
}
u + .body .gmail-blend-difference {
background: #000;
mix-blend-mode: difference;
}
/*! purgecss end ignore */
		   </style>

Would really appreciate any ideas on how to address that issue properly.

[cossssmin]

data-embed on the <style> tag is the right approach, at least for now (we also recommend it in the docs).

In order to remove redundant CSS we need to remove the <style> tag contents after inlining them, which basically removes everything except stuff in things like @media queries. Since the Juice CSS inliner doesn't have any selector 'safelist' or 'blocklist', using data-embed is the only way to do it cleanly.

Another approach would be to set removeStyleTags to false in the config, i.e.:

inlineCSS: {
	removeStyleTags: false,
},

... but then you'd also need to configure removeUnusedCSS to whitelist CSS selectors for stuff that doesn't actually exist in your HTML.

Note that you don't need postcss on the tag (since you're not using PostCSS or Tailwind @apply stuff there) or the purgecss comments, this should work just fine:

<style data-embed>
u + .body .gmail-blend-screen {
  background: #000;
  mix-blend-mode: screen;
}

u + .body .gmail-blend-difference {
  background: #000;
  mix-blend-mode: difference;
}
</style>

[moiseev-loona]

thanks a lot @cossssmin -really appreciate your looking into it.

I guess for now i'l just add an extra layer of transformation merging multiple style blocks together after all the processing done.

Great point about unnecessary use of postcss on the style tag above. thanks!