fix(css): rtl mixin preserves selectors after :host

[crazyserver]

Ie: :host .element-selector when using rtl was translated as :host-context([dir=rtl]) instead of :host-context([dir=rtl]) .element-selector

Pull request checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been reviewed and added / updated if needed (for bug fixes / features)
• Build (npm run build) was run locally and any changes were pushed
• Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

• Bugfix
• Feature
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes
• Other (please describe):

What is the 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.

Issue URL: #25285

What is the new 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.

Does this introduce a breaking change?

• Yes
• No

Other information

[liamdebeasi]

Thanks for the PR! We require that any fix/feature PRs to be associated with an existing issue prior to merging. Is there an open issue that we can link this to?

Having an issue with steps to reproduce helps us better verify the proposed fix.

[crazyserver]

Thanks I've opened: #25285

[liamdebeasi]

Thanks! There are several components that make use of the :host .selector syntax with RTL utilities. These will also need to be updated to account for this change.

For example this line in datetime probably does not need the position mixin: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/datetime/datetime.scss#L346

However, the change in this PR breaks its positioning:

---

We will schedule some time in an upcoming sprint to scrutinize which components need updates and make the appropriate changes.

[sean-perkins]

Ignore the large file diff for now (getting things ready for team review/merge into 6.4). Once I sync 6.4 with main the diff will be the single file change.