Update Vanilla Extract Example (#50394)

### What? - Adds an updated Vanilla Extract example - ~~Note that `@vanilla-extract/next-plugin` currently requires `experimental: { appDir: true }` to be set.~~ ### Why? - The [documentation](https://nextjs.org/docs/app/building-your-application/styling/css-in-js) currently links to a [personal repo](https://github.com/SuttonJack/vanilla-extract-app-dir) - Closes SuttonJack/vanilla-extract-app-dir#2 <p align="center"><img width="600" src="https://github.com/vercel/next.js/assets/92991945/eeab322e-e75e-4999-9fe7-39aa15c45c11" /></p> -->
vercel · May 27, 2023 · 27655db · 27655db
1 parent 10b82ba
commit 27655db
Show file tree

Hide file tree

Showing 16 changed files with 303 additions and 1 deletion.
diff --git a/examples/with-vanilla-extract/README.md b/examples/with-vanilla-extract/README.md
@@ -1,3 +1,27 @@
 # Next.js + vanilla-extract Example
 
-The official vanilla-extract repository maintains an example in [examples/next](https://github.com/vanilla-extract-css/vanilla-extract/tree/master/examples/next)
+This example demonstrates usage of [Vanilla Extract](https://vanilla-extract.style/) with the app directory.
+
+## Deploy your own
+
+Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-vanilla-extract&project-name=with-vanilla-extract&repository-name=with-vanilla-extract)
+
+## How to use
+
+Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-vanilla-extract with-vanilla-extract-app
+```
+
+```bash
+yarn create next-app --example with-vanilla-extract with-vanilla-extract-app
+```
+
+```bash
+pnpm create next-app --example with-vanilla-extract with-vanilla-extract-app
+```
+
+Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
diff --git a/examples/with-vanilla-extract/app/globalStyle.css.ts b/examples/with-vanilla-extract/app/globalStyle.css.ts
@@ -0,0 +1,42 @@
+import { globalStyle } from '@vanilla-extract/css'
+
+globalStyle('html, body', {
+  height: '100%',
+})
+
+globalStyle('*, *::before, *::after', {
+  boxSizing: 'border-box',
+  WebkitFontSmoothing: 'antialiased',
+  MozOsxFontSmoothing: 'grayscale',
+})
+
+globalStyle('body', {
+  display: 'flex',
+  flexDirection: 'column',
+  margin: '0',
+  fontFamily:
+    "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif",
+  background: '#000',
+  color: '#fff',
+  padding: '0 16px',
+  backgroundSize: 'cover',
+  backgroundPosition: 'center center',
+  backgroundRepeat: 'no-repeat',
+})
+
+globalStyle('h1, h2, h3, h4, p', {
+  margin: 0,
+})
+
+globalStyle('main', {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flexDirection: 'column',
+  position: 'relative',
+  width: '100%',
+  height: '100%',
+  maxWidth: '720px',
+  margin: '0 auto',
+  overflow: 'hidden',
+})
diff --git a/examples/with-vanilla-extract/app/layout.tsx b/examples/with-vanilla-extract/app/layout.tsx
@@ -0,0 +1,13 @@
+import './globalStyle.css'
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/examples/with-vanilla-extract/app/page.css.ts b/examples/with-vanilla-extract/app/page.css.ts
@@ -0,0 +1,7 @@
+import { style } from '@vanilla-extract/css'
+
+export const page = style({
+  display: 'grid',
+  gap: '1em',
+  placeContent: 'center',
+})
diff --git a/examples/with-vanilla-extract/app/page.tsx b/examples/with-vanilla-extract/app/page.tsx
@@ -0,0 +1,17 @@
+import * as styles from './page.css.ts'
+
+import Logo from '@/components/Logo'
+import Button from '@/components/Button'
+import Footer from '@/components/Footer'
+
+export default function Home() {
+  return (
+    <>
+      <main className={styles.page}>
+        <Logo />
+        <Button>Button</Button>
+      </main>
+      <Footer />
+    </>
+  )
+}
diff --git a/examples/with-vanilla-extract/components/Button.css.ts b/examples/with-vanilla-extract/components/Button.css.ts
@@ -0,0 +1,40 @@
+import { style } from '@vanilla-extract/css'
+
+export const button = style({
+  WebkitFontSmoothing: 'antialiased',
+  WebkitTapHighlightColor: 'transparent',
+  alignItems: 'center',
+  background: '#FFF',
+  borderRadius: '5px',
+  border: '1px solid #FFF',
+  boxSizing: 'border-box',
+  colorScheme: 'dark',
+  color: '#000',
+  cursor: 'pointer',
+  display: 'flex',
+  fontSize: '0.875rem',
+  fontWeight: 500,
+  font: 'inherit',
+  height: '40px',
+  justifyContent: 'center',
+  lineHeight: '1.25em',
+  margin: '0',
+  maxWidth: '200px',
+  minWidth: '200px',
+  outline: 'none',
+  padding: '0 12px',
+  position: 'relative',
+  textDecoration: 'none',
+  textSizeAdjust: '100%',
+  transitionDuration: '.15s',
+  transitionProperty: 'border-color, background, color, box-shadow',
+  transitionTimingFunction: 'ease',
+  userSelect: 'none',
+  verticalAlign: 'baseline',
+  ':hover': {
+    boxShadow: 'none',
+    background: 'transparent',
+    color: '#FFF',
+    border: '1px solid #FFF',
+  },
+})
diff --git a/examples/with-vanilla-extract/components/Button.tsx b/examples/with-vanilla-extract/components/Button.tsx
@@ -0,0 +1,11 @@
+'use client'
+
+import * as styles from './Button.css.ts'
+
+export default function Button({ children }) {
+  return (
+    <button onClick={() => console.log('click')} className={styles.button}>
+      {children}
+    </button>
+  )
+}
diff --git a/examples/with-vanilla-extract/components/Footer.css.ts b/examples/with-vanilla-extract/components/Footer.css.ts
@@ -0,0 +1,38 @@
+import { style } from '@vanilla-extract/css'
+
+export const footer = style({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'flex-end',
+  position: 'relative',
+  bottom: '0',
+  left: '0',
+  width: '100%',
+  textAlign: 'center',
+  padding: '48px',
+  boxSizing: 'border-box',
+  fontSize: '16px',
+  '@media': {
+    '(min-width: 0px) and (max-width: 768px)': {
+      flexDirection: 'column',
+      alignItems: 'center',
+      gap: '24px',
+    },
+  },
+})
+
+export const details = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '12px',
+  fontSize: 'inherit',
+  color: '#fff',
+  margin: 'auto',
+})
+
+export const link = style({
+  height: 'fit-content',
+  color: 'inherit',
+  textDecorationThickness: '1px',
+  textUnderlineOffset: '3px',
+})
diff --git a/examples/with-vanilla-extract/components/Footer.tsx b/examples/with-vanilla-extract/components/Footer.tsx
@@ -0,0 +1,30 @@
+import * as styles from './Footer.css.ts'
+
+export default function Footer() {
+  return (
+    <footer className={styles.footer}>
+      <div className={styles.details}>
+        <p>
+          Built with{' '}
+          <a
+            className={styles.link}
+            target="_blank"
+            href="https://nextjs.org"
+            rel="noreferrer"
+          >
+            Next.js
+          </a>{' '}
+          and{' '}
+          <a
+            className={styles.link}
+            target="_blank"
+            href="https://vanilla-extract.style/"
+            rel="noreferrer"
+          >
+            Vanilla Extract
+          </a>{' '}
+        </p>
+      </div>
+    </footer>
+  )
+}
diff --git a/examples/with-vanilla-extract/components/Logo.css.ts b/examples/with-vanilla-extract/components/Logo.css.ts
@@ -0,0 +1,8 @@
+import { style } from '@vanilla-extract/css'
+
+export const container = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  marginBottom: '2em',
+})
diff --git a/examples/with-vanilla-extract/components/Logo.tsx b/examples/with-vanilla-extract/components/Logo.tsx
@@ -0,0 +1,16 @@
+import Image from 'next/image'
+import * as styles from './Logo.css.ts'
+
+export default function Logo() {
+  return (
+    <div className={styles.container}>
+      <Image
+        priority
+        src="/logo.png"
+        width={152}
+        height={180}
+        alt="Vanilla Extract logo"
+      />
+    </div>
+  )
+}
diff --git a/examples/with-vanilla-extract/next-env.d.ts b/examples/with-vanilla-extract/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.
diff --git a/examples/with-vanilla-extract/next.config.js b/examples/with-vanilla-extract/next.config.js
@@ -0,0 +1,4 @@
+const { createVanillaExtractPlugin } = require('@vanilla-extract/next-plugin')
+const withVanillaExtract = createVanillaExtractPlugin()
+
+module.exports = withVanillaExtract()
diff --git a/examples/with-vanilla-extract/package.json b/examples/with-vanilla-extract/package.json
@@ -0,0 +1,19 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@vanilla-extract/css": "^1.11.0",
+    "@vanilla-extract/next-plugin": "^2.1.3",
+    "@types/node": "18.15.11",
+    "@types/react": "18.0.34",
+    "@types/react-dom": "18.0.11",
+    "next": "latest",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "typescript": "5.0.4"
+  }
+}
diff --git a/examples/with-vanilla-extract/public/logo.png b/examples/with-vanilla-extract/public/logo.png
diff --git a/examples/with-vanilla-extract/tsconfig.json b/examples/with-vanilla-extract/tsconfig.json
@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}