Merge remote-tracking branch 'origin/main' into feat/webpack-isolated-source-eval

# Conflicts:
#	e2e/README.md
#	e2e/cases/media-query/queries.yak.ts
#	e2e/cases/yak-file-with-import/App.tsx
#	e2e/cases/yak-file-with-import/test.ts
#	e2e/package.json
#	e2e/run.ts
#	package.json
#	pnpm-lock.yaml

Author: jantimon

.changeset/multi-yak-e2e.md

@@ -0,0 +1,2 @@
+---
+---

e2e/cases/hmr-yak-syntax-error-recovery/App.tsx

@@ -0,0 +1,11 @@
+import { styled } from "next-yak";
+import { spacing, brand } from "./tokens.yak.ts";
+
+const Box = styled.div`
+  padding: ${spacing}px;
+  color: ${brand};
+`;
+
+export default function App() {
+  return <Box data-testid="box">Syntax error recovery</Box>;
+}

e2e/cases/hmr-yak-syntax-error-recovery/test.ts

@@ -0,0 +1,40 @@
+import { test, expect } from "@playwright/test";
+import { withTestEnv } from "next-yak-e2e";
+
+test(
+  "HMR recovers after a syntax error in a .yak.ts dependency",
+  withTestEnv("hmr-yak-syntax-error-recovery", async (fsTmp, page) => {
+    await page.goto(fsTmp.url);
+
+    const box = page.getByTestId("box");
+    await expect(box).toHaveCSS("padding", "40px");
+    await expect(box).toHaveCSS("color", "rgb(0, 128, 128)");
+
+    // Set marker to detect full page reloads
+    await page.evaluate(() => {
+      window.__hmr = true;
+    });
+
+    // Introduce a syntax error in the .yak.ts file
+    await fsTmp.writeFile(
+      "tokens.yak.ts",
+      "export const spacing = 5 * 8;\nexport const brand = <<<BROKEN>>>;\n",
+    );
+
+    // Wait for the error to propagate
+    await page.waitForTimeout(3_000);
+
+    // Fix the syntax error with new values
+    await fsTmp.writeFile(
+      "tokens.yak.ts",
+      'export const spacing = 2 * 8;\nexport const brand = "red";\n',
+    );
+
+    // After recovery, the new values should be applied
+    await expect(box).toHaveCSS("padding", "16px", { timeout: 15_000 });
+    await expect(box).toHaveCSS("color", "rgb(255, 0, 0)");
+
+    // Verify no full page reload occurred
+    expect(await page.evaluate(() => window.__hmr)).toBe(true);
+  }),
+);

e2e/cases/hmr-yak-syntax-error-recovery/tokens.yak.ts

@@ -0,0 +1,2 @@
+export const spacing = 5 * 8;
+export const brand = "teal";

e2e/cases/media-query/queries.yak.ts

@@ -1,3 +1,20 @@
-export const screenQueries = {
-  mobile: "@media (max-width: 599px)",
-};
+import { breakpoints } from "./screenSizes.ts";
+
+/**
+ * Example of a dynamic media query generator
+ *
+ * Proably not something you'd do in a real app, but it serves as a good test case for dynamic values in media queries
+ */
+const screenQueries = {} as Record<keyof typeof breakpoints, string>;
+
+for (const [name, { min, max }] of Object.entries(breakpoints) as [
+  keyof typeof breakpoints,
+  { min: number; max: number },
+][]) {
+  const parts: string[] = [];
+  if (min) parts.push(`(min-width: ${min}px)`);
+  if (max) parts.push(`(max-width: ${max}px)`);
+  screenQueries[name] = `@media ${parts.join(" and ")}`;
+}
+
+export { screenQueries };

e2e/cases/media-query/screenSizes.ts

@@ -0,0 +1,6 @@
+export const breakpoints = {
+  mobile: { min: 0, max: 599 },
+  tablet: { min: 600, max: 899 },
+  desktop: { min: 900, max: 1199 },
+  wide: { min: 1200, max: 0 },
+} as const;

e2e/cases/yak-file-with-import/Accordion.tsx

@@ -0,0 +1,10 @@
+import { styled } from "next-yak";
+import { spacing } from "./spacings.yak.ts";
+
+const AccordionBox = styled.div`
+  padding: ${spacing}px;
+`;
+
+export function Accordion() {
+  return <AccordionBox data-testid="accordion">Accordion</AccordionBox>;
+}

e2e/cases/yak-file-with-import/App.tsx

@@ -1,11 +1,13 @@
-import { styled } from "next-yak";
-import { spacing, brandColor } from "./tokens.yak.ts";
-
-const Box = styled.div`
-  padding: ${spacing}px;
-  color: ${brandColor};
-`;
+import { Accordion } from "./Accordion.tsx";
+import { Button } from "./Button.tsx";
+import { Card } from "./Card.tsx";
 
 export default function App() {
-  return <Box data-testid="box">Yak file with import</Box>;
+  return (
+    <>
+      <Accordion />
+      <Button />
+      <Card />
+    </>
+  );
 }

e2e/cases/yak-file-with-import/Button.tsx

@@ -0,0 +1,12 @@
+import { styled } from "next-yak";
+import { spacing } from "./spacings.yak.ts";
+import { primaryColor } from "./colors.yak.ts";
+
+const StyledButton = styled.button`
+  padding: ${spacing}px;
+  color: ${primaryColor};
+`;
+
+export function Button() {
+  return <StyledButton data-testid="button">Button</StyledButton>;
+}

e2e/cases/yak-file-with-import/Card.tsx

@@ -0,0 +1,10 @@
+import { styled } from "next-yak";
+import { primaryColor } from "./colors.yak.ts";
+
+const StyledCard = styled.div`
+  color: ${primaryColor};
+`;
+
+export function Card() {
+  return <StyledCard data-testid="card">Card</StyledCard>;
+}