Add Next.js plugin (#336)

Author: markdalgleish

.changeset/config.json

@@ -12,5 +12,10 @@
   "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
     "onlyUpdatePeerDependentsWhenOutOfRange": true
   },
-  "ignore": ["@fixtures/*", "test-helpers", "vanilla-extract-webpack-react"]
+  "ignore": [
+    "@fixtures/*",
+    "test-helpers",
+    "vanilla-extract-example-next",
+    "vanilla-extract-example-webpack-react"
+  ]
 }

.gitignore

@@ -13,4 +13,5 @@ packages/**/README.md
 !.yarn/plugins
 !.yarn/sdks
 !.yarn/versions
-.pnp.*
+.pnp.*
+.next

.prettierignore

@@ -9,3 +9,4 @@ README.md
 .github/ISSUE_TEMPLATE
 site/docs-manifest.json
 .changeset
+.next

README.md

@@ -56,7 +56,7 @@ export const exampleStyle = style({
 });
 ```
 
-> 💡 These `.css.ts` files will be evaluated at build time. None of the code in these files will be included in your final bundle. Think of it as using TypeScript as your preprocessor instead of Sass, Less, etc.
+> 💡 Once you've [configured your build tooling,](#setup) these `.css.ts` files will be evaluated at build time. None of the code in these files will be included in your final bundle. Think of it as using TypeScript as your preprocessor instead of Sass, Less, etc.
 
 **Then consume them in your markup.**
 
@@ -83,6 +83,7 @@ Want to work at a higher level while maximising style re-use? Check out  🍨 [S
   - [esbuild](#esbuild)
   - [Vite](#vite)
   - [Snowpack](#snowpack)
+  - [Next.js](#nextjs)
   - [Gatsby](#gatsby)
   - [Test environments](#test-environments)
   - [Configuration](#configuration)
@@ -285,6 +286,55 @@ npm install @vanilla-extract/css @vanilla-extract/snowpack-plugin
 
 > Please note: There are currently no automatic readable class names during development. However, you can still manually provide a debug ID as the last argument to functions that generate scoped styles, e.g. `export const className = style({ ... }, 'className');`
 
+### Next.js
+
+1. Install the dependencies.
+
+```bash
+npm install @vanilla-extract/css @vanilla-extract/babel-plugin @vanilla-extract/next-plugin
+```
+
+2. If you don't have a `.babelrc` file in the root of your project, create one. Add the [Babel](https://babeljs.io) plugin to your `.babelrc` file, ensuring that you're also including `"next/babel"` in your `presets` array.
+
+```json
+{
+  "presets": ["next/babel"],
+  "plugins": ["@vanilla-extract/babel-plugin"]
+}
+```
+
+3. If you don't have a `next.config.js` file in the root of your project, create one. Add the [Next.js](https://nextjs.org) plugin to your `next.config.js` file.
+
+> 💡 This plugin accepts an optional [configuration object](#configuration).
+
+```js
+const {
+  createVanillaExtractPlugin
+} = require('@vanilla-extract/next-plugin');
+const withVanillaExtract = createVanillaExtractPlugin();
+
+const nextConfig = {};
+
+module.exports = withVanillaExtract(nextConfig);
+```
+
+If required, this plugin can be composed with other plugins.
+
+```js
+const {
+  createVanillaExtractPlugin
+} = require('@vanilla-extract/next-plugin');
+const withVanillaExtract = createVanillaExtractPlugin();
+
+const withMDX = require('@next/mdx')({
+  extension: /\.mdx$/
+});
+
+const nextConfig = {};
+
+module.exports = withVanillaExtract(withMDX(nextConfig));
+```
+
 ### Gatsby
 
 To add to your [Gatsby](https://www.gatsbyjs.com) site, use the [gatsby-plugin-vanilla-extract](https://github.com/KyleAMathews/gatsby-plugin-vanilla-extract) plugin.

examples/next/.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["next/babel"],
+  "plugins": ["@vanilla-extract/babel-plugin"]
+}

examples/next/components/HelloWorld.css.ts

@@ -0,0 +1,11 @@
+import { style } from '@vanilla-extract/css';
+
+export const root = style({
+  background: 'pink',
+  color: 'blue',
+  padding: '16px',
+  transition: 'opacity .1s ease', // Testing autoprefixer
+  ':hover': {
+    opacity: 0.8,
+  },
+});

examples/next/components/HelloWorld.tsx

@@ -0,0 +1,9 @@
+import * as styles from './HelloWorld.css';
+
+export function HelloWorld() {
+  return (
+    <div className={styles.root}>
+      <h1>🧁 Hello from vanilla-extract!</h1>
+    </div>
+  );
+}

examples/next/next-env.d.ts

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

examples/next/next.config.js

@@ -0,0 +1,4 @@
+const { createVanillaExtractPlugin } = require('@vanilla-extract/next-plugin');
+const withVanillaExtract = createVanillaExtractPlugin();
+
+module.exports = withVanillaExtract();

examples/next/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "vanilla-extract-example-next",
+  "description": "Example project using vanilla-extract, compiling with Next.js",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "^11.0.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "devDependencies": {
+    "@types/react": "^17",
+    "@vanilla-extract/babel-plugin": "^1.0.1",
+    "@vanilla-extract/css": "^1.4.0",
+    "@vanilla-extract/next-plugin": "^1.0.0"
+  },
+  "browserslist": [
+    ">0.3%",
+    "not ie 11",
+    "not dead",
+    "not op_mini all"
+  ]
+}