Improve the error message for dynamic css functions when returning in…

…valid values (#230)

.changeset/blue-donuts-behave.md

@@ -0,0 +1,5 @@
+---
+"next-yak": patch
+---
+
+Improve the error message for dynamic css functions when returning invalid values

packages/next-yak/runtime/__tests__/styled.test.tsx

@@ -321,3 +321,41 @@ it("should not remove theme if theme is passed to wrapped element", () => {
     </div>
   `);
 });
+
+describe("dev mode - error tests", () => {
+  const originalNodeEnv = process.env.NODE_ENV;
+  const originalError = console.error;
+
+  beforeEach(() => {
+    // errors are only thrown in development mode
+    process.env.NODE_ENV = "development";
+    // prevent console.error from printing the error a second time
+    console.error = () => {};
+  });
+
+  afterEach(() => {
+    process.env.NODE_ENV = originalNodeEnv;
+    console.error = originalError;
+  });
+
+  it("should show the function body in error message when dynamic css function returns invalid value", () => {
+    const Component = styled.div("cssClass", {
+      style: {
+        "--bar": ({ $groupColor }) => $groupColor,
+      },
+    });
+
+    let error = null;
+    try {
+      render(<Component />);
+    } catch (e) {
+      error = e;
+    }
+    expect(error).toMatchInlineSnapshot(`
+      [Error: Dynamic CSS functions must return a string or number but returned undefined
+
+      Dynamic CSS function: ({ $groupColor }) => $groupColor
+      ]
+    `);
+  });
+});

packages/next-yak/runtime/cssLiteral.tsx

@@ -169,7 +169,7 @@ const recursivePropExecution = (
       throw new Error(
         `Dynamic CSS functions must return a string or number but returned ${JSON.stringify(
           result,
-        )}`,
+        )}\n\nDynamic CSS function: ${fn.toString()}\n`,
       );
     }
   }