diff --git a/.changeset/pink-eggs-drum.md b/.changeset/pink-eggs-drum.md
new file mode 100644
index 00000000000..29f254b1556
--- /dev/null
+++ b/.changeset/pink-eggs-drum.md
@@ -0,0 +1,5 @@
+---
+"@remix-run/dev": patch
+---
+
+Vite: Require version 5.1.0 to support `.css?url` imports
diff --git a/docs/future/vite.md b/docs/future/vite.md
index c7fda31a269..880710e80f7 100644
--- a/docs/future/vite.md
+++ b/docs/future/vite.md
@@ -718,63 +718,27 @@ If a route's `links` function is only used to wire up `cssBundleHref`, you can r
- ];
```
-#### Add `?url` to regular CSS imports
+#### Fix up CSS imports referenced in `links`
-
-
-**This feature is not supported in Vite v5.0.x.**
-
-Vite v5.0.x and earlier has a [known issue with `.css?url` imports][vite-css-url-issue] that causes them to break in production builds. If you'd like to use this feature immediately, support for `.css?url` imports is currently available in the [Vite v5.1.0 beta][vite-5-1-0-beta].
+This is not required for other forms of [CSS bundling][css-bundling], e.g. CSS Modules, CSS side effect imports, Vanilla Extract, etc.
-If you'd prefer to avoid running a beta version of Vite, you can either wait for Vite v5.1.0 or [convert your CSS imports to side-effects.][convert-your-css-imports-to-side-effects]
+If you are [referencing CSS in a `links` function][regular-css], you'll need to update the corresponding CSS imports to use [Vite's explicit `?url` import syntax.][vite-url-imports]
-
-
-If you were using [Remix's regular CSS support][regular-css], you'll need to update your CSS import statements to use [Vite's explicit `?url` import syntax.][vite-url-imports]
+👉 **Add `?url` to CSS imports used in `links`**
-👉 **Add `?url` to regular CSS imports**
+`.css?url` imports require Vite v5.1 or newer
```diff
-import styles from "~/styles/dashboard.css";
+import styles from "~/styles/dashboard.css?url";
-```
-
-#### Optionally convert regular CSS imports to side-effect imports
-
-Any existing side-effect imports of CSS files in your Remix application will work in Vite without any code changes.
-
-Rather than [migrating regular CSS imports to use Vite's explicit `.css?url` import syntax][add-url-to-regular-css-imports] — which requires either waiting for Vite v5.1.0 or running the [v5.1.0 beta][vite-5-1-0-beta] — you can instead convert them to side-effect imports (e.g. `import "./styles.css"`). You may even find that this approach is more convenient for you.
-
-During development, [Vite injects CSS side-effect imports into the page via JavaScript,][vite-css] and the Remix Vite plugin will inline imported CSS alongside your link tags to avoid a flash of unstyled content. In the production build, the Remix Vite plugin will automatically attach CSS files to the relevant routes.
-
-This also means that in many cases you won't need the `links` function export anymore.
-
-Since the order of your CSS is determined by its import order, you'll need to ensure that your CSS imports are in the same order as your `links` function.
-👉 **Convert CSS imports into side effects — in the same order they were in your `links` function!**
-
-```diff filename=app/dashboard/route.tsx
-- import type { LinksFunction } from "@remix-run/node"; // or cloudflare/deno
-
-- import dashboardStyles from "./dashboard.css";
-- import sharedStyles from "./shared.css";
-
-+ // NOTE: The import order of these
-+ // side-effect imports has been updated
-+ // to match the original `links` function.
-+ import "./shared.css";
-+ import "./dashboard.css";
-
-- export const links: LinksFunction = () => [
-- { rel: "stylesheet", href: sharedStyles },
-- { rel: "stylesheet", href: dashboardStyles },
-- ];
+export const links = () => {
+ return [
+ { rel: "stylesheet", href: styles }
+ ];
+}
```
-One important caveat to be aware of is that, during development, these styles will no longer be mounted and unmounted automatically when navigating between routes.
-
-As a result, you may be more likely to encounter CSS collisions. If this is a concern, you might also want to consider migrating your regular CSS files to [CSS Modules][vite-css-modules] or using a naming convention that prefixes class names with the corresponding file name.
-
#### Enable Tailwind via PostCSS
If your project is using [Tailwind CSS][tailwind], you'll first need to ensure that you have a [PostCSS][postcss] config file which will get automatically picked up by Vite.
@@ -806,7 +770,7 @@ export default {
👉 **Migrate Tailwind CSS import**
-If you're importing your Tailwind CSS file using [Remix's regular CSS support][regular-css], you'll need to [migrate your Tailwind CSS import statement.][add-url-to-regular-css-imports]
+If you're [referencing your Tailwind CSS file in a `links` function][regular-css], you'll need to [migrate your Tailwind CSS import statement.][fix-up-css-imports-referenced-in-links]
#### Add Vanilla Extract plugin
@@ -1256,15 +1220,11 @@ We're definitely late to the Vite party, but we're excited to be here now!
[tsm]: https://github.com/lukeed/tsm
[vite-tsconfig-paths]: https://github.com/aleclarson/vite-tsconfig-paths
[css-bundling]: ../styling/bundling
-[vite-css]: https://vitejs.dev/guide/features.html#css
[regular-css]: ../styling/css
-[vite-css-modules]: https://vitejs.dev/guide/features#css-modules
[vite-url-imports]: https://vitejs.dev/guide/assets.html#explicit-url-imports
-[vite-css-url-issue]: https://github.com/remix-run/remix/issues/7786
[tailwind]: https://tailwindcss.com
[postcss]: https://postcss.org
[tailwind-config-option]: ../file-conventions/remix-config#tailwind
-[convert-your-css-imports-to-side-effects]: #optionally-convert-regular-css-imports-to-side-effect-imports
[vanilla-extract]: https://vanilla-extract.style
[vanilla-extract-vite-plugin]: https://vanilla-extract.style/documentation/integrations/vite
[mdx]: https://mdxjs.com
@@ -1327,6 +1287,4 @@ We're definitely late to the Vite party, but we're excited to be here now!
[vite-base]: https://vitejs.dev/config/shared-options.html#base
[how-fix-cjs-esm]: https://www.youtube.com/watch?v=jmNuEEtwkD4
[presets]: ./presets
-[vite-5-1-0-beta]: https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md#510-beta0-2024-01-15
-[side-effect-imports]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#import_a_module_for_its_side_effects_only
-[add-url-to-regular-css-imports]: #add-url-to-regular-css-imports
+[fix-up-css-imports-referenced-in-links]: #fix-up-css-imports-referenced-in-links
diff --git a/integration/helpers/vite-template/package.json b/integration/helpers/vite-template/package.json
index d4eb067f3c7..c1d5bb08e4d 100644
--- a/integration/helpers/vite-template/package.json
+++ b/integration/helpers/vite-template/package.json
@@ -23,7 +23,7 @@
"@types/react-dom": "^18.2.7",
"eslint": "^8.38.0",
"typescript": "^5.1.6",
- "vite": "5.1.0-beta.7",
+ "vite": "5.1.0",
"vite-tsconfig-paths": "^4.2.1"
},
"engines": {
diff --git a/integration/vite-cloudflare-test.ts b/integration/vite-cloudflare-test.ts
index f9b3d070430..fe3c10d1a48 100644
--- a/integration/vite-cloudflare-test.ts
+++ b/integration/vite-cloudflare-test.ts
@@ -33,7 +33,7 @@ const files: Files = async ({ port }) => ({
"@types/react-dom": "^18.2.7",
"node-fetch": "^3.3.2",
typescript: "^5.1.6",
- vite: "^5.0.0",
+ vite: "^5.1.0",
"vite-tsconfig-paths": "^4.2.1",
wrangler: "^3.24.0",
},
diff --git a/package.json b/package.json
index 4a826f90137..4157eeb3277 100644
--- a/package.json
+++ b/package.json
@@ -133,7 +133,7 @@
"unified": "^10.1.2",
"unist-util-remove": "^3.1.0",
"unist-util-visit": "^4.1.1",
- "vite": "5.1.0-beta.7",
+ "vite": "5.1.0",
"wait-on": "^7.0.1"
},
"engines": {
diff --git a/packages/remix-dev/package.json b/packages/remix-dev/package.json
index e2c3366d862..d94f3424c6e 100644
--- a/packages/remix-dev/package.json
+++ b/packages/remix-dev/package.json
@@ -91,12 +91,12 @@
"msw": "^1.2.3",
"strip-ansi": "^6.0.1",
"tiny-invariant": "^1.2.0",
- "vite": "5.1.0-beta.7"
+ "vite": "5.1.0"
},
"peerDependencies": {
"@remix-run/serve": "^2.6.0",
"typescript": "^5.1.0",
- "vite": "^5.0.0"
+ "vite": "^5.1.0"
},
"peerDependenciesMeta": {
"@remix-run/serve": {
diff --git a/templates/spa/package.json b/templates/spa/package.json
index b45ba399a00..2f3b2cbe7c4 100644
--- a/templates/spa/package.json
+++ b/templates/spa/package.json
@@ -28,7 +28,7 @@
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"typescript": "^5.1.6",
- "vite": "^5.0.0",
+ "vite": "^5.1.0",
"vite-tsconfig-paths": "^4.2.1"
},
"engines": {
diff --git a/templates/unstable-vite-cloudflare/package.json b/templates/unstable-vite-cloudflare/package.json
index 0c6df05def1..9e7e301ba02 100644
--- a/templates/unstable-vite-cloudflare/package.json
+++ b/templates/unstable-vite-cloudflare/package.json
@@ -34,7 +34,7 @@
"eslint-plugin-react-hooks": "^4.6.0",
"node-fetch": "^3.3.2",
"typescript": "^5.1.6",
- "vite": "^5.0.0",
+ "vite": "^5.1.0",
"vite-tsconfig-paths": "^4.2.1",
"wrangler": "^3.24.0"
},
diff --git a/templates/unstable-vite-express/package.json b/templates/unstable-vite-express/package.json
index 819fae4ff36..64699ea0213 100644
--- a/templates/unstable-vite-express/package.json
+++ b/templates/unstable-vite-express/package.json
@@ -37,7 +37,7 @@
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"typescript": "^5.1.6",
- "vite": "^5.0.0",
+ "vite": "^5.1.0",
"vite-tsconfig-paths": "^4.2.1"
},
"engines": {
diff --git a/templates/unstable-vite/package.json b/templates/unstable-vite/package.json
index 3e83fca53ce..8b5435ad6c9 100644
--- a/templates/unstable-vite/package.json
+++ b/templates/unstable-vite/package.json
@@ -30,7 +30,7 @@
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"typescript": "^5.1.6",
- "vite": "^5.0.0",
+ "vite": "^5.1.0",
"vite-tsconfig-paths": "^4.2.1"
},
"engines": {
diff --git a/yarn.lock b/yarn.lock
index d3669ccc8fa..c30418bded0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10955,7 +10955,7 @@ postcss-value-parser@^4.0.0, postcss-value-parser@^4.1.0, postcss-value-parser@^
resolved "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz"
integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
-postcss@^8.0.9, postcss@^8.3.6, postcss@^8.4.19, postcss@^8.4.27, postcss@^8.4.33:
+postcss@^8.0.9, postcss@^8.3.6, postcss@^8.4.19, postcss@^8.4.27:
version "8.4.33"
resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.33.tgz#1378e859c9f69bf6f638b990a0212f43e2aaa742"
integrity sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==
@@ -10964,6 +10964,15 @@ postcss@^8.0.9, postcss@^8.3.6, postcss@^8.4.19, postcss@^8.4.27, postcss@^8.4.3
picocolors "^1.0.0"
source-map-js "^1.0.2"
+postcss@^8.4.35:
+ version "8.4.35"
+ resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.35.tgz#60997775689ce09011edf083a549cea44aabe2f7"
+ integrity sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==
+ dependencies:
+ nanoid "^3.3.7"
+ picocolors "^1.0.0"
+ source-map-js "^1.0.2"
+
preferred-pm@^3.0.0:
version "3.0.3"
resolved "https://registry.npmjs.org/preferred-pm/-/preferred-pm-3.0.3.tgz"
@@ -13479,13 +13488,13 @@ vite-tsconfig-paths@^4.2.2:
globrex "^0.1.2"
tsconfck "^2.1.0"
-vite@5.1.0-beta.7:
- version "5.1.0-beta.7"
- resolved "https://registry.npmjs.org/vite/-/vite-5.1.0-beta.7.tgz#9d3e5577059f8546483fdecf0a828d0238a7718c"
- integrity sha512-bj+s7ILvR+rAJqRRfNy7JwQNPzMal6bS4aKdiGDDZzXofcvEuuuu9MGSc6qqfmt3nfvqFtALSBzpoVlueYAPJQ==
+vite@5.1.0:
+ version "5.1.0"
+ resolved "https://registry.npmjs.org/vite/-/vite-5.1.0.tgz#4510394f48b942ecc6843025f4b926ba99a2fb8c"
+ integrity sha512-STmSFzhY4ljuhz14bg9LkMTk3d98IO6DIArnTY6MeBwiD1Za2StcQtz7fzOUnRCqrHSD5+OS2reg4HOz1eoLnw==
dependencies:
esbuild "^0.19.3"
- postcss "^8.4.33"
+ postcss "^8.4.35"
rollup "^4.2.0"
optionalDependencies:
fsevents "~2.3.3"