refactor: rewrite compile add function

Author: marklawlor

src/compiler/__tests__/compiler.test.tsx

@@ -1,5 +1,30 @@
 import { compile } from "../compiler";
 
+test("hello world", () => {
+  const compiled = compile(`
+.my-class {
+  color: red;
+}`);
+
+  expect(compiled).toStrictEqual({
+    s: [
+      [
+        "my-class",
+        [
+          {
+            d: [
+              {
+                color: "rgb(100% 0% 0%)",
+              },
+            ],
+            s: [1, 1],
+          },
+        ],
+      ],
+    ],
+  });
+});
+
 test("reads global CSS variables", () => {
   const compiled = compile(`
 @layer theme {

src/compiler/add.ts

@@ -4,9 +4,10 @@ import type {
   Rule,
   TokenOrValue,
 } from "lightningcss";
-import type { CompilerCollection, StyleRuleMapping } from "./compiler.types";
+import type { StyleRuleMapping } from "./compiler.types";
 import { splitByDelimiter } from "./split-by-delimiter";
 import { toRNProperty } from "./selectors";
+import type { StylesheetBuilder } from "./stylesheet";
 
 export interface PropAtRule {
   type: "unknown";
@@ -35,7 +36,7 @@ export interface ReactNativeAtRule {
 
 export function maybeMutateReactNativeOptions(
   rule: Rule | ReactNativeAtRule,
-  collection: CompilerCollection,
+  builder: StylesheetBuilder,
 ) {
   if (rule.type !== "custom" || rule.value?.name !== "react-native") {
     return;
@@ -53,7 +54,12 @@ export function maybeMutateReactNativeOptions(
           if (token.type !== "dashed-ident") {
             return;
           }
-          collection.varUsageCount.set(token.value, 1);
+
+          if (token.value !== "true" && token.value !== "false") {
+            return;
+          }
+
+          builder.setOptions("preserveVariables", token.value === "true");
         });
         break;
       }

src/compiler/atRules.ts

@@ -0,0 +1,27 @@
+import { compile } from "../compiler";
+
+test("multiple classes", () => {
+  const compiled = compile(`
+.my-class.test {
+  color: red;
+}`);
+
+  expect(compiled).toStrictEqual({
+    s: [
+      [
+        "test",
+        [
+          {
+            aq: [["a", "className", "*=", "my-class"]],
+            d: [
+              {
+                color: "rgb(100% 0% 0%)",
+              },
+            ],
+            s: [1, 2],
+          },
+        ],
+      ],
+    ],
+  });
+});