Non-critical rules are erased from inline styles

[Rarst]

I have some @font-face rules for size-adjusted fallback fonts, to reduce CLS while web fonts are loading.

Out of the box critters doesn't seem to consider them critical CSS to inline (I've tried with inlineFonts, no difference for some reason?).

However stranger thing happens if I explicitly include them in HTML - critters actively erases them from style block.

So given following style in head:

<style>
  * {
    color: red !important;
  }

  @font-face {
    font-family: "Alegreya-fallback";
    size-adjust: 101%;
    src: local("Times New Roman");
  }

  @font-face {
    font-family: "Alegreya SC-fallback";
    size-adjust: 113.6%;
    src: local("Times New Roman");
  }

  @font-face {
    font-family: "Alegreya Sans-fallback";
    size-adjust: 86.56%;
    src: local("Arial");
  }
</style>

What's left from it after critters pass is:

<style>* {
    color: red !important
}</style>

The font-face rules are gone - they are not there, or in critical CSS, or anywhere.

The log says:

Inlined 54 B (11% of original 464 B) of inline CSS.

Which is... strange. Dropping any CSS from inline style seems actively destructive? It's not elsewhere, to be loaded later, it's just gone.

From some experiments same happens with any "non-critical" rule, that is such for a class not used on a page.

[hiepxanh]

did you try 8 posibility here?

[Rarst]

I don't see how inline head styles are related to preload, they are not links?

They are just processed in place (and merged with critical css, depending on mergeStylesheets options).

[hiepxanh]

I believe that purpose of inline css. Since that is font inline, and it is not used yet, so it is not included. can you try just use that font in a div to see it is included or not?

[Rarst]

That font is used, detecting that is a separate problem, see #113 follow-up.

The issue here is broadly that critters seems to erase non-critical rules from inline blocks, which is destructive operation. There is no other source of those rules to load or fall back on, they are just gone.

[chrisneven]

@Rarst Did you manage to find a solution?

[Rarst]

No, I think I just kept the rules in the stylesheet at the time.

[kara]

Closing this issue because ownership of Critters has moved to the Nuxt team, who will be maintaining the project going forward. This repo is archived and won't receive any future updates.

If the issue is still relevant, please re-post it to the actively-maintained fork at https://github.com/danielroe/beasties.