feat(select-is-html): add support for :root

Author: vnphanquang

.changeset/tiny-boats-beam.md

@@ -0,0 +1,5 @@
+---
+'postcss-color-scheme': patch
+---
+
+add support for `:root` selector; i.e `:root { @dark { /* ... */ } }`

lib/color-scheme.js

@@ -16,6 +16,8 @@ function findRootOrMediaNode(node) {
   return findRootOrMediaNode(parent);
 }
 
+const HTML_SELECTOR_PREFIXES = ['html', ':root'];
+const GLOBAL_HTML_SELECTOR_PREFIXES = HTML_SELECTOR_PREFIXES.map((selector) => `:global(${selector}`);
 /**
  * @param {import('postcss').Helpers} helpers
  * @param {import('postcss').Container} parent
@@ -29,12 +31,23 @@ function constructSelector(helpers, parent, additionalChunk, global) {
   let selectors = [];
   for (const selector of parentSelectors) {
     let joinedSelector = '';
-    if (selector.startsWith(':global(html')) {
-      joinedSelector = `:global(html${additionalChunk}${selector.substring(':global(html'.length)}`;
-    } else if (selector.startsWith('html')) {
-      joinedSelector = `html${additionalChunk}${selector.substring('html'.length)}`;
-      if (global) joinedSelector = `:global(${joinedSelector})`;
-    } else {
+
+    for (const prefix of GLOBAL_HTML_SELECTOR_PREFIXES) {
+      if (selector.startsWith(prefix)) {
+        joinedSelector = `${prefix}${additionalChunk}${selector.substring(prefix.length)}`;
+        break;
+      }
+    }
+
+    for (const prefix of HTML_SELECTOR_PREFIXES) {
+      if (selector.startsWith(prefix)) {
+        joinedSelector = `${prefix}${additionalChunk}${selector.substring(prefix.length)}`;
+        if (global) joinedSelector = `:global(${joinedSelector})`;
+        break;
+      }
+    }
+
+    if (!joinedSelector) {
       let chunkToAdd = `html${additionalChunk}`;
       if (global) chunkToAdd = `:global(${chunkToAdd})`;
       joinedSelector = `${chunkToAdd} ${selector}`;

lib/tests/selector-is-html.input.css

@@ -43,3 +43,9 @@ html[lang="en"] {
     color: blue;
   }
 }
+
+:root {
+  @dark {
+    color: violet;
+  }
+}

lib/tests/selector-is-html.output.css

@@ -34,6 +34,10 @@ html[data-color-scheme="light"][lang="en"] {
   color: gray;
 }
 
+:root[data-color-scheme="dark"] {
+  color: violet;
+}
+
 @media (prefers-color-scheme: dark) {
   html:not([data-color-scheme="light"]) {
     color: black;
@@ -50,6 +54,10 @@ html[data-color-scheme="light"][lang="en"] {
   :global(html:not([data-color-scheme="light"])) {
     color: brown;
   }
+
+  :root:not([data-color-scheme="light"]) {
+    color: violet;
+  }
 }
 
 @media (prefers-color-scheme: light) {