Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support Vite v5.1.0's .css?url imports #8684

Merged
merged 1 commit into from
Feb 5, 2024

Conversation

markdalgleish
Copy link
Member

@markdalgleish markdalgleish commented Feb 5, 2024

Fixes #7786

This adds built in support for .css?url imports in Vite v5.1.0 (currently in beta) to ease migration of Remix's regular CSS imports.

-import styles from "~/styles/dashboard.css";
+import styles from "~/styles/dashboard.css?url";

The only thing we need to do to support this out of the box is to enable build.cssMinify in server builds by default. If we don't do this, content hashes differ between server and client since the server doesn't have minification enabled by default.

I've opted to call out the beta status of this feature rather than waiting for Vite 5.1.0 so that it doesn't need to be a blocker for a stable release of the Remix Vite plugin.

We had an existing test for Vite v5.0.x's .css?url imports but it didn't use any CSS processing. In order to exercise the new .css?url support in Vite v5.1.0, I've updated our dev dependency to v5.1.0-beta.6 and modified the test case to use a minimal PostCSS plugin (copied from the Remix compiler's PostCSS tests) so that CSS processing is required for the test to pass. I've confirmed that the updated test fails when using Vite v5.0.x.

Copy link

changeset-bot bot commented Feb 5, 2024

🦋 Changeset detected

Latest commit: cef9525

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 16 packages
Name Type
@remix-run/dev Patch
create-remix Patch
remix Patch
@remix-run/architect Patch
@remix-run/cloudflare Patch
@remix-run/cloudflare-pages Patch
@remix-run/cloudflare-workers Patch
@remix-run/css-bundle Patch
@remix-run/deno Patch
@remix-run/eslint-config Patch
@remix-run/express Patch
@remix-run/node Patch
@remix-run/react Patch
@remix-run/serve Patch
@remix-run/server-runtime Patch
@remix-run/testing Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@markdalgleish markdalgleish merged commit c164daf into dev Feb 5, 2024
9 checks passed
@markdalgleish markdalgleish deleted the markdalgleish/vite-css-url branch February 5, 2024 05:36
@github-actions github-actions bot added the awaiting release This issue has been fixed and will be released soon label Feb 5, 2024
Copy link
Contributor

🤖 Hello there,

We just published version 2.7.0-pre.0 which includes this pull request. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

Copy link
Contributor

🤖 Hello there,

We just published version 2.7.0 which includes this pull request. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

@github-actions github-actions bot removed the awaiting release This issue has been fixed and will be released soon label Feb 20, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant