remix-run · himorishige · Jan 22, 2022 · Jan 22, 2022 · Jan 22, 2022 · Jan 22, 2022
diff --git a/contributors.yml b/contributors.yml
@@ -58,6 +58,7 @@
 - GregBrimble
 - hardingmatt
 - HenryVogt
+- himorishige
 - hkan
 - Holben888
 - hollandThomas

diff --git a/examples/emotion-css-prop/.gitignore b/examples/emotion-css-prop/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+
+/.cache
+/build
+/public/build
diff --git a/examples/emotion-css-prop/README.md b/examples/emotion-css-prop/README.md
@@ -0,0 +1,26 @@
+# Example app with [Emotion](https://emotion.sh/docs/introduction) - css Prop
+
+This example features how to use [Emotion](https://emotion.sh/docs/introduction) - css Prop with Remix.
+
+## Preview
+
+Open this example on [CodeSandbox](https://codesandbox.com):
+
+[![Open in CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/remix-run/remix/tree/main/examples/emotion-css-prop)
+
+## Example
+
+This example shows how to use Emotion - css Prop with Remix.
+
+Relevant files:
+
+- [app/root.tsx](./app/root.tsx) - This is where we render the app and if we're rendering on the server we have placeholder text of __STYLES__.
+- [app/entry.server.tsx](./app/entry.server.tsx) - This is where we render the app on the server and replace __STYLES__ with the styles that emotion collect.
+- [app/routes/index.tsx](./app/routes/index.tsx)  - Here's where we use the css Prop to styling component.
+- [tsconfig.json](./tsconfig.json) - Add `jsxImportSource` to use the css Prop in tsx file.
+
+## Related Links
+
+- [Emotion](https://emotion.sh/docs/introduction)
+- [The css Prop](https://emotion.sh/docs/css-prop)
+- [emotion-reset](https://github.com/sayegh7/emotion-reset)
diff --git a/examples/emotion-css-prop/app/entry.client.tsx b/examples/emotion-css-prop/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-css-prop/app/entry.server.tsx b/examples/emotion-css-prop/app/entry.server.tsx
@@ -0,0 +1,56 @@
+import createCache from "@emotion/cache";
+import { CacheProvider, css, Global } from "@emotion/react";
+import createEmotionServer from "@emotion/server/create-instance";
+import emotionReset from "emotion-reset";
+import { renderToString } from "react-dom/server";
+import type { EntryContext } from "remix";
+import { RemixServer } from "remix";
+import { StylesProvider } from "./styles-context";
+
+const key = "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}>
+      <StylesProvider value={null}>
+        <RemixServer context={remixContext} url={request.url} />
+      </StylesProvider>
+    </CacheProvider>
+  );
+
+  const chunks = extractCriticalToChunks(html);
+  const styles = constructStyleTagsFromChunks(chunks);
+
+  const markup = renderToString(
+    <StylesProvider value={styles}>
+      {/* Set the global style. */}
+      <Global
+        styles={css`
+          ${emotionReset}
+          *, *::after, *::before {
+            box-sizing: border-box;
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            font-smoothing: antialiased;
+          }
+        `}
+      />
+      <RemixServer context={remixContext} url={request.url} />
+    </StylesProvider>
+  );
+
+  responseHeaders.set("Content-Type", "text/html");
+
+  return new Response("<!DOCTYPE html>" + markup, {
+    status: responseStatusCode,
+    headers: responseHeaders
+  });
+}
diff --git a/examples/emotion-css-prop/app/root.tsx b/examples/emotion-css-prop/app/root.tsx
@@ -0,0 +1,51 @@
+import {
+  Links,
+  LiveReload,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+  useCatch
+} from "remix";
+import { useStyles } from "./styles-context";
+
+export default function App() {
+  const styles = useStyles();
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
+        <Meta />
+        <Links />
+        {typeof document === "undefined" ? null : styles}
+      </head>
+      <body>
+        <Outlet />
+        <ScrollRestoration />
+        <Scripts />
+        <LiveReload />
+      </body>
+    </html>
+  );
+}
+
+export function CatchBoundary() {
+  const caught = useCatch();
+  if (caught.status === 404) {
+    return (
+      <div>
+        <h1>{caught.statusText}</h1>
+      </div>
+    );
+  }
+  throw new Error(`Unhandled error: ${caught.status}`);
+}
+
+export function ErrorBoundary({ error }: { error: Error }) {
+  return (
+    <div>
+      <h1>{error.message}</h1>
+    </div>
+  );
+}
diff --git a/examples/emotion-css-prop/app/routes/index.tsx b/examples/emotion-css-prop/app/routes/index.tsx
@@ -0,0 +1,46 @@
+/** @jsx jsx */
+import { css, jsx } from "@emotion/react";
+import { useEffect, useState } from "react";
+import { Link, useCatch } from "remix";
+
+// Object Styles
+const wrapperStyle = {
+  height: "100vh",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center"
+};
+
+// String Styles
+const headingStyle = css`
+  font-size: 2rem;
+  color: hotpink;
+  transition: color 0.5s 0s ease;
+`;
+
+const headingDefaultStyle = css`
+  font-size: 2rem;
+`;
+
+export default function Index() {
+  const [state, setState] = useState(false);
+
+  useEffect(() => {
+    new Promise(resolve => setTimeout(resolve, 1000)).then(() => {
+      setState(true);
+    });
+  }, []);
+
+  return (
+    <div>
+      <header>
+        <Link to="/">Top Page</Link> | <Link to="/sub">Sub Page</Link>
+      </header>
+      <div css={wrapperStyle}>
+        <h1 css={state ? headingStyle : headingDefaultStyle}>
+          Welcome to Remix (With Emotion css Prop)
+        </h1>
+      </div>
+    </div>
+  );
+}
diff --git a/examples/emotion-css-prop/app/routes/sub.tsx b/examples/emotion-css-prop/app/routes/sub.tsx
@@ -0,0 +1,46 @@
+/** @jsx jsx */
+import { css, jsx } from "@emotion/react";
+import { useEffect, useState } from "react";
+import { Link } from "remix";
+
+// Object Styles
+const wrapperStyle = {
+  height: "100vh",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center"
+};
+
+// String Styles
+const headingStyle = css`
+  font-size: 2rem;
+  color: blue;
+  transition: color 0.5s 0s ease;
+`;
+
+const headingDefaultStyle = css`
+  font-size: 2rem;
+`;
+
+export default function Index() {
+  const [state, setState] = useState(false);
+
+  useEffect(() => {
+    new Promise(resolve => setTimeout(resolve, 1000)).then(() => {
+      setState(true);
+    });
+  }, []);
+
+  return (
+    <div>
+      <header>
+        <Link to="/">Top Page</Link> | <Link to="/sub">Sub Page</Link>
+      </header>
+      <div css={wrapperStyle}>
+        <h1 css={state ? headingStyle : headingDefaultStyle}>
+          Welcome to SubPage (With Emotion css Prop)
+        </h1>
+      </div>
+    </div>
+  );
+}
diff --git a/examples/emotion-css-prop/app/styles-context.tsx b/examples/emotion-css-prop/app/styles-context.tsx
@@ -0,0 +1,4 @@
+import * as React from "react";
+const StylesContext = React.createContext<null | React.ReactNode>(null);
+export const StylesProvider = StylesContext.Provider;
+export const useStyles = () => React.useContext(StylesContext);