fix(rtl): allow :host to use rtl()

[thetaPC]

Issue number: N/A

---

What is the current behavior?

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.

:host {
   @include rtl() { // <- won't work
      // styles
   }
}

// generates
:host-context([dir=rtl]) {
  // styles
}

:host:dir(rtl) { // <- wrong syntax
   // styles
}

: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?

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.

:host {
   @include rtl() { // <- works
      // styles
   }
}

// generates
:host-context([dir=rtl]) {
  // styles
}

-  :host:dir(rtl) {
+  :host(:dir(rtl)) {
   // styles
}

: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
• No

Other information

N/A

[brandyscarney]

I tested it against my PR here where I ran into this issue: #28371

It is working as expected in Firefox but I am still not seeing it resolved in Safari.

Below is the change I see in the generated code for the following code snippet between main and this branch:

.item { 
  @include ltr() {
    padding-left: 40px;
  }

  @include rtl() {
    padding-right: 40px;
  }
}

main	branch
.item { padding-left: 40px; } :host-context([dir=rtl]) .item { padding-right: 40px; } [dir=rtl] .item { padding-right: 40px; } @supports selector(:dir(rtl)) { .item:dir(rtl) { padding-right: 40px; } }	.item { padding-left: 40px; } :host-context([dir=rtl]) .item { padding-right: 40px; } [dir=rtl] .item { padding-right: 40px; } @supports selector(:dir(rtl)) { :dir(rtl) .item { padding-right: 40px; } }

Is there something missing?

[brandyscarney]

Maria and I looked into the issue in my last comment. It turns out that I was running into this bug while adding ?rtl=true to the browser url of the test I was previewing. If I added dir="rtl" to the html I did not run into this. This bug was fixed in v17 of Safari but I am using v16.6 which is why I was seeing it and Maria was not. She is going to add a comment in the code in case anyone else runs into it while testing.