css - Angular build warning with view transition pseudo elements - Stack Overflow

admin管理员组

文章数量:1122832

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?

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?

• css
• angular
• view-transitions-api

Share Improve this question Follow asked Nov 22, 2024 at 23:07 Kostas OreopoulosKostas Oreopoulos 9311 silver badge1010 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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
          }
        }
      }
    }
  }
}, 

本文标签： cssAngular build warning with view transition pseudo elementsStack Overflow