remix-run · kentcdodds · Feb 25, 2022 · Jan 13, 2022 · Jan 13, 2022 · Jan 13, 2022
diff --git a/contributors.yml b/contributors.yml
@@ -54,6 +54,7 @@
 - graham42
 - GregBrimble
 - hardingmatt
+- helderburato
 - HenryVogt
 - hkan
 - Holben888

diff --git a/examples/emotion/.gitignore b/examples/emotion/.gitignore
@@ -0,0 +1,6 @@
+node_modules
+
+/.cache
+/build
+/public/build
+.env
diff --git a/examples/emotion/README.md b/examples/emotion/README.md
@@ -0,0 +1,33 @@
+# Example app with [emotion](https://emotion.sh/)
+
+This example features how to use [emotion](https://emotion.sh/) with Remix.
+
+## Preview
+
+Open this example on [CodeSandbox](https://codesandbox.io/):
+
+[![Open in CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/remix-run/remix/tree/main/examples/emotion)
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/routes/index.tsx`. The page auto-updates as you edit the file.
+
+## Commands
+
+- `dev`: runs your application on `localhost:3000`
+- `build`: creates the production build version
+- `start`: starts a simple server with the build production code
+
+## Related Links
+
+[Emotion](https://emotion.sh/)
diff --git a/examples/emotion/app/StylesContext.tsx b/examples/emotion/app/StylesContext.tsx
@@ -0,0 +1,2 @@
+import { createContext } from "react";
+export default createContext<null | string>(null);
diff --git a/examples/emotion/app/entry.client.tsx b/examples/emotion/app/entry.client.tsx
@@ -0,0 +1,4 @@
+import { hydrate } from "react-dom";
+import { RemixBrowser } from "remix";
+
+hydrate(<RemixBrowser />, document);
diff --git a/examples/emotion/app/entry.server.tsx b/examples/emotion/app/entry.server.tsx
@@ -0,0 +1,44 @@
+import ReactDOMServer from "react-dom/server";
+import { CacheProvider } from "@emotion/react";
+import { renderToString } from "react-dom/server";
+import { RemixServer } from "remix";
+import createEmotionServer from "@emotion/server/create-instance";
+import createCache from "@emotion/cache";
+import StylesContext from "./StylesContext";
+import type { EntryContext } from "remix";
+
+const key = "remix-emotion";
+const cache = createCache({ key });
+const { extractCriticalToChunks, constructStyleTagsFromChunks } =
+  createEmotionServer(cache);
+
+export default function handleRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext
+) {
+  const html = renderToString(
+    <CacheProvider value={cache}>
+      <StylesContext.Provider value={null}>
+        <RemixServer context={remixContext} url={request.url} />
+      </StylesContext.Provider>
+    </CacheProvider>
+  );
+
+  const chunks = extractCriticalToChunks(html);
+  const styles = constructStyleTagsFromChunks(chunks);
+
+  const markup = ReactDOMServer.renderToString(
+    <StylesContext.Provider value={styles}>
+      <RemixServer context={remixContext} url={request.url} />
+    </StylesContext.Provider>
+  );
+
+  responseHeaders.set("Content-Type", "text/html");
+
+  return new Response("<!DOCTYPE html>" + markup, {
+    status: responseStatusCode,
+    headers: responseHeaders
+  });
+}
diff --git a/examples/emotion/app/root.tsx b/examples/emotion/app/root.tsx
@@ -0,0 +1,37 @@
+import {
+  Links,
+  LiveReload,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration
+} from "remix";
+import { useContext } from "react";
+import StylesContext from "./StylesContext";
+import type { MetaFunction } from "remix";
+
+export const meta: MetaFunction = () => {
+  return { title: "New Remix App" };
+};
+
+export default function App() {
+  const styles = useContext(StylesContext);
+
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
+        <Meta />
+        <Links />
+        {styles}
+      </head>
+      <body>
+        <Outlet />
+        <ScrollRestoration />
+        <Scripts />
+        <LiveReload />
+      </body>
+    </html>
+  );
+}
diff --git a/examples/emotion/app/routes/index.tsx b/examples/emotion/app/routes/index.tsx
@@ -0,0 +1,39 @@
+import styled from "@emotion/styled";
+
+export default function Index() {
+  return (
+    <Container>
+      <h1>Welcome to Remix</h1>
+      <ul>
+        <li>
+          <a
+            target="_blank"
+            href="https://remix.run/tutorials/blog"
+            rel="noreferrer"
+          >
+            15m Quickstart Blog Tutorial
+          </a>
+        </li>
+        <li>
+          <a
+            target="_blank"
+            href="https://remix.run/tutorials/jokes"
+            rel="noreferrer"
+          >
+            Deep Dive Jokes App Tutorial
+          </a>
+        </li>
+        <li>
+          <a target="_blank" href="https://remix.run/docs" rel="noreferrer">
+            Remix Docs
+          </a>
+        </li>
+      </ul>
+    </Container>
+  );
+}
+
+const Container = styled("div")`
+  font-family: "system-ui, sans-serif";
+  line-height: 1.4;
+`;