Open predaytor opened 6 months ago
stewarthsoj
commented
6 months ago I'm not sure if these issues are related but I'm experiencing this too with Tailwind. I only have one CSS file in my Remix project, that being root.css. The build is outputting two CSS files, though slightly different in size.
predaytor
commented
5 months ago it seems that after the release of vite@5.2.12 everything is fine, the duplicated css asset was generated in output (still odd), but not included in the application anymore.
predaytor
commented
5 months ago update: Unfortunately, the problem persists. currently some routes load a single css file, others include duplicate.
machour
commented
1 month ago @JoshStwrt I've experienced the same issue, and was able to fix it by changing from a ?url import to a side effect (import "~/app.css"). In this case Remix handle all this and there's no problem.
I'm trying to come up with a reproduce case for the team, but it seems like I'm unable to reproduce it outside my huge private project. Are you able to reproduce the bug?
machour
commented
1 month ago Running a diff on both generated files (after reformatting with prettier), shows the following diffs:
.bg-gray-500\/20 {
- background-color: #6b728033;
+ background-color: rgba(107, 114, 128, 0.2);
}
.bg-green-50 {
--tw-bg-opacity: 1;
@@ -2048,7 +2048,7 @@
background-color: rgb(217 0 0 / var(--tw-bg-opacity));
}
.bg-ram\/20 {
- background-color: #d9000033;
+ background-color: rgba(217, 0, 0, 0.2);
}
.bg-red-50 {
--tw-bg-opacity: 1;
@@ -2059,7 +2059,7 @@
background-color: rgb(153 27 27 / var(--tw-bg-opacity));
}
.bg-slate-900\/80 {
- background-color: #0f172acc;
+ background-color: rgba(15, 23, 42, 0.8);
}something is inconsistent in the manner the tailwind css files are generated
machour
commented
1 month ago Found the culprit, I'm using @vitejs/plugin-legacy to support older devices.
As soon as I remove it from vite, the problem goes away:
diff --git a/www/front/vite.config.js b/www/front/vite.config.js
index 71de5e117..47f56c9ba 100644
--- a/www/front/vite.config.js
+++ b/www/front/vite.config.js
@@ -1,6 +1,5 @@
import { vitePlugin as remix } from "@remix-run/dev";
import { installGlobals } from "@remix-run/node";
-import legacy from "@vitejs/plugin-legacy";
import { flatRoutes } from "remix-flat-routes";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
@@ -21,9 +20,6 @@ export default defineConfig({
},
routes: async defineRoutes => flatRoutes("routes", defineRoutes),
}),
- legacy({
- targets: ["defaults", "safari >= 12.1", "not IE 11"],
- }),
tsconfigPaths(),
],
});There's an inconsistency somewhere between the client and server build !
machour
commented
1 month ago Reproduce case on the latest remix version: https://github.com/machour/remix-issue-9451
silvenon
commented
1 month ago Seems like @vitejs/plugin-legacy is creating another bundle that's intended to be inserted separately, but perhaps Remix doesn't have a way of handling that, so the server build collects the modern bundle, and the client build hydrates with the legacy bundle, or the other way around.
Maybe Remix's Vite plugin for collecting styles doesn't recognize that one styles are coming from one modern bundle and another from the legacy bundle because the import is named the same.
I'm yet to familiarize myself with FOUC-less Vite dev experience when SSR is involved, I just know that these Vite plugins for styles by frameworks follow a similar gimmick.
I hope that someone comes to the rescue 🤞 In the meantime I'll try to find out what more I can.
Reproduction
When using the
?urlimport, there seems to be a mismatch between the generated assets, resulting in two identical css files (with different hashes), with the mismatched included at the top of the<head/>. It's avite-plugin-stylex-devfor StyleX css solution.For some reason I cannot reproduce bug in the sandbox.
This happens occasionally between builds, so maybe it's due to some internal Remix caching. When this mismatch occurs, this line outputs:
Logs:
https://github.com/remix-run/remix/blob/2e65318b15df407b31b101362e03729e61ec5622/packages/remix-dev/vite/plugin.ts#L1441-L1454
Original issue: https://github.com/nonzzz/vite-plugin-stylex/issues/25
System Info
Used Package Manager
pnpm
Expected Behavior
pnpm buildshould result in a single css fileActual Behavior
pnpm buildresults in identical duplicate of the original css file and includes it in the output html