diff --git a/.changeset/few-forks-behave.md b/.changeset/few-forks-behave.md
new file mode 100644
index 00000000000..a2d02abf267
--- /dev/null
+++ b/.changeset/few-forks-behave.md
@@ -0,0 +1,5 @@
+---
+"@remix-run/dev": patch
+---
+
+Remove undocumented `legacyCssImports` option from Vite plugin due to issues with `?url` imports of CSS files not being processed correctly in Vite
diff --git a/integration/vite-css-legacy-build-test.ts b/integration/vite-css-legacy-build-test.ts
deleted file mode 100644
index ab487b22fcd..00000000000
--- a/integration/vite-css-legacy-build-test.ts
+++ /dev/null
@@ -1,99 +0,0 @@
-import { test, expect } from "@playwright/test";
-
-import {
- createAppFixture,
- createFixture,
- js,
- css,
-} from "./helpers/create-fixture.js";
-import type { Fixture, AppFixture } from "./helpers/create-fixture.js";
-import { PlaywrightFixture } from "./helpers/playwright-fixture.js";
-
-const TEST_PADDING_VALUE = "20px";
-
-test.describe("Vite CSS legacy imports build", () => {
- let fixture: Fixture;
- let appFixture: AppFixture;
-
- test.beforeAll(async () => {
- fixture = await createFixture({
- compiler: "vite",
- files: {
- "remix.config.js": js`
- throw new Error("Remix should not access remix.config.js when using Vite");
- export default {};
- `,
- "vite.config.ts": js`
- import { defineConfig } from "vite";
- import { unstable_vitePlugin as remix } from "@remix-run/dev";
-
- export default defineConfig({
- plugins: [
- remix({
- legacyCssImports: true
- })
- ],
- });
- `,
- "app/root.tsx": js`
- import { Links, Meta, Outlet, Scripts } from "@remix-run/react";
-
- export default function Root() {
- return (
-
-
-
-
-
-
-
-
-
-
-
-
- );
- }
- `,
- "app/routes/_index/styles-linked.css": css`
- .index_linked {
- background: peachpuff;
- padding: ${TEST_PADDING_VALUE};
- }
- `,
- "app/routes/_index/route.tsx": js`
- import linkedStyles from "./styles-linked.css";
-
- export function links() {
- return [{ rel: "stylesheet", href: linkedStyles }];
- }
-
- export default function IndexRoute() {
- return (
-
- );
- }
- `,
- },
- });
-
- appFixture = await createAppFixture(fixture);
- });
-
- test.afterAll(() => {
- appFixture.close();
- });
-
- test("renders styles", async ({ page }) => {
- let app = new PlaywrightFixture(appFixture, page);
- await app.goto("/");
- await expect(page.locator("#index [data-css-linked]")).toHaveCSS(
- "padding",
- TEST_PADDING_VALUE
- );
- });
-});
diff --git a/packages/remix-dev/vite/legacy-css-imports.ts b/packages/remix-dev/vite/legacy-css-imports.ts
deleted file mode 100644
index b0ba00f2910..00000000000
--- a/packages/remix-dev/vite/legacy-css-imports.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { parse, traverse, generate, t } from "./babel";
-
-export const transformLegacyCssImports = (source: string) => {
- let ast = parse(source, {
- sourceType: "module",
- plugins: ["typescript", "jsx"],
- });
-
- traverse(ast, {
- // Handle `import styles from "./styles.css"`
- ImportDeclaration(path) {
- if (
- path.node.source.value.endsWith(".css") &&
- // CSS Modules are bundled in the Remix compiler so they're already
- // compatible with Vite's default CSS handling
- !path.node.source.value.endsWith(".module.css") &&
- t.isImportDefaultSpecifier(path.node.specifiers[0])
- ) {
- path.node.source.value += "?url";
- }
- },
- });
-
- return {
- code: generate(ast, { retainLines: true }).code,
- map: null,
- };
-};
diff --git a/packages/remix-dev/vite/plugin.ts b/packages/remix-dev/vite/plugin.ts
index 9e0ee66c77c..9180271796d 100644
--- a/packages/remix-dev/vite/plugin.ts
+++ b/packages/remix-dev/vite/plugin.ts
@@ -26,7 +26,6 @@ import { createRequestHandler } from "./node/adapter";
import { getStylesForUrl, isCssModulesFile } from "./styles";
import * as VirtualModule from "./vmod";
import { removeExports } from "./remove-exports";
-import { transformLegacyCssImports } from "./legacy-css-imports";
import { replaceImportSpecifier } from "./replace-import-specifier";
// We reassign the "vite" variable from a dynamic import of Vite's ESM build
@@ -69,9 +68,7 @@ type RemixConfigJsdocOverrides = {
};
export type RemixVitePluginOptions = RemixConfigJsdocOverrides &
- Omit & {
- legacyCssImports?: boolean;
- };
+ Omit;
type ResolvedRemixVitePluginConfig = Pick<
ResolvedRemixConfig,
@@ -1092,19 +1089,6 @@ export const remixVitePlugin: RemixVitePlugin = (options = {}) => {
return modules;
},
},
- ...((options.legacyCssImports
- ? [
- {
- name: "remix-legacy-css-imports",
- enforce: "pre",
- transform(code) {
- if (code.includes('.css"') || code.includes(".css'")) {
- return transformLegacyCssImports(code);
- }
- },
- },
- ]
- : []) satisfies Vite.Plugin[]),
];
};