fix: switch to side-effecting imports of app.css

This resolves a hydration error on production, due to different app.css resulting build asset url
remix-run · Jan 24, 2025 · 1329f79 · 1329f79
1 parent c4063b1
commit 1329f79
Show file tree

Hide file tree

Showing 17 changed files with 1,566 additions and 130 deletions.
diff --git a/cloudflare-d1/app/root.tsx b/cloudflare-d1/app/root.tsx
@@ -8,7 +8,7 @@ import {
 } from "react-router";
 
 import type { Route } from "./+types/root";
-import stylesheet from "./app.css?url";
+import "./app.css";
 
 export const links: Route.LinksFunction = () => [
   { rel: "preconnect", href: "https://fonts.googleapis.com" },
@@ -21,7 +21,6 @@ export const links: Route.LinksFunction = () => [
     rel: "stylesheet",
     href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
   },
-  { rel: "stylesheet", href: stylesheet },
 ];
 
 export function Layout({ children }: { children: React.ReactNode }) {

diff --git a/cloudflare-d1/vite.config.ts b/cloudflare-d1/vite.config.ts
@@ -34,8 +34,8 @@ export default defineConfig(({ isSsrBuild }) => ({
     cloudflareDevProxy({
       getLoadContext,
     }),
+    tailwindcss(),
     reactRouter(),
     tsconfigPaths(),
-    tailwindcss(),
   ],
 }));
diff --git a/cloudflare/app/root.tsx b/cloudflare/app/root.tsx
@@ -8,7 +8,7 @@ import {
 } from "react-router";
 
 import type { Route } from "./+types/root";
-import stylesheet from "./app.css?url";
+import "./app.css";
 
 export const links: Route.LinksFunction = () => [
   { rel: "preconnect", href: "https://fonts.googleapis.com" },
@@ -21,7 +21,6 @@ export const links: Route.LinksFunction = () => [
     rel: "stylesheet",
     href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
   },
-  { rel: "stylesheet", href: stylesheet },
 ];
 
 export function Layout({ children }: { children: React.ReactNode }) {

diff --git a/cloudflare/vite.config.ts b/cloudflare/vite.config.ts
@@ -18,8 +18,8 @@ export default defineConfig(({ isSsrBuild }) => ({
         return { cloudflare: context.cloudflare };
       },
     }),
+    tailwindcss(),
     reactRouter(),
     tsconfigPaths(),
-    tailwindcss(),
   ],
 }));
diff --git a/default/app/app.css b/default/app/app.css
@@ -1,10 +1,5 @@
 @import "tailwindcss";
 
-@theme {
-  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif,
-    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-}
-
 html,
 body {
   @apply bg-white dark:bg-gray-950;

diff --git a/default/app/root.tsx b/default/app/root.tsx
@@ -8,7 +8,7 @@ import {
 } from "react-router";
 
 import type { Route } from "./+types/root";
-import stylesheet from "./app.css?url";
+import "./app.css";
 
 export const links: Route.LinksFunction = () => [
   { rel: "preconnect", href: "https://fonts.googleapis.com" },
@@ -21,7 +21,6 @@ export const links: Route.LinksFunction = () => [
     rel: "stylesheet",
     href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
   },
-  { rel: "stylesheet", href: stylesheet },
 ];
 
 export function Layout({ children }: { children: React.ReactNode }) {

diff --git a/default/package.json b/default/package.json
@@ -21,6 +21,7 @@
     "@types/node": "^20",
     "@types/react": "^19.0.1",
     "@types/react-dom": "^19.0.1",
+    "react-router-devtools": "^1.1.0",
     "tailwindcss": "^4.0.0",
     "typescript": "^5.7.2",
     "vite": "^5.4.11",

diff --git a/default/vite.config.ts b/default/vite.config.ts
@@ -4,5 +4,8 @@ import { defineConfig } from "vite";
 import tsconfigPaths from "vite-tsconfig-paths";
 
 export default defineConfig({
-  plugins: [reactRouter(), tsconfigPaths(), tailwindcss()],
-});
+  plugins: [tailwindcss(), reactRouter(), tsconfigPaths()],
+  build: {
+    cssMinify: true,
+    ssr: false,
+}});
diff --git a/netlify/app/root.tsx b/netlify/app/root.tsx
@@ -8,7 +8,7 @@ import {
 } from "react-router";
 
 import type { Route } from "./+types/root";
-import stylesheet from "./app.css?url";
+import "./app.css";
 
 export const links: Route.LinksFunction = () => [
   { rel: "preconnect", href: "https://fonts.googleapis.com" },
@@ -21,7 +21,6 @@ export const links: Route.LinksFunction = () => [
     rel: "stylesheet",
     href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
   },
-  { rel: "stylesheet", href: stylesheet },
 ];
 
 export function Layout({ children }: { children: React.ReactNode }) {

diff --git a/netlify/vite.config.ts b/netlify/vite.config.ts
@@ -11,5 +11,5 @@ export default defineConfig(({ isSsrBuild }) => ({
         }
       : undefined,
   },
-  plugins: [reactRouter(), tsconfigPaths(), tailwindcss()],
+  plugins: [tailwindcss(), reactRouter(), tsconfigPaths()],
 }));
diff --git a/node-custom-server/app/root.tsx b/node-custom-server/app/root.tsx
@@ -8,7 +8,7 @@ import {
 } from "react-router";
 
 import type { Route } from "./+types/root";
-import stylesheet from "./app.css?url";
+import "./app.css";
 
 export const links: Route.LinksFunction = () => [
   { rel: "preconnect", href: "https://fonts.googleapis.com" },
@@ -21,7 +21,6 @@ export const links: Route.LinksFunction = () => [
     rel: "stylesheet",
     href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
   },
-  { rel: "stylesheet", href: stylesheet },
 ];
 
 export function Layout({ children }: { children: React.ReactNode }) {

diff --git a/node-custom-server/vite.config.ts b/node-custom-server/vite.config.ts
@@ -11,5 +11,5 @@ export default defineConfig(({ isSsrBuild }) => ({
         }
       : undefined,
   },
-  plugins: [reactRouter(), tsconfigPaths(), tailwindcss()],
+  plugins: [tailwindcss(), reactRouter(), tsconfigPaths()],
 }));
diff --git a/node-postgres/app/root.tsx b/node-postgres/app/root.tsx
@@ -8,7 +8,7 @@ import {
 } from "react-router";
 
 import type { Route } from "./+types/root";
-import stylesheet from "./app.css?url";
+import "./app.css";
 
 export const links: Route.LinksFunction = () => [
   { rel: "preconnect", href: "https://fonts.googleapis.com" },
@@ -21,7 +21,6 @@ export const links: Route.LinksFunction = () => [
     rel: "stylesheet",
     href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
   },
-  { rel: "stylesheet", href: stylesheet },
 ];
 
 export function Layout({ children }: { children: React.ReactNode }) {

diff --git a/node-postgres/vite.config.ts b/node-postgres/vite.config.ts
@@ -11,5 +11,5 @@ export default defineConfig(({ isSsrBuild }) => ({
         }
       : undefined,
   },
-  plugins: [reactRouter(), tsconfigPaths(), tailwindcss()],
+  plugins: [tailwindcss(), reactRouter(), tsconfigPaths()],
 }));