Use CSS nesting in the textLayer

test/text_layer_test.css

@@ -20,18 +20,19 @@
   inset: 0;
   line-height: 1;
   opacity: 1;
-}
-.textLayer :is(span, br) {
-  color: black;
-  position: absolute;
-  white-space: pre;
-  transform-origin: 0% 0%;
-  border: solid 1px rgb(255 0 0 / 0.5);
-  background-color: rgb(255 255 32 / 0.1);
-  box-sizing: border-box;
-}
 
-.textLayer .markedContent {
+  :is(span, br) {
-  border: none;
+    color: black;
-  background-color: transparent;
+    position: absolute;
+    white-space: pre;
+    transform-origin: 0% 0%;
+    border: solid 1px rgb(255 0 0 / 0.5);
+    background-color: rgb(255 255 32 / 0.1);
+    box-sizing: border-box;
+  }
+
+  .markedContent {
+    border: none;
+    background-color: transparent;
+  }
 }

web/text_layer_builder.css

@@ -13,18 +13,6 @@
  * limitations under the License.
  */
 
-:root {
-  --highlight-bg-color: rgb(180 0 170);
-  --highlight-selected-bg-color: rgb(0 100 0);
-}
-
-@media screen and (forced-colors: active) {
-  :root {
-    --highlight-bg-color: Highlight;
-    --highlight-selected-bg-color: ButtonText;
-  }
-}
-
 .textLayer {
   position: absolute;
   text-align: initial;
@@ -36,75 +24,83 @@
   forced-color-adjust: none;
   transform-origin: 0 0;
   z-index: 2;
-}
 
-.textLayer :is(span, br) {
+  :is(span, br) {
-  color: transparent;
+    color: transparent;
-  position: absolute;
+    position: absolute;
-  white-space: pre;
+    white-space: pre;
-  cursor: text;
+    cursor: text;
-  transform-origin: 0% 0%;
+    transform-origin: 0% 0%;
-}
+  }
 
-/* Only necessary in Google Chrome, see issue 14205, and most unfortunately
+  /* Only necessary in Google Chrome, see issue 14205, and most unfortunately
- * the problem doesn't show up in "text" reference tests. */
+   * the problem doesn't show up in "text" reference tests. */
-/*#if !MOZCENTRAL*/
-.textLayer span.markedContent {
-  top: 0;
-  height: 0;
-}
-/*#endif*/
-
-.textLayer .highlight {
-  margin: -1px;
-  padding: 1px;
-  background-color: var(--highlight-bg-color);
-  border-radius: 4px;
-}
-
-.textLayer .highlight.appended {
-  position: initial;
-}
-
-.textLayer .highlight.begin {
-  border-radius: 4px 0 0 4px;
-}
-
-.textLayer .highlight.end {
-  border-radius: 0 4px 4px 0;
-}
-
-.textLayer .highlight.middle {
-  border-radius: 0;
-}
-
-.textLayer .highlight.selected {
-  background-color: var(--highlight-selected-bg-color);
-}
-
-.textLayer ::selection {
   /*#if !MOZCENTRAL*/
-  background: blue;
+  span.markedContent {
+    top: 0;
+    height: 0;
+  }
   /*#endif*/
-  background: AccentColor; /* stylelint-disable-line declaration-block-no-duplicate-properties */
-}
 
-/* Avoids https://github.com/mozilla/pdf.js/issues/13840 in Chrome */
+  .highlight {
-/*#if !MOZCENTRAL*/
+    --highlight-bg-color: rgb(180 0 170);
-.textLayer br::selection {
+    --highlight-selected-bg-color: rgb(0 100 0);
-  background: transparent;
-}
-/*#endif*/
 
-.textLayer .endOfContent {
+    @media screen and (forced-colors: active) {
-  display: block;
+      --highlight-bg-color: Highlight;
-  position: absolute;
+      --highlight-selected-bg-color: ButtonText;
-  inset: 100% 0 0;
+    }
-  z-index: -1;
-  cursor: default;
-  user-select: none;
-}
 
-.textLayer .endOfContent.active {
+    margin: -1px;
-  top: 0;
+    padding: 1px;
+    background-color: var(--highlight-bg-color);
+    border-radius: 4px;
+
+    &.appended {
+      position: initial;
+    }
+
+    &.begin {
+      border-radius: 4px 0 0 4px;
+    }
+
+    &.end {
+      border-radius: 0 4px 4px 0;
+    }
+
+    &.middle {
+      border-radius: 0;
+    }
+
+    &.selected {
+      background-color: var(--highlight-selected-bg-color);
+    }
+  }
+
+  ::selection {
+    /*#if !MOZCENTRAL*/
+    background: blue;
+    /*#endif*/
+    background: AccentColor; /* stylelint-disable-line declaration-block-no-duplicate-properties */
+  }
+
+  /* Avoids https://github.com/mozilla/pdf.js/issues/13840 in Chrome */
+  /*#if !MOZCENTRAL*/
+  br::selection {
+    background: transparent;
+  }
+  /*#endif*/
+
+  .endOfContent {
+    display: block;
+    position: absolute;
+    inset: 100% 0 0;
+    z-index: -1;
+    cursor: default;
+    user-select: none;
+
+    &.active {
+      top: 0;
+    }
+  }
 }