Fix next pages router style loading, add next snapshot tests

.changeset/purple-vans-juggle.md

@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/next-plugin': patch
+---
+
+Fixes Next.js pages router style loading in CSR, css output in SSR.

.changeset/small-carrots-hang.md

@@ -0,0 +1,11 @@
+---
+'@fixtures/features': patch
+'@fixtures/next-app-router': patch
+'@fixtures/next-pages-router': patch
+'@fixtures/recipes': patch
+'@fixtures/sprinkles': patch
+'@vanilla-extract-private/test-helpers': patch
+'@vanilla-extract-private/tests': patch
+---
+
+Add Next.js e2e snapshot tests

fixtures/features/src/html.ts

@@ -0,0 +1,12 @@
+import * as styles from './features.css';
+import testNodes from '../test-nodes.json';
+
+export default `
+    <div id="${testNodes.mergedStyle}" class="${styles.mergedStyle}">Merged style</div>
+    <div id="${testNodes.styleWithComposition}" class="${styles.styleWithComposition}">Style with composition</div>
+    <div id="${testNodes.styleVariantsWithComposition}" class="${styles.styleVariantsWithComposition.variant}">Style variants with composition</div>
+    <div id="${testNodes.styleVariantsWithMappedComposition}" class="${styles.styleVariantsWithMappedComposition.variant}">Style variants with mapped composition</div>
+    <div id="${testNodes.compositionOnly}" class="${styles.compositionOnly}">Composition only</div>
+    <div id="${testNodes.styleCompositionInSelector}" class="${styles.styleCompositionInSelector}">Style composition in selector</div>
+    <div id="${testNodes.styleVariantsCompositionInSelector}" class="${styles.styleVariantsCompositionInSelector.variant}">Style variants composition in selector</div>
+  `;

fixtures/features/src/index.ts

@@ -1,16 +1,7 @@
-import * as styles from './features.css';
-import testNodes from '../test-nodes.json';
+import html from './html';
 
 function render() {
-  document.body.innerHTML = `
-    <div id="${testNodes.mergedStyle}" class="${styles.mergedStyle}">Merged style</div>
-    <div id="${testNodes.styleWithComposition}" class="${styles.styleWithComposition}">Style with composition</div>
-    <div id="${testNodes.styleVariantsWithComposition}" class="${styles.styleVariantsWithComposition.variant}">Style variants with composition</div>
-    <div id="${testNodes.styleVariantsWithMappedComposition}" class="${styles.styleVariantsWithMappedComposition.variant}">Style variants with mapped composition</div>
-    <div id="${testNodes.compositionOnly}" class="${styles.compositionOnly}">Composition only</div>
-    <div id="${testNodes.styleCompositionInSelector}" class="${styles.styleCompositionInSelector}">Style composition in selector</div>
-    <div id="${testNodes.styleVariantsCompositionInSelector}" class="${styles.styleVariantsCompositionInSelector.variant}">Style variants composition in selector</div>
-  `;
+  document.body.innerHTML = html;
 }
 
 render();

fixtures/next-app-router/copyNextPlugin.cjs

@@ -0,0 +1,23 @@
+const path = require('path');
+const { cpSync, existsSync } = require('fs');
+
+// Copy next plugin dist files.
+// This is a workaround to prevent @vanilla-extract/next-plugin
+// resolving to next 12 peer dependency
+const main = () => {
+  const nextPluginDir = path.dirname(
+    require.resolve('@vanilla-extract/next-plugin/package.json'),
+  );
+
+  const nextPluginDistDir = path.join(nextPluginDir, 'dist');
+
+  if (!existsSync(nextPluginDistDir)) {
+    throw new Error('@vanilla-extract/next-plugin dist is missing.');
+  }
+
+  cpSync(nextPluginDistDir, path.join(process.cwd(), 'next-plugin', 'dist'), {
+    recursive: true,
+  });
+};
+
+main();

fixtures/next-app-router/next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

fixtures/next-app-router/next.config.js

@@ -0,0 +1,24 @@
+const {
+  createVanillaExtractPlugin,
+} = require('./next-plugin/dist/vanilla-extract-next-plugin.cjs.js');
+
+const withVanillaExtract = createVanillaExtractPlugin();
+
+/** @type {import('next').NextConfig} */
+const config = withVanillaExtract({
+  // exporting a static build for next 13
+  // due to issues with distDir on next custom server
+  output: 'export',
+  // we need to differentiate build and dev folders
+  // so they don't overwrite eachother when running tests
+  distDir: process.env.NODE_ENV === 'production' ? 'dist' : '.next',
+  experimental: {
+    externalDir: true,
+  },
+  onDemandEntries: {
+    // Make sure entries are not getting disposed.
+    maxInactiveAge: 1000 * 60 * 60,
+  },
+});
+
+module.exports = config;

fixtures/next-app-router/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@fixtures/next-app-router",
+  "description": "Next app router fixtures",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "pnpm copy-next-plugin && next dev",
+    "build": "pnpm copy-next-plugin && next build",
+    "start": "next start",
+    "clean-build": "pnpm clean && pnpm build",
+    "copy-next-plugin": "node ./copyNextPlugin.cjs",
+    "clean": "pnpm clean:dev && pnpm clean:prod",
+    "clean:dev": "rm -rf .next",
+    "clean:prod": "rm -rf dist"
+  },
+  "dependencies": {
+    "@fixtures/features": "*",
+    "@fixtures/recipes": "*",
+    "@fixtures/sprinkles": "*",
+    "@vanilla-extract/css": "*",
+    "@vanilla-extract/recipes": "*",
+    "@vanilla-extract/sprinkles": "*",
+    "next": "npm:next@13.5.4",
+    "react": "npm:react@^18.2.0",
+    "react-dom": "npm:react-dom@^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^17",
+    "@vanilla-extract/next-plugin": "*",
+    "@vanilla-extract/webpack-plugin": "*"
+  },
+  "browserslist": [
+    ">0.3%",
+    "ie 11",
+    "safari 4",
+    "not op_mini all"
+  ]
+}

fixtures/next-app-router/src/app/features/page.tsx

@@ -0,0 +1,10 @@
+import html from '@fixtures/features/src/html';
+
+export default function Features() {
+  return (
+    <>
+      <span id="features" />
+      <div dangerouslySetInnerHTML={{ __html: html }} />
+    </>
+  );
+}

fixtures/next-app-router/src/app/layout.tsx

@@ -0,0 +1,11 @@
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}

fixtures/next-app-router/src/app/page.tsx

@@ -0,0 +1,13 @@
+import Link from 'next/link';
+
+export default function Home() {
+  return (
+    <>
+      <Link href="/sprinkles">sprinkles</Link>
+      <br />
+      <Link href="/recipes">recipes</Link>
+      <br />
+      <Link href="/features">features</Link>
+    </>
+  );
+}

fixtures/next-app-router/src/app/recipes/page.tsx

@@ -0,0 +1,10 @@
+import html from '@fixtures/recipes/src/html';
+
+export default function Recipes() {
+  return (
+    <>
+      <span id="recipes" />
+      <div dangerouslySetInnerHTML={{ __html: html }} />
+    </>
+  );
+}

fixtures/next-app-router/src/app/sprinkles/page.tsx

@@ -0,0 +1,10 @@
+import html from '@fixtures/sprinkles/src/html';
+
+export default function Sprinkles() {
+  return (
+    <>
+      <span id="sprinkles" />
+      <div dangerouslySetInnerHTML={{ __html: html }} />
+    </>
+  );
+}

fixtures/next-app-router/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "forceConsistentCasingInFileNames": true,
+    "jsx": "preserve",
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "strictNullChecks": true
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    "dist/types/**/*.ts"
+  ],
+  "exclude": ["node_modules"]
+}

fixtures/next-pages-router/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

fixtures/next-pages-router/next.config.js

@@ -0,0 +1,19 @@
+const { createVanillaExtractPlugin } = require('@vanilla-extract/next-plugin');
+
+const withVanillaExtract = createVanillaExtractPlugin();
+
+/** @type {import('next').NextConfig} */
+const config = withVanillaExtract({
+  // we need to differentiate build and dev folders
+  // so they don't overwrite eachother when running tests
+  distDir: process.env.NODE_ENV === 'production' ? 'dist' : '.next',
+  experimental: {
+    externalDir: true,
+  },
+  onDemandEntries: {
+    // Make sure entries are not getting disposed.
+    maxInactiveAge: 1000 * 60 * 60,
+  },
+});
+
+module.exports = config;

fixtures/next-pages-router/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@fixtures/next-pages-router",
+  "description": "Next pages router fixtures",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "clean-build": "pnpm clean && next build",
+    "clean": "pnpm clean:dev && pnpm clean:prod",
+    "clean:dev": "rm -rf .next",
+    "clean:prod": "rm -rf dist"
+  },
+  "dependencies": {
+    "@fixtures/features": "*",
+    "@fixtures/recipes": "*",
+    "@fixtures/sprinkles": "*",
+    "@vanilla-extract/css": "*",
+    "@vanilla-extract/recipes": "*",
+    "@vanilla-extract/sprinkles": "*",
+    "next": "12.3.4",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "devDependencies": {
+    "@types/react": "^17",
+    "@vanilla-extract/next-plugin": "2.3.6"
+  },
+  "browserslist": [
+    ">0.3%",
+    "ie 11",
+    "safari 4",
+    "not op_mini all"
+  ]
+}

fixtures/next-pages-router/src/pages/features/index.tsx

@@ -0,0 +1,10 @@
+import html from '@fixtures/features/src/html';
+
+export default function Features() {
+  return (
+    <>
+      <span id="features" />
+      <div dangerouslySetInnerHTML={{ __html: html }} />
+    </>
+  );
+}

fixtures/next-pages-router/src/pages/index.tsx

@@ -0,0 +1,13 @@
+import Link from 'next/link';
+
+export default function Home() {
+  return (
+    <>
+      <Link href="/sprinkles">sprinkles</Link>
+      <br />
+      <Link href="/recipes">recipes</Link>
+      <br />
+      <Link href="/features">features</Link>
+    </>
+  );
+}

fixtures/next-pages-router/src/pages/recipes/index.tsx

@@ -0,0 +1,10 @@
+import html from '@fixtures/recipes/src/html';
+
+export default function Recipes() {
+  return (
+    <>
+      <span id="recipes" />
+      <div dangerouslySetInnerHTML={{ __html: html }} />
+    </>
+  );
+}

fixtures/next-pages-router/src/pages/sprinkles/index.tsx

@@ -0,0 +1,10 @@
+import html from '@fixtures/sprinkles/src/html';
+
+export default function Sprinkles() {
+  return (
+    <>
+      <span id="sprinkles" />
+      <div dangerouslySetInnerHTML={{ __html: html }} />
+    </>
+  );
+}

fixtures/next-pages-router/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "forceConsistentCasingInFileNames": true,
+    "jsx": "preserve",
+    "strictNullChecks": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}

fixtures/recipes/src/html.ts

@@ -0,0 +1,20 @@
+import { button, stack } from './styles.css';
+
+export default `<div class="${stack()}">
+    <button class="${button()}"> 
+      Standard calm button
+    </button>
+    <button class="${button({ size: 'small' })}"> 
+      Small calm button
+    </button>
+    <button class="${button({ tone: 'angry' })}"> 
+      Standard angry button
+    </button>
+    <button class="${button({
+      size: 'small',
+      tone: 'angry',
+      bold: true,
+    })}"> 
+      Small angry button
+    </button>
+  </div>`;

fixtures/recipes/src/index.ts

@@ -1,26 +1,7 @@
-import { button, stack } from './styles.css';
+import html from './html';
 
 function render() {
-  document.body.innerHTML = `
-  <div class="${stack()}">
-    <button class="${button()}"> 
-      Standard calm button
-    </button>
-    <button class="${button({ size: 'small' })}"> 
-      Small calm button
-    </button>
-    <button class="${button({ tone: 'angry' })}"> 
-      Standard angry button
-    </button>
-    <button class="${button({
-      size: 'small',
-      tone: 'angry',
-      bold: true,
-    })}"> 
-      Small angry button
-    </button>
-  </div>
-`;
+  document.body.innerHTML = html;
 }
 
 render();