bug: :host selector on element combined with rtl mixins does not create the proper selector

[crazyserver]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x
• Nightly

Current Behavior

With the following CSS:

:host .element-selector {
    @include position(0, 0, null, null);
}

When using the rtl mixin so, also add-root-selector it translates the selector as:

:host-context([dir=rtl])

So part of it is lost.

Expected Behavior

With the following CSS:

:host .element-selector {
@include position(0, 0, null, null);
}

When using the rtl mixin so, also add-root-selector it translates the selector as:

:host-context([dir=rtl]) .element-selector

Maintaining the whole selector.

Steps to Reproduce

1. Create a blank template
2. Add a div.test-element to the HTML
3. Add the following code to the related CSS:

:host .test-element {
    @include position(0, 0, null, null);
}

4. Run the app, inspect code of the created div and check css is not included on the element.
5. You can also check the resulting selector is not correct on the generated css.

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.19.0 (/Users/pau/.nvm/versions/node/v16.14.2/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 5.9.2
@angular-devkit/build-angular : 0.1000.8
@angular-devkit/schematics : 10.0.8
@angular/cli : 10.0.8
@ionic/angular-toolkit : 2.3.3

Cordova:

Cordova CLI : 11.0.0
Cordova Platforms : android 10.1.1, ios 6.2.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, (and 22 other plugins)

Utility:

cordova-res (update available: 0.15.4) : 0.15.3
native-run (update available: 1.5.0) : 1.4.0

System:

ios-sim : 8.0.2
NodeJS : v16.14.2 (/Users/pau/.nvm/versions/node/v16.14.2/bin/node)
npm : 8.5.0
OS : macOS Monterey
Xcode : Xcode 13.3 Build version 13E113

Additional Information

No response

[liamdebeasi]

Thanks for the issue. I can reproduce this behavior. We incorrectly assume that if the selector contains :host then we are only targeting :host:

ionic-framework/core/src/themes/ionic.functions.string.scss

Lines 141 to 143 in 454eff6

	// If the selector contains :host it means it is targeting just the host
	// element so we can change it to look for host-context
	} @else if str-contains($selector, ":host") {

As a result, using a selector such as :host .test-element does not work. Note that if the selector is simply .test-element then this works as expected.

[liamdebeasi]

Some clarified steps to reproduce:

1. Open an existing E2E HTML file in core.
2. Set the body to the following:

<ion-img src="https://picsum.photos/200/300"></ion-img>

3. In src/components/img/img.tsx add the following right before the <img> declaration:

<div class="test-element">my test element</div>

4. In src/components/img/img.scss add the following styles:

@import "../../themes/ionic.globals";

...

:host {
  width: 300px;
  height: 300px;
}

:host .test-element {
  @include position(null, null, null, 50px);

  position: relative;

  background: red;
}

5. Open the E2E HTML file in the browser. Observe that the image and the test element are adjusted on the left by 50px.
6. Add ?rtl=true to the URL and press "Enter". Observe that the image is adjusted on the right by 50px, but the test element is not.
7. Apply the fix in fix(css): rtl mixin preserves selectors after :host #25264. Observe that both the image and the test element are adjusted on the right by 50px.

[thetaPC]

Thank you for the issue! The fix has been applied through PR #27203.

[thetaPC]

The fix has been released in v7.0.6.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.