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"