'How do I fix the "The shadow-piercing descendant combinator (>>>) is deprecated" warning on ng build for production

I'm getting ng-build -c production warnings for all my css in styles that have a '>>>' notation.

Warning: ▲ [WARNING] Unexpected ">" /Users/mike/project2022/client/src/app/bank/bank-new/bank-new.component.ts-angular-inline--13.css:33:13: 33 │ :host >>> .nav-item > a {

QUESTION - How do I fix this?

ex. '>>>' giving warnings on build

@Component({
  selector: 'app-bank-new',
  templateUrl: './bank-new.component.html',
  styleUrls: ['./bank-new.component.scss'],
  styles: [
    `
    :host >>> .nav-item > a {
      color: #17a2b8 !important;
    }
    :host >>> form-wizard > .card {
      border-radius: 0 !important;
      height: calc(100vh - 57px) !important;
      border: none !important;
    }
    :host >>> .card-footer {
      display: none !important;
    }
    `
  ]
})
htmlcssangulartypescript


Solution 1:[1]

https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep :

The shadow-piercing descendant combinator (>>>) is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools.

So your best bet would be to remove / replace all your >>> selectors with non shadow-piercing descendant combinator alternatives. The linked support is being removed from major browsers might help in finding alternatives.

You could also try if the ::ng-deep alternative works and does not throw warnings.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 ax.

Related Questions