feat: improve parsing of rules with comma seperated styles

Author: marklawlor

CONTRIBUTING.md

@@ -180,17 +180,20 @@ _Do not create pull requests for these reasons:_
 
 > [!IMPORTANT]  
 > The Metro transformer does not fast refresh. After you make a change, you will need to recompile the project and restart the Metro server with a clean cache.
->
-> ```bash
-> # Build the project
-> yarn build
->
-> # Start the Metro server with a clean cache
-> yarn example start --clean
-> ```
 
 Development on the Metro transformer is done by running the example project.
 
+Debugging with breakpoints is supported if you run the project in VSCode's JavaScript Debug Terminal, or by setting the NodeJS debugger environment variables
+
+### Compiler
+
+> [!IMPORTANT]  
+> The Metro transformer does not fast refresh. After you make a change, you will need to recompile the project and restart the Metro server with a clean cache.
+
+The easiest way to debug the compiler is through Test Driven Development (TDD). The tests are located in the `src/__tests__/compiler` directory.
+
+You can use the JavaScript debugger, but you will need to use VSCode's JavaScript Debug Terminal, or set the NodeJS debugger environment variables to enable the debugger.
+
 ### Babel Plugin
 
 > [!IMPORTANT]

example/src/App.tsx

@@ -6,7 +6,9 @@ export default function App() {
   return (
     <>
       <View className="justify-center items-center h-full">
-        <Text className="text-blue-500">Test Component</Text>
+        <Text className="text-blue-500 shadow-lg shadow-red">
+          Test Component
+        </Text>
       </View>
     </>
   );

src/__tests__/vendor/tailwind.test.tsx

@@ -0,0 +1,113 @@
+import { View } from "react-native-css/components/View";
+import { registerCSS, render, screen, testID } from "react-native-css/jest";
+
+/**
+ * Tailwind CSS utilities
+ *
+ * These tests are designed to ensure that complex Tailwind CSS utilities are compiled correctly.
+ * For the full Tailwind CSS test suite, see the Nativewind repository.
+ */
+
+test("box-shadow", () => {
+  const compiled = registerCSS(`
+.shadow-xl {
+  --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+.shadow-red-500 {
+  --tw-shadow-color: oklch(63.7% 0.237 25.331);
+  @supports (color: color-mix(in lab, red, red)) {
+    --tw-shadow-color: color-mix(in oklab, var(--color-red-500) var(--tw-shadow-alpha), transparent);
+  }
+}
+  `);
+
+  expect(compiled).toStrictEqual({
+    s: [
+      [
+        "shadow-xl",
+        [
+          {
+            d: [
+              [
+                [
+                  {},
+                  "@boxShadow",
+                  [
+                    [{}, "var", "tw-inset-shadow", 1],
+                    [{}, "var", "tw-inset-ring-shadow", 1],
+                    [{}, "var", "tw-ring-offset-shadow", 1],
+                    [{}, "var", "tw-ring-shadow", 1],
+                    [{}, "var", "tw-shadow", 1],
+                  ],
+                  1,
+                ],
+                "boxShadow",
+                1,
+              ],
+            ],
+            dv: 1,
+            s: [1, 1],
+            v: [
+              [
+                "tw-shadow",
+                [
+                  [
+                    0,
+                    20,
+                    25,
+                    -5,
+                    [{}, "var", ["tw-shadow-color", "#0000001a"], 1],
+                  ],
+                  [
+                    0,
+                    8,
+                    10,
+                    -6,
+                    [{}, "var", ["tw-shadow-color", "#0000001a"], 1],
+                  ],
+                ],
+              ],
+            ],
+          },
+        ],
+      ],
+      [
+        "shadow-red-500",
+        [
+          {
+            s: [2, 1],
+            v: [["tw-shadow-color", "#fb2c36"]],
+          },
+        ],
+      ],
+    ],
+  });
+
+  render(<View testID={testID} className="shadow-xl shadow-red-500" />);
+  const component = screen.getByTestId(testID);
+
+  expect(component.type).toBe("View");
+  expect(component.props).toStrictEqual({
+    children: undefined,
+    style: {
+      boxShadow: [
+        {
+          blurRadius: 25,
+          color: "#fb2c36",
+          offsetX: 0,
+          offsetY: 20,
+          spreadDistance: -5,
+        },
+        {
+          blurRadius: 10,
+          color: "#fb2c36",
+          offsetX: 0,
+          offsetY: 8,
+          spreadDistance: -6,
+        },
+      ],
+    },
+    testID,
+  });
+});

src/compiler/__tests__/compiler.test.tsx

@@ -240,6 +240,6 @@ test("breaks apart comma separated variables", () => {
   `);
 
   expect(compiled).toStrictEqual({
-    vr: [["test", [[["blue"], ["green"]]]]],
+    vr: [["test", [["blue", "green"]]]],
   });
 });

src/compiler/compiler.ts

@@ -68,6 +68,7 @@ export function compile(
     },
     StyleSheetExit(sheet) {
       logger(`Found ${sheet.rules.length} rules to process`);
+      logger(JSON.stringify(sheet.rules, null, 2));
 
       for (const rule of sheet.rules) {
         // Extract the style declarations and animations from the current rule

src/compiler/compiler.types.ts

@@ -125,12 +125,12 @@ export type StyleFunction =
   | [
       Record<never, never>,
       string, // string
-      undefined | StyleDescriptor[], // arguments
+      StyleDescriptor, // arguments
     ]
   | [
       Record<never, never>,
       string, // string
-      undefined | StyleDescriptor[], // arguments
+      StyleDescriptor, // arguments
       1, // Should process after styles have been calculated
     ];
 
@@ -144,7 +144,7 @@ export type LightDarkVariable =
 
 export type InlineVariable = {
   [VAR_SYMBOL]: "inline";
-  [key: string]: StyleDescriptor | undefined;
+  [key: string]: unknown | undefined;
 };
 
 /******************************   Animations V1  ******************************/