feat: parse additional color spaces

Author: marklawlor

.config/cspell.json

@@ -10,6 +10,7 @@
     "xcworkspace"
   ],
   "words": [
+    "colorjs",
     "prebuild"
   ]
-}
+}

package.json

@@ -111,6 +111,7 @@
     "!**/__mocks__"
   ],
   "dependencies": {
+    "colorjs.io": "^0.5.2",
     "comment-json": "^4.2.5",
     "debug": "^4.4.1"
   },

src/compiler/__tests__/compiler.test.tsx

@@ -1,5 +1,22 @@
 import { compile } from "../compiler";
 
+test("reads global CSS variables", () => {
+  const compiled = compile(`
+@react-native {
+  preserve-variables: true
+}
+
+@layer theme {
+  :root, :host {
+    --color-red-500: oklch(63.7% 0.237 25.331);
+  }
+}`);
+
+  expect(compiled).toStrictEqual({
+    vr: [["color-red-500", "oklch(63.7% 0.237 25.331)"]],
+  });
+});
+
 test.skip("test compiler", () => {
   const compiled = compile(`
     .test { 

src/compiler/compiler.ts

@@ -105,6 +105,11 @@ export function compile(
     filename: "style.css", // This is ignored, but required
     code: typeof code === "string" ? new TextEncoder().encode(code) : code,
     visitor: {
+      Rule(rule) {
+        if (isReactNativeAtRule(rule)) {
+          extractReactNativeOptions(rule, collection);
+        }
+      },
       Declaration(decl) {
         // Track variable usage, we remove any unused variables
         if (decl.property !== "unparsed" && decl.property !== "custom") return;
@@ -114,6 +119,8 @@ export function compile(
       StyleSheetExit(sheet) {
         logger(`Found ${sheet.rules.length} rules to process`);
 
+        console.log(JSON.stringify(sheet, null, 2));
+
         for (const rule of sheet.rules) {
           // Extract the style declarations and animations from the current rule
           extractRule(rule, collection);
@@ -125,7 +132,6 @@ export function compile(
     },
     customAtRules: {
       "react-native": {
-        prelude: "<custom-ident>+",
         body: "declaration-list",
       },
     },
@@ -220,11 +226,33 @@ function extractRule(
       }
       break;
     }
-    case "custom": {
-      if (isReactNativeAtRule(rule)) {
-        extractReactNativeOptions(rule, collection);
+    case "layer-block":
+      for (const layerRule of rule.value.rules) {
+        extractRule(layerRule, collection, partialStyle);
       }
-    }
+      break;
+    case "custom":
+    case "font-face":
+    case "font-palette-values":
+    case "font-feature-values":
+    case "namespace":
+    case "layer-statement":
+    case "property":
+    case "view-transition":
+    case "ignored":
+    case "unknown":
+    case "import":
+    case "page":
+    case "supports":
+    case "counter-style":
+    case "moz-document":
+    case "nesting":
+    case "nested-declarations":
+    case "viewport":
+    case "custom-media":
+    case "scope":
+    case "starting-style":
+      break;
   }
 }