feat: support for usage in html

Author: Quang Phan

.changeset/good-eyes-complain.md

@@ -0,0 +1,5 @@
+---
+'postcss-color-scheme': patch
+---
+
+added support when nested in html itself

lib/color-scheme.js

@@ -12,6 +12,32 @@ function findRootOrMediaNode(node) {
   return findRootOrMediaNode(parent);
 }
 
+/**
+ * @param {import('postcss').Helpers} helpers
+ * @param {import('postcss').Container} parent
+ * @param {string} additionalChunk
+ * @param {boolean} global
+ * @returns {string}
+ */
+function constructSelector(helpers, parent, additionalChunk, global) {
+  const parentSelectors = helpers.list.comma(/** @type {import('postcss').Rule} */(parent).selector);
+  /** @type {string[]} */
+  let selectors = [];
+  for (const selector of parentSelectors) {
+    let joinedSelector = '';
+    if (selector.startsWith('html')) {
+      joinedSelector = `html${additionalChunk}${selector.substring('html'.length)}`;
+      if (global) joinedSelector = `:global(${joinedSelector})`;
+    } else {
+      let chunkToAdd = `html${additionalChunk}`;
+      if (global) chunkToAdd = `:global(${chunkToAdd})`;
+      joinedSelector = `${chunkToAdd} ${selector}`;
+    }
+    selectors.push(joinedSelector);
+  }
+  return selectors.join(', ');
+}
+
 /**
  * @param {import('postcss').Helpers} helpers
  * @param {import('postcss').AtRule} atRule
@@ -30,15 +56,9 @@ function transform(helpers, atRule, theme, config = {}) {
   }
   const container = findRootOrMediaNode(parent);
 
-  let htmlSelectorChunk = `html:not([data-color-scheme="${theme === 'dark' ? 'light' : 'dark'}"])`;
-  if (global) {
-    htmlSelectorChunk = `:global(${htmlSelectorChunk})`;
-  }
+  let selectorColorSchemeChunk = `:not([data-color-scheme="${theme === 'dark' ? 'light' : 'dark'}"])`;
   const implicitRule = new helpers.Rule({
-    selector: helpers.list
-      .comma(/** @type {import('postcss').Rule} */(parent).selector)
-      .map((s) => `${htmlSelectorChunk} ${s}`)
-      .join(', '),
+    selector: constructSelector(helpers, parent, selectorColorSchemeChunk, global),
     nodes: atRule.nodes,
   });
   const implicitAtRule = new helpers.AtRule({
@@ -56,15 +76,9 @@ function transform(helpers, atRule, theme, config = {}) {
     container.append(implicitAtRule);
   }
 
-  htmlSelectorChunk = `html[data-color-scheme="${theme}"]`;
-  if (global) {
-    htmlSelectorChunk = `:global(${htmlSelectorChunk})`;
-  }
+  selectorColorSchemeChunk = `[data-color-scheme="${theme}"]`;
   const explicitRule = new helpers.Rule({
-    selector: helpers.list
-      .comma(/** @type {import('postcss').Rule} */(parent).selector)
-      .map((s) => `${htmlSelectorChunk} ${s}`)
-      .join(', '),
+    selector: constructSelector(helpers, parent, selectorColorSchemeChunk, global),
     source: atRule.source,
     nodes: atRule.nodes,
   });

lib/color-scheme.test.js

@@ -106,3 +106,14 @@ test('unsupported parameter', async () => {
     processor.process(input, { from: undefined })
   ).rejects.toThrowError(/Invalid parameter/);
 });
+
+test('selector is html itself', async () => {
+  const input = readCSS('./tests/selector-is-html.input.css');
+  const output = readCSS('./tests/selector-is-html.output.css');
+
+  /** @type {any} */
+  const processor = postcss([postcssNesting, plugin()]);
+  const result = await processor.process(input, { from: undefined });
+
+  compareCSS(output, result.css);
+});

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

@@ -0,0 +1,29 @@
+html {
+  color: blue;
+
+  @light {
+    color: white;
+  }
+
+  @dark {
+    color: black;
+  }
+
+  &.nested, &[nested] {
+    @dark {
+      color: yellow;
+    }
+  }
+}
+
+html.class {
+  @dark {
+    color: red;
+  }
+}
+
+html[lang="en"] {
+  @light {
+    color: blue;
+  }
+}

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

@@ -0,0 +1,47 @@
+html {
+  color: blue;
+}
+
+html[data-color-scheme="dark"].nested, html[data-color-scheme="dark"][nested] {
+  color: yellow
+}
+
+html[data-color-scheme="dark"] {
+  color: black;
+}
+
+html[data-color-scheme="light"] {
+  color: white;
+}
+
+html[data-color-scheme="dark"].class {
+  color: red;
+}
+
+html[data-color-scheme="light"][lang="en"] {
+  color: blue;
+}
+
+@media (prefers-color-scheme: dark) {
+  html:not([data-color-scheme="light"]) {
+    color: black;
+  }
+
+  html:not([data-color-scheme="light"]).class {
+    color: red;
+  }
+
+  html:not([data-color-scheme="light"]).nested, html:not([data-color-scheme="light"])[nested] {
+    color: yellow
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  html:not([data-color-scheme="dark"]) {
+    color: white;
+  }
+
+  html:not([data-color-scheme="dark"])[lang="en"] {
+    color: blue;
+  }
+}