Converting style-encapsulated CSS to RTL in Angular

Question

We have a rather large project, with almost all of our CSS inside components. We need to generate RTL styles for the widget, and have attempted to use postcss-rtl. When we've attempted to do so, the [dir] attribute prefix that postcss-rtl adds is being suffixed with the _ngcontent... selector. We need to stop this so that the CSS applies to the html as expected.

// Current output
[dir][_ngcontent-c30] .total-deposit_value[_ngcontent-c30] {
  margin-top: 5px;
}

// Expected output
[dir] .total-deposit_value[_ngcontent-c30] {
  margin-top: 5px;
}

We're simple importing postcss-rtl into our webpack config, and calling it at the bottom of our postcssImports().

I'm not entirely sure how else we can approach this, without turning setting ViewEncapsulation.None, which would cause CSS conflicts.

Any help would be greatly appreciated!

Answer 1

Use /deep/ in your selector

Component styles normally apply only to the HTML in the component's own template. Use the /deep/ shadow-piercing descendant combinator to force a style down through the child component tree into all the child component views. The /deep/ combinator works to any depth of nested components, and it applies to both the view children and content children of the component.

[dir] /deep/ .total-deposit_value {
  margin-top: 5px;
}