From 60cde30af04444d6028903270a1c8f8b8f31f149 Mon Sep 17 00:00:00 2001
From: Jacob Ebey <jacob.ebey@live.com>
Date: Tue, 11 Jan 2022 11:04:00 -0800
Subject: [PATCH] chore: postcss CLI over resource route pattern

---
 app/containers/layout/layout.component.tsx |  6 ++----
 package.json                               |  4 +++-
 remix.config.js                            |  7 -------
 styles/global.server.ts                    | 19 -------------------
 4 files changed, 5 insertions(+), 31 deletions(-)
 delete mode 100644 styles/global.server.ts

diff --git a/app/containers/layout/layout.component.tsx b/app/containers/layout/layout.component.tsx
index cc53b0e..7b5fd70 100644
--- a/app/containers/layout/layout.component.tsx
+++ b/app/containers/layout/layout.component.tsx
@@ -18,6 +18,7 @@ import { Footer } from "~/components/footer";
 import { Navbar, NavbarCategory } from "~/components/navbar";
 
 import logoHref from "~/images/remix-glow.svg";
+import globalStylesheetHref from "~/styles/global.css";
 
 import { GenericCatchBoundary } from "../boundaries/generic-catch-boundary";
 import { GenericErrorBoundary } from "../boundaries/generic-error-boundary";
@@ -50,10 +51,7 @@ export let links: LinksFunction = () => {
   return [
     {
       rel: "stylesheet",
-      href:
-        process.env.NODE_ENV === "development"
-          ? "/global.css"
-          : require("~/styles/global.css"),
+      href: globalStylesheetHref,
     },
   ];
 };
diff --git a/package.json b/package.json
index 3d9b881..17c995a 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,9 @@
     "build:remix": "remix build",
     "build:css": "postcss styles/global.css -o app/styles/global.css",
     "clean": "rimraf ./public/build ./build ./.cache/content-v2 ./.cache/index-v5",
-    "dev": "dotenv -- remix dev",
+    "dev": "npm run build:css && run-p dev:*",
+    "dev:remix": "dotenv -- remix dev",
+    "dev:css": "postcss styles/global.css -o app/styles/global.css --watch",
     "test": "cypress-parallel -s cy:run -t 4 -d ./cypress/integration",
     "cy:run": "cypress run --config video=false",
     "cypress": "cypress open",
diff --git a/remix.config.js b/remix.config.js
index b5c7519..6b4d9f4 100644
--- a/remix.config.js
+++ b/remix.config.js
@@ -7,11 +7,4 @@ module.exports = {
   publicPath: "/build/",
   serverBuildDirectory: "./build",
   ignoredRouteFiles: [".*"],
-  routes(defineRoutes) {
-    return defineRoutes((route) => {
-      if (process.env.NODE_ENV === "development") {
-        route("global.css", "../styles/global.server.ts");
-      }
-    });
-  },
 };
diff --git a/styles/global.server.ts b/styles/global.server.ts
deleted file mode 100644
index 3f73cc3..0000000
--- a/styles/global.server.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import fsp from "fs/promises";
-import type { LoaderFunction } from "remix";
-import postcss from "postcss";
-import postcssrc from "postcss-load-config";
-
-export let loader: LoaderFunction = async () => {
-  let { options, plugins } = await postcssrc();
-
-  let { css } = await postcss(plugins).process(
-    await fsp.readFile("styles/global.css", "utf8"),
-    { ...options, from: "styles/global.css" }
-  );
-
-  return new Response(css, {
-    headers: {
-      "Content-Type": "text/css",
-    },
-  });
-};