From f2ff86725ccb96347af1881657428e4de1fe0bae Mon Sep 17 00:00:00 2001
From: Elizabeth Mitchell <lizmitchell@google.com>
Date: Wed, 14 Feb 2024 07:53:19 -0800
Subject: [PATCH] fix: remove `:host-context` rtl selectors

We can support this now that Chrome 120-121 are stable.

PiperOrigin-RevId: 606984234
---
 docs/support.md                         |  4 +--
 field/internal/_outlined-field.scss     | 11 --------
 progress/internal/_linear-progress.scss |  7 -----
 slider/internal/_slider.scss            | 35 ++++---------------------
 4 files changed, 7 insertions(+), 50 deletions(-)

diff --git a/docs/support.md b/docs/support.md
index a94b3ba551..04f4a858c8 100644
--- a/docs/support.md
+++ b/docs/support.md
@@ -28,8 +28,8 @@ Current browsers and versions supported:
 
 Browser | Version
 ------- | -------
-Chrome  | 112 +
-Edge    | 112 +
+Chrome  | 120 +
+Edge    | 120 +
 Firefox | 119 +
 Safari* | 16.4 +
 
diff --git a/field/internal/_outlined-field.scss b/field/internal/_outlined-field.scss
index dac42d6829..16a129935f 100644
--- a/field/internal/_outlined-field.scss
+++ b/field/internal/_outlined-field.scss
@@ -324,17 +324,6 @@ $_md-sys-motion: tokens.md-sys-motion-values();
       inset-inline-start: var(--_focus-outline-width);
     }
 
-    // TODO(https://bugs.chromium.org/p/chromium/issues/detail?id=1420655):
-    // remove :host and :host-context once Chrome supports :dir
-    :host-context([dir='rtl']),
-    :host([dir='rtl']) {
-      .resizable .container {
-        clip-path: inset(
-          var(--_focus-outline-width) var(--_focus-outline-width) 0 0
-        );
-      }
-    }
-
     .resizable .container:dir(rtl) {
       clip-path: inset(
         var(--_focus-outline-width) var(--_focus-outline-width) 0 0
diff --git a/progress/internal/_linear-progress.scss b/progress/internal/_linear-progress.scss
index 086e08cb28..3a524be603 100644
--- a/progress/internal/_linear-progress.scss
+++ b/progress/internal/_linear-progress.scss
@@ -171,13 +171,6 @@ $_indeterminate-duration: 2s;
       calc($_indeterminate-duration * 2);
   }
 
-  // TODO(https://bugs.chromium.org/p/chromium/issues/detail?id=1420655):
-  // remove :host and :host-context once Chrome supports :dir
-  :host-context([dir='rtl']),
-  :host([dir='rtl']) {
-    transform: scale(-1);
-  }
-
   :host(:dir(rtl)) {
     transform: scale(-1);
   }
diff --git a/slider/internal/_slider.scss b/slider/internal/_slider.scss
index 9a7bf908fc..f09a1ce7fb 100644
--- a/slider/internal/_slider.scss
+++ b/slider/internal/_slider.scss
@@ -201,11 +201,11 @@ $_md-sys-shape: tokens.md-sys-shape-values();
   }
 
   // rtl for active track clipping
-  @include _get-rtl-selectors('.track', '::after') {
+  .track:dir(rtl)::after {
     clip-path: inset(0 $_active-track-start-clip 0 $_active-track-end-clip);
   }
 
-  @include _get-rtl-selectors('.tickmarks', '::after') {
+  .tickmarks:dir(rtl)::after {
     clip-path: inset(0 $_active-track-start-clip 0 $_active-track-end-clip);
   }
 
@@ -440,7 +440,7 @@ $_md-sys-shape: tokens.md-sys-shape-values();
   }
 
   // in 'rtl', clip right side of "lesser" input
-  @include _get-rtl-selectors('.ranged input.start') {
+  .ranged input.start:dir(rtl) {
     clip-path: inset(0 0 0 $_clip-to-end);
   }
 
@@ -450,7 +450,7 @@ $_md-sys-shape: tokens.md-sys-shape-values();
   }
 
   // in 'rtl', clip left side of "greater" input
-  @include _get-rtl-selectors('.ranged input.end') {
+  .ranged input.end:dir(rtl) {
     clip-path: inset(0 $_clip-to-start 0 0);
   }
 
@@ -477,28 +477,6 @@ $_md-sys-shape: tokens.md-sys-shape-values();
   }
 }
 
-// Creates a mixin of rtl selectors to construct distinct rulesets. If `:dir` is
-// supported, then it will take precedence over `:host-context` via a `@supports
-// not selector(:dir(rtl))` at-rule. Seprating rulesets ensure they are not
-// dropped on browsers where one is not supported;
-// Note, `:where` cannot be used to create compound selectors that contain
-// pseudo elements
-// (e.g. this does not work: `:where(:host([dir="rtl"]) .foo::after)`),
-@mixin _get-rtl-selectors($selector: '', $suffix: '') {
-  $host-context-selectors: ':host-context([dir="rtl"]) #{$selector}#{$suffix}, :host([dir="rtl"]) #{$selector}#{$suffix}';
-  $dir-selector: '#{$selector}:dir(rtl)#{$suffix}';
-
-  @supports not selector(:dir(rtl)) {
-    #{$host-context-selectors} {
-      @content;
-    }
-  }
-
-  #{$dir-selector} {
-    @content;
-  }
-}
-
 // Returns a background-image with sized circular ticks of the given color.
 @function _get-tick-image($color) {
   @return radial-gradient(
@@ -537,10 +515,7 @@ $_md-sys-shape: tokens.md-sys-shape-values();
     transform: translateX(var(--_x-translate));
   }
 
-  @include _get-rtl-selectors(
-    'input.#{$start-or-end}',
-    '::-webkit-slider-thumb'
-  ) {
+  input.#{$start-or-end}:dir(rtl)::-webkit-slider-thumb {
     transform: translateX(calc(-1 * var(--_x-translate)));
   }
 }