Angular build warning with view transition pseudo elements

Question

In a CSS file, I have two simple view-transition styling rules.

/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
::view-transition-old(root) {
 animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out, 300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}
/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
::view-transition-new(root) {
 animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in, 300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

I have to add those comments to disable lint errors, but when building for production, I get the following warning:

2 rules skipped due to selector errors:
 ::view-transition-old(root) -> Pseudo-elements are not supported by css-select
 ::view-transition-new(root) -> Pseudo-elements are not supported by css-select

I am using Angular 19; everything is updated to the latest version. In my app config I have enabled viewTransitions for router with provideRouter(routes, withViewTransitions())

I am using plain CSS. I guess css-select is something internal to Angular build system, but is there a way to solve this?

Answer 1

This is a critters/beatties issue, the library that is used for critical inlining.

It means those rules aren't inlined. The only way to disable that warning today is by desabiling critical inlining with inlineCritical: false :

"project": {
 "architect": {
 "build": {
 "configurations": {
 "production": {
 "optimization": {
 "scripts": true,
 "styles": {
 "inlineCritical": false
 },
 "fonts": true
 }
 }
 }
 }
 }
},