fix(styled-components): fix SSR and error styles (#311)

Author: markdalgleish

styled-components/.gitignore

@@ -4,3 +4,4 @@ node_modules
 /build
 /public/build
 .env
+/app/components

styled-components/README.md

@@ -10,11 +10,17 @@ Open this example on [CodeSandbox](https://codesandbox.com):
 
 ## Example
 
-This example shows how to use Styled Components with Remix. Relevant files:
+To support server-side rendering without hydration errors, [Styled Components uses a Babel plugin to ensure consistent class names across server and client.](https://styled-components.com/docs/advanced#tooling-setup) In this example the source code for our styled components is in `components/src`. This is compiled with the Babel CLI (to generate JavaScript files) and `tsc` (to generate `.d.ts` files), co-ordinated using [npm-run-all](https://www.npmjs.com/package/npm-run-all). The output from both of these tools is generated in `app/components` which is ignored by Git. The app can then import these components from `~/components/*`.
+
+One notable aspect of Styled Components that we need to manage is the way in which it injects styles into the `head` element. This clashes with the model of using React to render the entire document from the root because Styled Components doesn't expect the `head` element to be remounted. When this happens, any CSS that Styled Components thinks is in the document is actually removed, resulting in a loss of styling. In order to avoid this issue when navigating between error routes and non-error routes, we need to wrap the entire app in a pathless route which in this example we're calling `__boundary`. This allows us to handle top-level errors without re-mounting the entire app.
+
+## 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 styled-components collect.
-- [app/routes/index.tsx](./app/routes/index.tsx) - Here's where we use the `styled` function to create a styled component.
+- [app/routes/__boundary.tsx](./app/routes/__boundary.tsx) - The top-level error boundary for the app to avoid re-mounting the document.
+- [app/routes/__boundary/\$.tsx](./app/routes/__boundary/$.tsx) - The top-level splat route that manually throws a 404 response so we can catch it in `__boundary.tsx`.
+- [components/src/Box.tsx](./components/src/Box.tsx) - An example `styled` component.
 
 ## Related Links
 

styled-components/app/entry.client.tsx

@@ -0,0 +1,30 @@
+import { Outlet, useCatch } from "@remix-run/react";
+
+import { Box } from "~/components/Box";
+
+export default function Boundary() {
+  return <Outlet />;
+}
+
+export function CatchBoundary() {
+  const caught = useCatch();
+
+  return (
+    <Box>
+      <h1>Catch Boundary</h1>
+      <p>
+        {caught.status} {caught.statusText}
+      </p>
+    </Box>
+  );
+}
+
+export function ErrorBoundary({ error }: { error: Error }) {
+  return (
+    <Box>
+      <h1>Error Boundary</h1>
+      <p>{error.message}</p>
+      <pre>{error.stack}</pre>
+    </Box>
+  );
+}

styled-components/app/routes/__boundary.tsx

@@ -0,0 +1,10 @@
+// Any request for this top-level splat route is a 404
+export const loader = () => {
+  throw new Response(null, {
+    status: 404,
+    statusText: "Not Found",
+  });
+};
+
+// This is needed to tell Remix it isn't a resource route
+export default () => null;

styled-components/app/routes/__boundary/$.tsx

@@ -0,0 +1,3 @@
+export default function ErrorComponent() {
+  throw new Error("This route throws on render!");
+}

styled-components/app/routes/__boundary/error.tsx

@@ -0,0 +1,19 @@
+import { Link } from "@remix-run/react";
+
+import { Box } from "~/components/Box";
+
+export default function Index() {
+  return (
+    <Box>
+      <h1>Welcome to Remix With Styled Components</h1>
+      <ul>
+        <li>
+          <Link to="/error">Error</Link>
+        </li>
+        <li>
+          <Link to="/404">404</Link>
+        </li>
+      </ul>
+    </Box>
+  );
+}

styled-components/app/routes/__boundary/index.tsx

@@ -0,0 +1,8 @@
+{
+  "presets": [
+    "@babel/preset-typescript",
+    ["@babel/preset-react", { "runtime": "automatic" }]
+  ],
+  "plugins": ["babel-plugin-styled-components"],
+  "sourceMaps": "inline"
+}

styled-components/app/routes/index.tsx

@@ -0,0 +1,6 @@
+import styled from "styled-components";
+
+export const Box = styled("div")`
+  font-family: system-ui, sans-serif;
+  line-height: 1.4;
+`;