Angular SSR outputs warning on css on every page load

[kewur]

Before creating a new issue, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have tried disabling all browser extensions or using a different browser
• I have tried deleting the node_modules folder and reinstalling my dependencies
• I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

Angular

Which UI component?

Authenticator

How is your app built?

angular ssr

What browsers are you seeing the problem on?

Chrome, Firefox, Microsoft Edge, Safari, iOS (React Native), Android (React Native)

Which region are you seeing the problem in?

us-east-1

Please describe your bug.

when serving a page through angular SSR the logs are flooded with this error

2 rules skipped due to selector errors:
  .amplify-accordion__item:where() -> Empty sub-selector
  .amplify-accordion__item:where() -> Empty sub-selector

What's the expected behaviour?

logs not being output with the errors.

Help us reproduce the bug!

have an angular project and serve it with ssr.

Code Snippet

// Put your code below this line.

Console log output

2 rules skipped due to selector errors:
.amplify-accordion__item:where() -> Empty sub-selector
.amplify-accordion__item:where() -> Empty sub-selector

Additional information and screenshots

No response

[hbuchel]

Hi @kewur what version of Angular are you using?

I do see this pop up as a warning during the build, though it doesn't seem to affect the loading of CSS or anything when I served the built site. I tested with a fresh install using ng new --ssr. I couldn't replicate it showing as a warning in the console during page load, though. You should be able to safely ignore the warning. Let us know if you're seeing other effects besides just the warning during build.

It seems related to this open issue GoogleChromeLabs/critters#103 on the critters repo which Angular uses to inline critical css.

[kewur]

hey Heather, thanks for looking into it. Yeah the warning seems harmless and happens on every page load (during runtime and not build), but it does cause it to be logged into cloudwatch, which unfortunately costs us. Is there any way to prevent the logging of this that we can implement as a hack?

[hbuchel]

Hi @kewur there were a few comments suggesting that people try to turn off the critical css inline-ing like in this comment if that works for your setup, in your angular.json GoogleChromeLabs/critters#103 (comment) Other than that, I would see if there is a solution via pinning css-select or critters to a newer version? Depending on what version of Angular you are using, you might be picking up an old package where they've fixed that.

I am going to close out this issue as unfortunately we're not able to support it with any changes on our end.