Merge branch 'main' into feature/yak-cross-file

package.json

@@ -10,7 +10,7 @@
     "build": "pnpm run --filter=next-yak build",
     "watch": "pnpm run --filter=next-yak watch",
     "example": "pnpm --filter=next-yak-example run dev",
-    "test": "pnpm --filter=next-yak --filter=webpack-tests run \"/test($|:types)/\"",
+    "test": "pnpm run build && pnpm --filter=next-yak --filter=webpack-tests --filter=next-yak-example run \"/test($|:types)/\"",
     "test:watch": "pnpm --filter=next-yak run test:watch",
     "test:snapshots": "pnpm --filter=next-yak run test:snapshots",
     "package:types": "npx --package=@arethetypeswrong/cli attw --pack packages/next-yak",

packages/benchmark/package.json

@@ -16,8 +16,8 @@
   },
   "dependencies": {
     "next": "14.2.4",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "next-yak": "workspace:*",
     "styled-components": "6.1.1"
   },

packages/example/app/__tests__/Clock.test.tsx

@@ -0,0 +1,9 @@
+/// <reference types="jest" />
+import React from "react";
+import { render } from "@testing-library/react";
+import { Clock } from "../Clock";
+
+test("renders Clock component", () => {
+  const { asFragment } = render(<Clock />);
+  expect(asFragment()).toMatchSnapshot();
+});

packages/example/app/__tests__/ClockHands.test.tsx

@@ -0,0 +1,9 @@
+/// <reference types="jest" />
+import React from "react";
+import { render } from "@testing-library/react";
+import { ClockHands } from "../ClockHands";
+
+test("renders ClockHands component", () => {
+  const { asFragment } = render(<ClockHands />);
+  expect(asFragment()).toMatchSnapshot();
+});

packages/example/app/__tests__/__snapshots__/Clock.test.tsx.snap

@@ -0,0 +1,74 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders Clock component 1`] = `
+<DocumentFragment>
+  <div>
+    <div>
+      <div />
+      <div
+        index="0"
+      >
+        12
+      </div>
+      <div
+        index="1"
+      >
+        1
+      </div>
+      <div
+        index="2"
+      >
+        2
+      </div>
+      <div
+        index="3"
+      >
+        3
+      </div>
+      <div
+        index="4"
+      >
+        4
+      </div>
+      <div
+        index="5"
+      >
+        5
+      </div>
+      <div
+        index="6"
+      >
+        6
+      </div>
+      <div
+        index="7"
+      >
+        7
+      </div>
+      <div
+        index="8"
+      >
+        8
+      </div>
+      <div
+        index="9"
+      >
+        9
+      </div>
+      <div
+        index="10"
+      >
+        10
+      </div>
+      <div
+        index="11"
+      >
+        11
+      </div>
+      <div />
+      <div />
+      <div />
+    </div>
+  </div>
+</DocumentFragment>
+`;

packages/example/app/__tests__/__snapshots__/ClockHands.test.tsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ClockHands component 1`] = `
+<DocumentFragment>
+  <div />
+  <div />
+  <div />
+</DocumentFragment>
+`;

packages/example/jest.config.js → packages/example/jest.config.cjs

@@ -6,6 +6,7 @@ const createJestConfig = nextJest({ dir: './' })
 // Any custom config you want to pass to Jest
 const customJestConfig = {
   setupFilesAfterEnv: [],
+  testEnvironment: 'jsdom',
 }
 
 // createJestConfig is exported in this way to ensure that next/jest can load the Next.js configuration, which is async

packages/example/next.config.js → packages/example/next.config.mjs

@@ -1,11 +1,11 @@
-const { withYak } = require('next-yak/withYak');
+import { withYak } from 'next-yak/withYak';
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
 
 }
 
-module.exports = withYak({
+export default withYak({
     experiments: {
         crossFileSelectors: true
     }

packages/example/package.json

@@ -1,6 +1,7 @@
 {
   "name": "next-yak-example",
   "version": "0.1.0",
+  "type": "module",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -9,23 +10,30 @@
     "build:yak": "pnpm run --filter next-yak build",
     "start": "next start",
     "lint": "next lint",
-    "test": "jest",
+    "test": "pnpm run test:vitest && pnpm run test:jest",
+    "test:vitest": "vitest run",
+    "test:jest": "jest",
     "test:watch": "jest --watch -u"
   },
   "dependencies": {
     "@types/node": "20.4.5",
     "@types/react": "18.2.28",
     "@types/react-dom": "18.2.7",
     "next": "14.2.4",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "typescript": "5.5.2",
     "next-yak": "workspace:*"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.0.0",
+    "@vitejs/plugin-react": "4.3.1",
+    "@types/jest": "^29.5.12",
     "jest": "^29.6.2",
-    "jest-environment-jsdom": "^29.6.2"
+    "vite": "5.3.4",
+    "vitest": "2.0.4",
+    "jest-environment-jsdom": "^29.6.2",
+    "jsdom": "^22.1.0"
   }
 }

packages/example/postcss.config.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   plugins: {
     'postcss-nested':{},
 	}

packages/example/vitest.config.ts

@@ -0,0 +1,15 @@
+/// <reference types="vitest" />
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react"
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins:
+    [
+      react()
+    ],
+  test: {
+    globals: true,
+    environment: "jsdom",
+  }
+});

packages/next-yak/loaders/__tests__/cssloader.test.ts

@@ -358,12 +358,12 @@ const headline = css\`
     ).toMatchInlineSnapshot(`
       ".headline {
         :before {
-          content: \\"\\\\2022\\";
+          content: "\\2022";
         }
         :after {
-          content: \\"\\\\2022\\";
+          content: "\\2022";
         }
-        content: \\"\\\\\\\\\\"
+        content: "\\\\"
       ;
       }"
     `);

packages/next-yak/loaders/__tests__/parseCss.test.ts

@@ -184,7 +184,7 @@ test("parseCss inComplete css 1 ending inside a double quote string", () => {
               "type": "selector",
             },
           ],
-          "value": "url(\\"https://example.com
+          "value": "url("https://example.com
         ",
         },
       ],
@@ -203,7 +203,7 @@ test("parseCss inComplete css 1 ending inside a double quote string", () => {
               "type": "selector",
             },
           ],
-          "value": "url(\\"https://example.com
+          "value": "url("https://example.com
         ",
         },
         "currentScopes": [
@@ -218,7 +218,7 @@ test("parseCss inComplete css 1 ending inside a double quote string", () => {
         ],
         "isInsideAtRule": false,
         "isInsidePropertyValue": true,
-        "isInsideString": "\\"",
+        "isInsideString": """,
       },
     }
   `);
@@ -413,7 +413,7 @@ test("parseCss complete css with @media rule", () => {
               "type": "selector",
             },
           ],
-          "value": "url(\\"https://example.com\\")",
+          "value": "url("https://example.com")",
         },
         {
           "closed": true,
@@ -447,7 +447,7 @@ test("parseCss complete css with @media rule", () => {
               "type": "selector",
             },
           ],
-          "value": "url(\\"https://example.com\\")",
+          "value": "url("https://example.com")",
         },
         {
           "closed": true,
@@ -633,7 +633,7 @@ test("parseCss inComplete css 1 ending outside a // comment", () => {
 test("Handles escaped backslashes in strings", () => {
   expect(
     parseCss(`a { content: "\\\\"; }`).declarations[0].value,
-  ).toMatchInlineSnapshot('"\\"\\\\\\\\\\""');
+  ).toMatchInlineSnapshot(`""\\\\""`);
 });
 
 test("Handles empty declarations", () => {
@@ -651,7 +651,7 @@ test("Handles empty declarations", () => {
             "type": "selector",
           },
         ],
-        "value": "\\"blue\\"",
+        "value": ""blue"",
       },
       {
         "closed": true,
@@ -706,8 +706,8 @@ test("Handles newlines in property values", () => {
               "type": "selector",
             },
           ],
-          "value": "\\"line1
-      line2\\"",
+          "value": ""line1
+      line2"",
         },
       ]
     `);

packages/next-yak/loaders/__tests__/toCss.test.ts

@@ -131,8 +131,8 @@ test("handles escapes correctly", () => {
   ).toMatchInlineSnapshot(`
     "
     .foo {
-      content: \\"line1\\\\
-    line2\\";
+      content: "line1\\
+    line2";
     }"
   `);
 });