turbopack support

.changeset/fresh-wombats-stick.md

@@ -0,0 +1,6 @@
+---
+'@vanilla-extract/turbopack-plugin': minor
+'@vanilla-extract/next-plugin': minor
+---
+
+Add turbopack support for next.js >= 16.0.0

.changeset/green-years-yawn.md

@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/compiler': minor
+---
+
+add `unstable_splitCssPerRule` option, generate one CSS import per rule instead of one per file. used by turbopack.

.changeset/heavy-boxes-protect.md

@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/compiler': minor
+---
+
+add `unstable_invalidateAllModules` to manually clear module cache

.changeset/slimy-poems-wonder.md

@@ -0,0 +1,8 @@
+---
+'@vanilla-extract/compiler': patch
+'@vanilla-extract/css': patch
+'@vanilla-extract/turbopack-plugin': patch
+'@vanilla-extract/next-plugin': patch
+---
+
+turbopack: improve CSS deduplication

.changeset/tough-mails-jog.md

@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/compiler': minor
+---
+
+the `cssImportSpecifier` option receives the css content in addition to the module id

.gitignore

@@ -12,3 +12,4 @@ test-results
 .next
 .DS_Store
 .idea
+next-env.d.ts

.prettierignore

@@ -12,3 +12,4 @@ pnpm-lock.yaml
 *-snapshots
 test-results
 examples/remix/build
+.pnpm-store

fixtures/next-pages-router/package.json → fixtures/next-12-pages-router/package.json

@@ -1,14 +1,12 @@
 {
-  "name": "@fixtures/next-pages-router",
+  "name": "@fixtures/next-12-pages-router",
   "description": "Next pages router fixtures",
   "version": "0.0.7",
   "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"
   },

fixtures/next-pages-router/tsconfig.json → fixtures/next-12-pages-router/tsconfig.json

@@ -3,7 +3,9 @@
   "compilerOptions": {
     "forceConsistentCasingInFileNames": true,
     "jsx": "preserve",
-    "strictNullChecks": true
+    "strictNullChecks": true,
+    "module": "esnext",
+    "moduleResolution": "node"
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"]

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

@@ -6,9 +6,6 @@ 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',

fixtures/next-app-router/package.json → fixtures/next-13-app-router/package.json

@@ -1,14 +1,12 @@
 {
-  "name": "@fixtures/next-app-router",
+  "name": "@fixtures/next-13-app-router",
   "description": "Next app router fixtures",
   "version": "0.0.7",
   "private": true,
   "scripts": {
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "clean-build": "pnpm clean && pnpm build",
-    "clean": "pnpm clean:dev && pnpm clean:prod",
     "clean:dev": "rm -rf .next",
     "clean:prod": "rm -rf dist"
   },
@@ -19,7 +17,7 @@
     "@vanilla-extract/css": "workspace:*",
     "@vanilla-extract/recipes": "workspace:*",
     "@vanilla-extract/sprinkles": "workspace:*",
-    "next": "npm:next@13.5.4",
+    "next": "npm:next@13.5.11",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

fixtures/next-app-router/tsconfig.json → fixtures/next-13-app-router/tsconfig.json

@@ -8,7 +8,8 @@
         "name": "next"
       }
     ],
-    "strictNullChecks": true
+    "strictNullChecks": true,
+    "module": "esnext"
   },
   "include": [
     "next-env.d.ts",

fixtures/next-16-app-pages-router/next.config.ts

@@ -0,0 +1,13 @@
+import { NextConfig } from 'next';
+import { createVanillaExtractPlugin } from './next-plugin/dist/vanilla-extract-next-plugin.cjs.js';
+const withVanillaExtract = createVanillaExtractPlugin();
+
+export const config: NextConfig = {
+  distDir: process.env.NEXT_DIST_DIR || '.next',
+  experimental: { externalDir: true },
+  onDemandEntries: { maxInactiveAge: 1000 * 60 * 60 },
+  transpilePackages: ['@fixtures/sprinkles/src/html'],
+  devIndicators: false,
+};
+
+export default withVanillaExtract(config);

fixtures/next-16-app-pages-router/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@fixtures/next-16-app-pages-router",
+  "version": "0.0.1",
+  "private": true,
+  "description": "Next 16 fixture with app + pages routers; supports webpack and turbopack builds",
+  "scripts": {
+    "dev-webpack": "NEXT_DIST_DIR=.next/webpack next dev --webpack",
+    "dev-turbo": "NEXT_DIST_DIR=.next/turbo next dev --turbo",
+    "build-webpack": "NEXT_DIST_DIR=dist/webpack next build --webpack",
+    "start-webpack": "NEXT_DIST_DIR=dist/webpack next start",
+    "build-turbo": "NEXT_DIST_DIR=dist/turbo next build --turbo",
+    "start-turbo": "NEXT_DIST_DIR=dist/turbo next start",
+    "clean:dev": "rm -rf .next",
+    "clean:prod": "rm -rf dist"
+  },
+  "dependencies": {
+    "@fixtures/features": "workspace:*",
+    "@fixtures/recipes": "workspace:*",
+    "@fixtures/sprinkles": "workspace:*",
+    "@vanilla-extract/css": "workspace:*",
+    "@vanilla-extract/recipes": "workspace:*",
+    "@vanilla-extract/sprinkles": "workspace:*",
+    "next": "npm:next@^16.0.0",
+    "react": "npm:react@^19.2.0",
+    "react-dom": "npm:react-dom@^19.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.55",
+    "@vanilla-extract/next-plugin": "workspace:*",
+    "@vanilla-extract/webpack-plugin": "workspace:*"
+  }
+}

fixtures/next-16-app-pages-router/src/app/creepster/page.tsx

@@ -0,0 +1,9 @@
+import { creepsterText } from '../../styles/creepster.css';
+
+export default function CreepsterPage() {
+  return (
+    <div className={creepsterText}>
+      This text should look scary (Creepster Font)
+    </div>
+  );
+}

fixtures/next-16-app-pages-router/src/app/duplication-test/a-plain.css.ts

@@ -0,0 +1,5 @@
+import { globalStyle } from '@vanilla-extract/css';
+
+globalStyle('body', {
+  backgroundColor: '#0cdbcd',
+});

fixtures/next-16-app-pages-router/src/app/duplication-test/a.css.ts

@@ -0,0 +1,9 @@
+import { globalStyle, style } from '@vanilla-extract/css';
+
+globalStyle('body', {
+  backgroundColor: '#0cdbcd',
+});
+
+export const a = style({
+  border: '1px solid black',
+});

fixtures/next-16-app-pages-router/src/app/duplication-test/b-plain.css.ts

@@ -0,0 +1,5 @@
+import { globalStyle } from '@vanilla-extract/css';
+
+globalStyle('body', {
+  backgroundColor: '#0cdbcd',
+});

fixtures/next-16-app-pages-router/src/app/duplication-test/b.css.ts

@@ -0,0 +1,9 @@
+import { globalStyle, style } from '@vanilla-extract/css';
+
+globalStyle('body', {
+  backgroundColor: '#0cdbcd',
+});
+
+export const b = style({
+  border: '1px solid red',
+});

fixtures/next-16-app-pages-router/src/app/duplication-test/extra/c-plain.css.ts

@@ -0,0 +1,5 @@
+import { globalStyle } from '@vanilla-extract/css';
+
+globalStyle('body', {
+  backgroundColor: '#0cdbcd',
+});

fixtures/next-16-app-pages-router/src/app/duplication-test/extra/c.css.ts

@@ -0,0 +1,9 @@
+import { globalStyle, style } from '@vanilla-extract/css';
+
+globalStyle('body', {
+  backgroundColor: '#0cdbcd',
+});
+
+export const c = style({
+  border: '1px solid black',
+});

fixtures/next-16-app-pages-router/src/app/duplication-test/page.tsx

@@ -0,0 +1,18 @@
+import './a-plain.css';
+import { a } from './a.css';
+import './b-plain.css';
+import { b } from './b.css';
+import './extra/c-plain.css';
+import { c } from './extra/c.css';
+
+export default function DuplicationTestPage() {
+  return (
+    <div>
+      <div className={a}>
+        <div className={b}>
+          <div className={c}>duplication test</div>
+        </div>
+      </div>
+    </div>
+  );
+}

fixtures/next-16-app-pages-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-16-app-pages-router/src/app/function-serializer/page.tsx

@@ -0,0 +1,12 @@
+import { RedBox, BlueText } from './source.css';
+
+export default function Page() {
+  return (
+    <div>
+      <h1>Function Serializer Test</h1>
+      <RedBox>
+        This should be a red box with <BlueText>blue text</BlueText> inside
+      </RedBox>
+    </div>
+  );
+}

fixtures/next-16-app-pages-router/src/app/function-serializer/runtime.tsx

@@ -0,0 +1,14 @@
+export function runtimeStyled<Tag extends keyof JSX.IntrinsicElements>(
+  tag: Tag,
+  className: string,
+) {
+  return function Component(props: React.ComponentProps<Tag>) {
+    const Element = tag as any;
+    return (
+      <Element
+        {...props}
+        className={[props.className, className].filter(Boolean).join(' ')}
+      />
+    );
+  };
+}

fixtures/next-16-app-pages-router/src/app/function-serializer/source.css.ts

@@ -0,0 +1,12 @@
+import { styled } from './styled';
+
+export const RedBox = styled('div', {
+  backgroundColor: 'red',
+  color: 'white',
+  padding: '20px',
+});
+
+export const BlueText = styled('span', {
+  color: 'blue',
+  fontWeight: 'bold',
+});

fixtures/next-16-app-pages-router/src/app/function-serializer/styled.ts

@@ -0,0 +1,28 @@
+import { addFunctionSerializer } from '@vanilla-extract/css/functionSerializer';
+import { style, type StyleRule } from '@vanilla-extract/css';
+import { runtimeStyled } from './runtime';
+import React from 'react';
+
+if (React.version.includes('canary')) {
+  throw new Error(
+    'detected vendored React in styles, this will cause errors in some projects',
+  );
+}
+
+export function styled<Tag extends keyof JSX.IntrinsicElements>(
+  tag: Tag,
+  styles: StyleRule,
+) {
+  const className = style(styles);
+  const args = [tag, className] as const;
+
+  const Component = runtimeStyled(...args);
+
+  addFunctionSerializer(Component, {
+    importPath: './runtime',
+    importName: 'runtimeStyled',
+    args,
+  });
+
+  return Component;
+}

fixtures/next-16-app-pages-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-16-app-pages-router/src/app/next-font/page.tsx

@@ -0,0 +1,41 @@
+import * as directFonts from '../../styles/fonts';
+import { pickedValues } from '../../styles/nextFont.css';
+
+export default function NextFontChecks() {
+  const pairs: Array<
+    [string, string | number | undefined, string | number | undefined]
+  > = [];
+
+  for (const [name, vePicked] of Object.entries(pickedValues)) {
+    const direct = directFonts[name as keyof typeof directFonts];
+    const style = direct?.style || {};
+    pairs.push([`${name} family`, vePicked.fontFamily, style.fontFamily]);
+    pairs.push([`${name} weight`, vePicked.fontWeight, style.fontWeight]);
+    pairs.push([`${name} style`, vePicked.fontStyle, style.fontStyle]);
+  }
+
+  pairs.sort((a, b) => a[0].localeCompare(b[0]));
+
+  for (const [name, fromVe, direct] of pairs) {
+    if (String(fromVe) !== String(direct)) {
+      throw new Error(
+        `[next-font] mismatch for ${name}:\n${String(fromVe)} !==\n${String(
+          direct,
+        )}`,
+      );
+    }
+  }
+
+  return (
+    <div id="next-font-checks-16">
+      <h2>next 16 next/font comparisons</h2>
+      <ul>
+        {pairs.map(([name, fromVe, direct]) => (
+          <li key={name} data-name={name} data-ve={fromVe} data-direct={direct}>
+            {name}: {fromVe}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

fixtures/next-16-app-pages-router/src/app/next-image/image.css.ts

@@ -0,0 +1,13 @@
+import logo from './logo.png';
+import { style } from '@vanilla-extract/css';
+import type { StaticImageData } from 'next/image';
+
+// types are funky because of our monorepo setup
+const withCast = logo as unknown as StaticImageData;
+
+export const imageStyle = style({
+  backgroundImage: `url(${withCast.src})`,
+  width: `${withCast.width}px`,
+  height: `${withCast.height}px`,
+  border: '1px solid red',
+});

fixtures/next-16-app-pages-router/src/app/next-image/page.tsx

@@ -0,0 +1,5 @@
+import { imageStyle } from './image.css';
+
+export default function NextImagePage() {
+  return <div className={imageStyle}>Next Image Page</div>;
+}