fix: container queries and groups from overlapping (#104)

Author: marklawlor

src/__tests__/vendor/tailwind/container-queries.tsx

@@ -0,0 +1,56 @@
+import { fireEvent, screen } from "@testing-library/react-native";
+import { View } from "react-native-css/components";
+
+import { render } from "./_tailwind";
+
+const parentID = "parent";
+const childID = "child";
+
+test("Unnamed containers", async () => {
+  await render(
+    <View testID={parentID} className="@container">
+      <View testID={childID} className="@sm:text-white" />
+    </View>,
+  );
+
+  const parent = screen.getByTestId(parentID);
+  const child = screen.getByTestId(childID);
+
+  expect(child).toHaveStyle(undefined);
+
+  // Jest does not fire layout events, so we need to manually
+  fireEvent(parent, "layout", {
+    nativeEvent: {
+      layout: {
+        width: 500,
+        height: 200,
+      },
+    },
+  });
+
+  expect(child).toHaveStyle({ color: "#fff" });
+});
+
+test("Named containers", async () => {
+  await render(
+    <View testID={parentID} className="@container/main">
+      <View testID={childID} className="@sm/main:text-white" />
+    </View>,
+  );
+
+  const parent = screen.getByTestId(parentID);
+  const child = screen.getByTestId(childID);
+
+  expect(child).toHaveStyle(undefined);
+
+  fireEvent(parent, "layout", {
+    nativeEvent: {
+      layout: {
+        width: 500,
+        height: 200,
+      },
+    },
+  });
+
+  expect(child).toHaveStyle({ color: "#fff" });
+});

src/compiler/__tests__/selectors.test.tsx

@@ -60,7 +60,7 @@ test(".my-class { &:is(:where(.my-parent, .my-second-parent):hover *) {} }", ()
       className: "my-class",
       containerQuery: [
         {
-          n: "my-parent",
+          n: "g:my-parent",
           p: {
             h: 1,
           },
@@ -73,7 +73,7 @@ test(".my-class { &:is(:where(.my-parent, .my-second-parent):hover *) {} }", ()
       className: "my-class",
       containerQuery: [
         {
-          n: "my-second-parent",
+          n: "g:my-second-parent",
           p: {
             h: 1,
           },

src/compiler/compiler.ts

@@ -294,7 +294,7 @@ function extractContainer(
   };
 
   if (containerRule.name) {
-    query.n = containerRule.name;
+    query.n = `c:${containerRule.name}`;
   }
 
   builder.addContainerQuery(query);

src/compiler/inheritance.test.ts

@@ -12,7 +12,7 @@ test("nested classes", () => {
         "my-class",
         [
           {
-            c: ["my-class"],
+            c: ["g:my-class"],
             s: [0],
           },
         ],
@@ -21,7 +21,7 @@ test("nested classes", () => {
         "test",
         [
           {
-            cq: [{ n: "my-class" }],
+            cq: [{ n: "g:my-class" }],
             d: [{ color: "#f00" }],
             v: [["__rn-css-color", "#f00"]],
             s: [1, 2],
@@ -44,7 +44,7 @@ test("multiple tiers classes", () => {
         "one",
         [
           {
-            c: ["one"],
+            c: ["g:one"],
             s: [0],
           },
         ],
@@ -53,7 +53,7 @@ test("multiple tiers classes", () => {
         "two",
         [
           {
-            c: ["two"],
+            c: ["g:two"],
             s: [0],
           },
         ],
@@ -62,7 +62,7 @@ test("multiple tiers classes", () => {
         "test",
         [
           {
-            cq: [{ n: "one" }, { n: "two" }],
+            cq: [{ n: "g:one" }, { n: "g:two" }],
             d: [{ color: "#f00" }],
             v: [["__rn-css-color", "#f00"]],
             s: [1, 3],
@@ -85,7 +85,7 @@ test("tiers with multiple classes", () => {
         "one",
         [
           {
-            c: ["one"],
+            c: ["g:one"],
             s: [0],
           },
         ],
@@ -94,7 +94,7 @@ test("tiers with multiple classes", () => {
         "three",
         [
           {
-            c: ["three.two"],
+            c: ["g:three.two"],
             s: [0],
             aq: [["a", "className", "*=", "two"]],
           },
@@ -105,9 +105,9 @@ test("tiers with multiple classes", () => {
         [
           {
             cq: [
-              { n: "one" },
+              { n: "g:one" },
               {
-                n: "three.two",
+                n: "g:three.two",
               },
             ],
             d: [{ color: "#f00" }],

src/compiler/selector-builder.ts

@@ -323,7 +323,7 @@ function parseComponents(
           containerQueries.unshift(ref);
         }
 
-        ref.n = ref.n ? `${ref.n}.${component.name}` : component.name;
+        ref.n = ref.n ? `${ref.n}.${component.name}` : `g:${component.name}`;
       }
 
       specificity[Specificity.ClassName] =
@@ -492,7 +492,9 @@ function parseIsWhereComponents(
             (query.specificity[Specificity.ClassName] ?? 0) + 1;
         }
 
-        query.n = query.n ? `${query.n}.${component.name}` : component.name;
+        query.n = query.n
+          ? `${query.n}.${component.name}`
+          : `g:${component.name}`;
       }
 
       return parseIsWhereComponents(type, selector, index + 1, queries);

src/compiler/stylesheet.ts

@@ -507,7 +507,7 @@ export class StylesheetBuilder {
               continue;
             }
 
-            const [first, ...rest] = name.split(".");
+            const [first, ...rest] = name.slice(2).split(".");
 
             if (typeof first !== "string") {
               continue;