feat: correct parsing of :is & :where (#69)

Author: marklawlor

src/compiler/__tests__/selectors.test.tsx

@@ -0,0 +1,86 @@
+import { getClassNameSelectors } from "../selector-builder";
+
+test("empty", () => {
+  expect(getClassNameSelectors([])).toStrictEqual([]);
+});
+
+test(".my-class { &:is(:where(.my-parent, .my-second-parent):hover *) {} }", () => {
+  const result = getClassNameSelectors([
+    [
+      {
+        type: "class",
+        name: "my-class",
+      },
+      {
+        type: "nesting",
+      },
+      {
+        type: "pseudo-class",
+        kind: "is",
+        selectors: [
+          [
+            {
+              type: "pseudo-class",
+              kind: "where",
+              selectors: [
+                [
+                  {
+                    type: "class",
+                    name: "my-parent",
+                  },
+                ],
+
+                [
+                  {
+                    type: "class",
+                    name: "my-second-parent",
+                  },
+                ],
+              ],
+            },
+            {
+              type: "pseudo-class",
+              kind: "hover",
+            },
+            {
+              type: "combinator",
+              value: "descendant",
+            },
+            {
+              type: "universal",
+            },
+          ],
+        ],
+      },
+    ],
+  ]);
+
+  expect(result).toStrictEqual([
+    {
+      className: "my-class",
+      containerQuery: [
+        {
+          n: "my-parent",
+          p: {
+            h: 1,
+          },
+        },
+      ],
+      specificity: [0, 2],
+      type: "className",
+    },
+    {
+      className: "my-class",
+      containerQuery: [
+        {
+          n: "my-second-parent",
+          p: {
+            h: 1,
+          },
+        },
+      ],
+      specificity: [0, 2],
+      type: "className",
+    },
+  ]);
+});

src/compiler/compiler.ts

@@ -19,7 +19,6 @@ import { parseContainerCondition } from "./container-query";
 import { parseDeclaration } from "./declarations";
 import { extractKeyFrames } from "./keyframes";
 import { parseMediaQuery } from "./media-query";
-import { getSelectors } from "./selectors";
 import { StylesheetBuilder } from "./stylesheet";
 
 const defaultLogger = debug("react-native-css:compiler");
@@ -165,14 +164,9 @@ function extractRule(rule: Rule, builder: StylesheetBuilder) {
 
       const declarationBlock = value.declarations;
       const mapping = parsePropAtRule(value.rules);
-      const selectors = getSelectors(
-        value.selectors,
-        false,
-        builder.getOptions(),
-      );
 
       // If the rule is a style declaration, extract it with the `getExtractedStyle` function and store it in the `declarations` map
-      builder = builder.fork("style", selectors);
+      builder = builder.fork("style", value.selectors);
 
       if (declarationBlock) {
         if (declarationBlock.declarations) {

src/compiler/inheritance.test.ts

@@ -94,8 +94,9 @@ test("tiers with multiple classes", () => {
         "three",
         [
           {
-            c: ["three"],
+            c: ["three.two"],
             s: [0],
+            aq: [["a", "className", "*=", "two"]],
           },
         ],
       ],
@@ -106,8 +107,7 @@ test("tiers with multiple classes", () => {
             cq: [
               { n: "one" },
               {
-                a: [["a", "className", "*=", "two"]],
-                n: "three",
+                n: "three.two",
               },
             ],
             d: [{ color: "#f00" }],