?url CSS imports used in links are not bundled correctly in production

[pcattori]

What version of Remix are you using?

v0.0.0-nightly-0c99349-20231027

Are all your remix dependencies & dev-dependencies using the same version?

• Yes

Steps to Reproduce

// app/root.tsx
import tailwindHref from "~/tailwind.css?url";

export const links = () => [
  { rel: "stylesheet", href: tailwindHref },
];

Expected Behavior

Processed styles show up in production

Actual Behavior

Processed styles only show up in development

Related Vite issues

• Loading SCSS with the ?url flag causes the import to fail vitejs/vite#2522
• CSS imported by explicit import with ?url suffix do not have resolved its dependencies vitejs/vite#7842
• Inconsistent compilation of CSS Modules between dev and build commands when using ?url query param vitejs/vite#13416

[pcattori]

Workaround: use side-effect imports instead of ?url imports:

// app/root.tsx
- import { cssBundleHref } from "@remix-run/css-bundle";

- import tailwindHref from "~/tailwind.css?url";
+ import "~/tailwind.css";

- export const links = () => [
-   ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
-   { rel: "stylesheet", href: tailwindHref },
- ];

---

The difference in how ?url is treated in dev vs. prod seems to be a Vite-specific issue and not Remix related.

[markdalgleish]

EDIT: Added related Vite issues to this issue's description.

[684efs3]

If I use the side-effect method (+ import "~/tailwind.css";), when I save in my editor, VS Code, all of the CSS will be removed from the localhost site.

If I hit [Command] [R] to refresh the browser, then the CSS styles will be applied.

This is a little annoying for developing.

[markdalgleish]

@684efs3 I wasn't able to reproduce your issue. Could you please share a repro?

[c43721]

I'm experiencing the same issue as @684efs3 but I don't have a reproduction. I've repro'd below.

@markdalgleish Looks like with the express server and tailwind with autoprefixer, the styles flash: https://github.com/c43721/test-vite

I'm also seeing the styles from the component be completely overridden by the imported tailwind styles. That's unexpected from me (though I've been out of the loop for a while so maybe this is expected 👍). This is during dev, did not test running production.

[pcfreak30]

Workaround: use side-effect imports instead of ?url imports:

// app/root.tsx
- import { cssBundleHref } from "@remix-run/css-bundle";

- import tailwindHref from "~/tailwind.css?url";
+ import "~/tailwind.css";

- export const links = () => [
-   ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
-   { rel: "stylesheet", href: tailwindHref },
- ];

The difference in how ?url is treated in dev vs. prod seems to be a Vite-specific issue and not Remix related.

This is still broken in 2.4.1

This works for me but breaks the Links component/makes it impossible to use it for imported CSS. A PR is needed to properly integrate them (link component and CSS side effects?). I also cannot confirm if @remix-run/css-bundle does anything.

[markdalgleish]

@pcfreak30

This is still broken in 2.4.1

Sorry, what's still broken exactly? If you're referring to the original issue, it's an upstream issue in Vite that won't be fixed by a Remix release. This issue is only here so that we have a single place to link to and track all related Vite issues.

This works for me but breaks the Links component/makes it impossible to use it for imported CSS. A PR is needed to properly integrate them (link component and CSS side effects?).

Sorry, I'm not quite following. Do you have an example of what's breaking?

I also cannot confirm if @remix-run/css-bundle does anything.

The @remix-run/css-bundle package is a no-op in Vite (the cssBundleHref export is always undefined) and can be safely removed.

[pcfreak30]

@pcfreak30

This is still broken in 2.4.1

Sorry, what's still broken exactly? If you're referring to the original issue, it's an upstream issue in Vite that won't be fixed by a Remix release. This issue is only here so that we have a single place to link to and track all related Vite issues.

This works for me but breaks the Links component/makes it impossible to use it for imported CSS. A PR is needed to properly integrate them (link component and CSS side effects?).

Sorry, I'm not quite following. Do you have an example of what's breaking?

I also cannot confirm if @remix-run/css-bundle does anything.

The @remix-run/css-bundle package is a no-op in Vite (the cssBundleHref export is always undefined) and can be safely removed.

IIRC, the ?url. It doesn't import it properly.

In dev ?url works, in prod it encodes as data:application/octet-stream;base64,

I can only use side-effects and have vite bundle for me.

[pcfreak30]

It looks like the PR vitejs/vite#15259 solves it, but it hasn't been merged yet.

[Danones]

If I use the side-effect method (+ import "~/tailwind.css";), when I save in my editor, VS Code, all of the CSS will be removed from the localhost site.

If I hit [Command] [R] to refresh the browser, then the CSS styles will be applied.

This is a little annoying for developing.

After a couple of hours debugging, I reached the same issue with css.
This is preventing me from using Vite on my company app. I have decided to put the integration with vite on hold until this is fixed by Vite.

[pcfreak30]

If I use the side-effect method (+ import "~/tailwind.css";), when I save in my editor, VS Code, all of the CSS will be removed from the localhost site.

If I hit [Command] [R] to refresh the browser, then the CSS styles will be applied.

This is a little annoying for developing.

After a couple of hours debugging, I reached the same issue with css. This is preventing me from using Vite on my company app. I have decided to put the integration with vite on hold until this is fixed by Vite.

FYI you can make it work, it's just hacky.

[Danones]

If I use the side-effect method (+ import "~/tailwind.css";), when I save in my editor, VS Code, all of the CSS will be removed from the localhost site.

If I hit [Command] [R] to refresh the browser, then the CSS styles will be applied.

This is a little annoying for developing.

After a couple of hours debugging, I reached the same issue with css. This is preventing me from using Vite on my company app. I have decided to put the integration with vite on hold until this is fixed by Vite.

FYI you can make it work, it's just hacky.

How? Curious to see how hacky it is

[pcfreak30]

If I use the side-effect method (+ import "~/tailwind.css";), when I save in my editor, VS Code, all of the CSS will be removed from the localhost site.

If I hit [Command] [R] to refresh the browser, then the CSS styles will be applied.

This is a little annoying for developing.

After a couple of hours debugging, I reached the same issue with css. This is preventing me from using Vite on my company app. I have decided to put the integration with vite on hold until this is fixed by Vite.

FYI you can make it work, it's just hacky.

How? Curious to see how hacky it is

https://git.lumeweb.com/LumeWeb/web3.news/src/commit/c1897e4d7c225a5511cadaf2711fbe9ef353d861/app/root.tsx#L12

[Danones]

If I use the side-effect method (+ import "~/tailwind.css";), when I save in my editor, VS Code, all of the CSS will be removed from the localhost site.

If I hit [Command] [R] to refresh the browser, then the CSS styles will be applied.

This is a little annoying for developing.

After a couple of hours debugging, I reached the same issue with css. This is preventing me from using Vite on my company app. I have decided to put the integration with vite on hold until this is fixed by Vite.

FYI you can make it work, it's just hacky.

How? Curious to see how hacky it is

https://git.lumeweb.com/LumeWeb/web3.news/src/commit/c1897e4d7c225a5511cadaf2711fbe9ef353d861/app/root.tsx#L12

For me it does not work. Importing the styles as a side effect is something that I am already doing as part of the latest remix release and vite support migration guide.

I noticed that on your code, you are importing the global.css directly in the root, and I have tried doing the same but the issue remains.

Maybe I misunderstood your point, but this does not seem to work

[pcattori]

vitejs/vite#15259 was merged earlier today. Just waiting for a Vite release than includes it now

[markdalgleish]

Vite's fix for this is currently available in v5.1.0-beta.0: https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md#510-beta0-2024-01-15

[pcattori]

Closing as Vite v5.1 has shipped.