chore: postcss CLI over resource route pattern

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,
     },
   ];
 };

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",

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");
-      }
-    });
-  },
 };