Adding Critters to project removes media queries from external stylesheet

Question

Adding Critters to project removes media queries from external stylesheet

richiksc opened this issue 5 years ago · comments

I'm using Critters in my webpack project with the following configuration:

new Critters({
  mergeStylesheets: true,
  inlineFonts: true,
})

I'm using this in combination with MiniCssExtractPlugin. When I add Critters to the plugin list (after MiniCssExtractPlugin and HtmlWebpackPlugin), critters seems to remove the content of media queries - the output still has the media queries but nothing is in them, which looks like this:

@media (max-width: 480px) {}

This breaks the styling and layout of my site.

Fotis Papadogeorgopoulos · Answer 1 · Wed Apr 10 2019 02:03:42 GMT+0800 (China Standard Time)

Hi @richiksc, I think this is because the pruneSource is true by default. I had the same issue, and turning it to false fixed it.

(The option is documented here: https://github.com/GoogleChromeLabs/critters/blob/master/README.md#critters-2)

Removing the inlined CSS from the source doesn't make a large difference in my experience, so I don't think you'd lose much without it.

Posting this in case it gets you unblocked :) I'm not one of the maintainers, but I'm curious if there's a bug to file about this.

Richik SC · Answer 2 · Wed Apr 10 2019 02:34:08 GMT+0800 (China Standard Time)

Not pruning the source makes adds unneccessary weight to the external stylesheet, which means the browser has to download those extra bytes from the network, increasing the page weight and slowing the experience down.

Fotis Papadogeorgopoulos · Answer 3 · Wed Apr 10 2019 05:06:39 GMT+0800 (China Standard Time)

I know, I was mentioning it in case it was something actionable; I don't know the things you are building, not pruning could very well have a large effect there :)

For the maintainers: I've also had this issue when pruneSource is on.

Jay Klehr · Answer 4 · Tue Jul 09 2019 00:41:02 GMT+0800 (China Standard Time)

I can also confirm that changing pruneSource from true (the default) to false fixes the issue of CSS inside media queries being removed.

Jason Miller · Answer 5 · Sat Nov 02 2019 05:27:08 GMT+0800 (China Standard Time)

I'd actually generally recommend turning pruneSource off, regardless of this bug. Pruning source CSS in a multipage website can be really bad for caching and occasionally fails entirely. If each page on a website has different markup, the inlined CSS rules are different for each page, which means the pruned external CSS is different depending on which page you visit. The effect is that it's not really possible to cache CSS when pruning in a multi-page setup.

This is not as much of an issue for Single Page Apps, which is why the default value is true.

As for the bug here, it's something relating to how the mirrored rule traversal descends into nested rules. My guess is that, since there's no logic currently in the walk to deal with media queries, it's considering all media queries to be critical, and pruning them from the original external CSS.