fix: nested classes

Author: marklawlor

src/__tests__/compiler/smoke.test.ts

@@ -0,0 +1,29 @@
+import { compile } from "../../compiler";
+
+test("nested classes", () => {
+  const compiled = compile(`
+.my-class .test {
+  color: red;
+}`);
+
+  expect(compiled.stylesheet()).toStrictEqual({
+    s: {
+      test: [
+        {
+          d: {
+            color: "#f00",
+          },
+          s: [0, 0, 0, 0, 0],
+          v: {
+            "__rn-css-color": "#f00",
+          },
+          cq: [
+            {
+              n: "my-class",
+            },
+          ],
+        },
+      ],
+    },
+  });
+});

src/compiler/stylesheet-new.ts

@@ -100,7 +100,7 @@ export class CompilerStyleSheet {
   }
 
   addDeclarations(declarations?: Declaration[]) {
-    if (!declarations) {
+    if (!declarations || declarations.length === 0) {
       return;
     }
 
@@ -178,7 +178,7 @@ export class CompilerStyleSheet {
 
     for (const selector of selectors) {
       for (const partialRule of rules.getAllRules()) {
-        const rule = this.createRule(partialRule, options);
+        const rule = this.createRule(partialRule, selector, options);
         this.appendRule(selector, rule);
       }
     }
@@ -207,6 +207,7 @@ export class CompilerStyleSheet {
 
   private createRule(
     partialRule: Partial<HybridStyleRule>,
+    selector: NormalizedSelector,
     options?: { important?: boolean },
   ): HybridStyleRule {
     const rule: HybridStyleRule = {
@@ -226,6 +227,13 @@ export class CompilerStyleSheet {
       }
     }
 
+    if (selector.type === "className") {
+      if (selector.containerQuery) {
+        rule.cq = [...(rule.cq ?? [])];
+        rule.cq.push(...selector.containerQuery);
+      }
+    }
+
     if (this.mediaStack.length > 0) {
       const media = this.mediaStack.flat();
       if (media.length === 1) {