test(in-deep-nested-selector): add test case

Author: vnphanquang

.changeset/calm-mirrors-tickle.md

@@ -0,0 +1,5 @@
+---
+'postcss-color-scheme': patch
+---
+
+added test case where used in deeply nested selectors

lib/color-scheme.test.js

@@ -137,3 +137,14 @@ test('used at root', async () => {
     processor.process(input, { from: undefined })
   ).rejects.toThrowError(/Expect @dark to be nested in a selector./);
 });
+
+test.only('in deep nested selector', async () => {
+  const input = readCSS('./tests/in-deep-nested-selector.input.css');
+  const output = readCSS('./tests/in-deep-nested-selector.output.css');
+
+  /** @type {any} */
+  const processor = postcss([plugin(), postcssNesting]);
+  const result = await processor.process(input, { from: undefined });
+
+  compareCSS(output, result.css);
+});

lib/tests/in-deep-nested-selector.input.css

@@ -0,0 +1,11 @@
+@media (max-width: 767px) {
+  .grandparent {
+    & .parent {
+      & .child {
+        @dark {
+          color: red;
+        }
+      }
+    }
+  }
+}

lib/tests/in-deep-nested-selector.output.css

@@ -0,0 +1,12 @@
+@media (max-width: 767px) {
+  html[data-color-scheme="dark"] .grandparent .parent .child {
+    color: red;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    html:not([data-color-scheme="light"]) .grandparent .parent .child {
+      color: red;
+    }
+  }
+}
+