Unexpected Warning: rules skipped due to selector errors

[erictor]

I opened up issue #20906 this in the angular-cli project and @alan-agius4 explained the following:

The root cause seems to be a bug in Critters which doesn't handle properly the @import.

Accordingly the issue I Opened has been Closed.

A similar issue, #20839 was Opened and has since been Closed.
Issue #42243 was Opened and was Closed as a duplicate of the issue I had opened.

Description:

In my styles.scss I have the following import as the first line:

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

Warning Text Displaying in Chrome Dev Tools:

1 rules skipped due to selector errors
0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

I validated at fonts.google.com that the import is composed correctly. The error is specifically pointing after family=Roboto:ital,wght@0,100; to "0,300;" (and beyond).

The Warning displays upon initial view in browser and each time the browser is refreshed.

[elawady55]

I have the same problem and the issue opened for 29 days, anyone track it?

[erictor]

A related Bug Report was opened #20975. It was Closed with the note that further tracking of that Bug would be done along with #20760.

[Jason Miller]

This should be fixed by #80 or #82.

[Jason Miller]

I can confirm this is fixed in critters@0.0.12+:

import Critters from 'critters';

const critters = new Critters();
critters.readFile = f => assets[f];
const assets = {
  '/x.css': `
    @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
    .foo{ color:red; }
  `
};

const html = await critters.process(`<div class="foo">hi</div><link rel="stylesheet" href="/x.css">`);

console.log(html);
"... <div class="foo">hi</div><style>@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');.foo{color:red}</style>  ..."