fix(rtl): allow :host to use rtl() (#28353)
Issue number: N/A
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
While working on a safe area padding mixin, I realized that `rtl()`
wasn't being applied for `:host` when using Firefox or Safari. This is
happening because the syntax for `:dir()` is wrong. The placement needs
to be updated for Firefox and Safari to register it.
```scss
:host {
@include rtl() { // <- won't work
// styles
}
}
// generates
:host-context([dir=rtl]) {
// styles
}
:host:dir(rtl) { // <- wrong syntax
// styles
}
```
```scss
:host(.class) {
@include rtl() { // <- won't work
// styles
}
}
// generates
:host-context([dir=rtl]):host(.class) {
// styles
}
:host-context([dir=rtl]).class {
// styles
}
:host(.class):dir(rtl) { // <- wrong syntax
// styles
}
```
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
I updated `rtl()` to use `:dir()` as the `addHostSelector` in the
`add-root-selector` function. This generates all the correct selectors
for Firefox and Safari. However, `:dir()` does not have the structure of
`:host-context()` so I had to add a new parameter to `add-root-selector`
to determine whether to use `:host-context()` or not. I set the default
to `true` since the function originally used `:host-context()`.
An extra win is that the updated function will be ready for when
`:host-context()` can be removed from the codebase.
```diff
:host {
@include rtl() { // <- works
// styles
}
}
// generates
:host-context([dir=rtl]) {
// styles
}
- :host:dir(rtl) {
+ :host(:dir(rtl)) {
// styles
}
```
```diff
:host(.class) {
@include rtl() { // <- works
// styles
}
}
// generates
:host-context([dir=rtl]):host(.class) {
padding-right: 40px;
}
:host-context([dir=rtl]).class {
// styles
}
- :host(.class):dir(rtl) {
+ :host(.class:dir(rtl)) {
// styles
}
```
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
N/A
---------
Co-authored-by: ionitron <hi@ionicframework.com>
Maria Hutt
|
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 29 KiB |
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 35 KiB |
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 33 KiB After Width: | Height: | Size: 35 KiB |
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |