add emotion support

joelhooks · joelhooks · commit 61e355685368 · 2020-11-10T11:21:17.000-08:00
diff --git a/.babelrc b/.babelrc
@@ -1,3 +1,3 @@
 {
-  "presets": ["next/babel"]
+  "presets": ["next/babel", "@emotion/babel-preset-css-prop"]
 }
diff --git a/README.md b/README.md
@@ -1,18 +1,28 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+This is an opinonated Next.js starter project that makes it relatively simple to spin up a new project.
 
 ## Getting Started
 
 First, run the development server:
 
 ```bash
-npm run dev
-# or
 yarn dev
 ```
 
+If you'd like serverless function support:
+
+```bash
+vercel dev
+```
+
+I'm personally in the "just do Next.js the Vercel way because it gives me modern best practices without a lot of friction" but if you've got other preferences you probably know how to manage them anyway.
+
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+You can start editing the page by modifying `src/pages/index.js`. The page auto-updates as you edit the file.
+
+You can also add mdx files in `src/pages/` and they will be presented at the cooresponding route.
+
+Tailwind and
 
 ## Learn More
 
diff --git a/package.json b/package.json
@@ -10,8 +10,13 @@
     "test": "jest --watch"
   },
   "dependencies": {
+    "@emotion/babel-preset-css-prop": "^10.2.1",
+    "@emotion/core": "^10.1.1",
+    "@emotion/styled": "^10.0.27",
     "@next/mdx": "^10.0.1",
     "dotenv-flow": "^3.2.0",
+    "emotion": "^10.0.27",
+    "emotion-server": "^10.0.27",
     "husky": "^4.3.0",
     "lint-staged": "^10.5.1",
     "mdx-prism": "^0.3.1",
@@ -31,7 +36,7 @@
     "@babel/plugin-transform-react-jsx": "^7.12.5",
     "@tailwindcss/typography": "^0.2.0",
     "@testing-library/jest-dom": "^5.11.5",
-    "@testing-library/react": "^11.11.1",
+    "@testing-library/react": "^11.1.1",
     "@types/node": "^14.14.7",
     "@types/react": "^16.9.56",
     "babel-jest": "^26.6.3",
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -0,0 +1,45 @@
+import * as React from 'react'
+import Document, {
+  Html,
+  Head,
+  Main,
+  NextScript,
+  DocumentContext,
+} from 'next/document'
+import {extractCritical} from 'emotion-server'
+
+export default class MyDocument extends Document {
+  static async getInitialProps(ctx: DocumentContext) {
+    const initialProps = await Document.getInitialProps(ctx)
+    const styles = extractCritical(initialProps.html)
+    return {
+      ...initialProps,
+      styles: (
+        <>
+          {initialProps.styles}
+          <style
+            data-emotion-css={styles.ids.join(' ')}
+            dangerouslySetInnerHTML={{__html: styles.css}}
+          />
+        </>
+      ),
+    }
+  }
+
+  render() {
+    return (
+      <Html>
+        <Head>
+          <link
+            rel="icon"
+            href="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/271/cloud-with-lightning-and-rain_26c8-fe0f.png"
+          />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
+}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,3 +1,4 @@
+import {jsx} from '@emotion/core'
 import Head from 'next/head'
 
 export default function Home() {
@@ -8,7 +9,9 @@ export default function Home() {
         <link rel="icon" href="/favicon.ico" />
       </Head>
 
-      <h1 className="text-3xl text-pink-500">Welcome to Your App</h1>
+      <h1 className="text-3xl text-pink-500" css={{backgroundColor: 'teal'}}>
+        Welcome to Your App
+      </h1>
     </div>
   )
 }
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,3 @@`
`1`	`1`	`{`
`2`		`- "presets": ["next/babel"]`
	`2`	`+ "presets": ["next/babel", "@emotion/babel-preset-css-prop"]`
`3`	`3`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+import {jsx} from '@emotion/core'`
`1`	`2`	`import Head from 'next/head'`
`2`	`3`
`3`	`4`	`export default function Home() {`
`@@ -8,7 +9,9 @@ export default function Home() {`
`8`	`9`	`<link rel="icon" href="/favicon.ico" />`
`9`	`10`	`</Head>`
`10`	`11`
`11`		`- <h1 className="text-3xl text-pink-500">Welcome to Your App</h1>`
	`12`	`+ <h1 className="text-3xl text-pink-500" css={{backgroundColor: 'teal'}}>`
	`13`	`+ Welcome to Your App`
	`14`	`+ </h1>`
`12`	`15`	`</div>`
`13`	`16`	`)`
`14`	`17`	`}`