remix-run · markdalgleish · Feb 8, 2024 · Feb 8, 2024 · Feb 8, 2024
diff --git a/.changeset/pink-eggs-drum.md 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
@@ -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`
 
-<docs-warning>
-
-**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].
+<docs-info>This is not required for other forms of [CSS bundling][css-bundling], e.g. CSS Modules, CSS side effect imports, Vanilla Extract, etc.</docs-info>
 
-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]
 
-</docs-warning>
-
-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**
+<docs-warning>`.css?url` imports require Vite v5.1 or newer</docs-warning>
 
 ```diff
 -import styles from "~/styles/dashboard.css";
 +import styles from "~/styles/dashboard.css?url";
-```
-
-#### Optionally convert regular CSS imports to side-effect imports
-
-<docs-info>Any existing side-effect imports of CSS files in your Remix application will work in Vite without any code changes.</docs-info>
-
-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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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"