Unexpected Warning: rules skipped due to selector errors (reference: #20839)

[erictor]

A similar issue was reported 4 days ago, #20839, and has since been closed.

Environment:

Updated my Angular project from Angular 11 / Angular CLI 11 to Angular 12 / Angular CLI 12

Did this work in the previous version?

Yes.

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.

[alan-agius4]

Hi @erictor,

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

Therefore, can you please file an issue in their issue tracker?

That being said, for performance reasons due to extra network hops and delay in initialising the blocking request. It is not recommended to use @import url especially to remote URL and Google fonts, unless you have prefetch or preload tags for these urls in your HTML page.

The recommended approach is to have this resource referenced in your index.html file using a link element. When you build for production and using this approach, the CSS contents of the Google fonts will be inlined in the HTML page, this will help to improve the LCP and FCP or the application by removing a render blocking request.

[erictor]

@alan-agius4 1. Thank you for your advice re: import and performance issues with it -- I will immediately implement your advice in my SPA project. 2. Re Critters, can your project end up taking a dependency on it even if you aren't explicitly mentioning it in package.json? For example, am I possibly getting it due to specifying types/node 15.3.1 in my devDependencies? Also I wonder why the Warning started displaying when I updated my SPA project from Angular 11 to Angular 12.0.1. - maybe just improved diagnostics to Dev Tools.

[alan-agius4]

Re Critters, can your project end up taking a dependency on it even if you aren't explicitly mentioning it in package.json? For example, am I possibly getting it due to specifying types/node 15.3.1 in my devDependencies? Thanks again.

Critters is a dependency of @angular-devkit/build-angular.

angular-cli/packages/angular_devkit/build_angular/package.json

Line 31 in 92a7d2f

"critters": "0.0.10",

[erictor]

@alan-agius4 Thank you. That's very clear.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}