fix(remix-dev): handle absolute bundled CSS URLs

.changeset/absolute-css-urls.md

@@ -0,0 +1,5 @@
+---
+"@remix-run/dev": patch
+---
+
+Fix absolute paths in CSS `url()` rules when using CSS Modules, Vanilla Extract and CSS side-effect imports

integration/css-modules-test.ts

@@ -61,6 +61,7 @@ test.describe("CSS Modules", () => {
         ...rootRelativeImportedValueFixture(),
         ...imageUrlsFixture(),
         ...rootRelativeImageUrlsFixture(),
+        ...absoluteImageUrlsFixture(),
         ...clientEntrySideEffectsFixture(),
         ...deduplicatedCssFixture(),
         ...uniqueClassNamesFixture(),
@@ -541,6 +542,51 @@ test.describe("CSS Modules", () => {
     expect(imgStatus).toBe(200);
   });
 
+  let absoluteImageUrlsFixture = () => ({
+    "app/routes/absolute-image-urls-test.jsx": js`
+      import { Test } from "~/test-components/absolute-image-urls";
+      export default function() {
+        return <Test />;
+      }
+    `,
+    "app/test-components/absolute-image-urls/index.jsx": js`
+      import styles from "./styles.module.css";
+      export function Test() {
+        return (
+          <div data-testid="absolute-image-urls" className={styles.root}>
+            Image URLs test
+          </div>
+        );
+      }
+    `,
+    "app/test-components/absolute-image-urls/styles.module.css": css`
+      .root {
+        background-color: peachpuff;
+        background-image: url(/absolute-image-urls/image.svg);
+        padding: ${TEST_PADDING_VALUE};
+      }
+    `,
+    "public/absolute-image-urls/image.svg": `
+      <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+        <circle cx="50" cy="50" r="50" fill="coral" />
+      </svg>
+    `,
+  });
+  test("absolute image URLs", async ({ page }) => {
+    let app = new PlaywrightFixture(appFixture, page);
+    let imgStatus: number | null = null;
+    app.page.on("response", (res) => {
+      if (res.url().endsWith(".svg")) imgStatus = res.status();
+    });
+    await app.goto("/absolute-image-urls-test");
+    let locator = await page.locator("[data-testid='absolute-image-urls']");
+    let backgroundImage = await locator.evaluate(
+      (element) => window.getComputedStyle(element).backgroundImage
+    );
+    expect(backgroundImage).toContain(".svg");
+    expect(imgStatus).toBe(200);
+  });
+
   let clientEntrySideEffectsFixture = () => ({
     "app/entry.client.jsx": js`
       import { RemixBrowser } from "@remix-run/react";

integration/css-side-effect-imports-test.ts

@@ -57,6 +57,7 @@ test.describe("CSS side-effect imports", () => {
         ...rootRelativeFixture(),
         ...imageUrlsFixture(),
         ...rootRelativeImageUrlsFixture(),
+        ...absoluteImageUrlsFixture(),
         ...commonJsPackageFixture(),
         ...esmPackageFixture(),
       },
@@ -206,6 +207,46 @@ test.describe("CSS side-effect imports", () => {
     expect(imgStatus).toBe(200);
   });
 
+  let absoluteImageUrlsFixture = () => ({
+    "app/absoluteImageUrls/styles.css": css`
+      .absoluteImageUrls {
+        background-color: peachpuff;
+        background-image: url(/absoluteImageUrls/image.svg);
+        padding: ${TEST_PADDING_VALUE};
+      }
+    `,
+    "public/absoluteImageUrls/image.svg": `
+      <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+        <circle cx="50" cy="50" r="50" fill="coral" />
+      </svg>
+    `,
+    "app/routes/absolute-image-urls-test.jsx": js`
+      import "../absoluteImageUrls/styles.css";
+
+      export default function() {
+        return (
+          <div data-testid="absolute-image-urls" className="absoluteImageUrls">
+            Absolute image URLs test
+          </div>
+        )
+      }
+    `,
+  });
+  test("absolute image URLs", async ({ page }) => {
+    let app = new PlaywrightFixture(appFixture, page);
+    let imgStatus: number | null = null;
+    app.page.on("response", (res) => {
+      if (res.url().endsWith(".svg")) imgStatus = res.status();
+    });
+    await app.goto("/absolute-image-urls-test");
+    let locator = await page.locator("[data-testid='absolute-image-urls']");
+    let backgroundImage = await locator.evaluate(
+      (element) => window.getComputedStyle(element).backgroundImage
+    );
+    expect(backgroundImage).toContain(".svg");
+    expect(imgStatus).toBe(200);
+  });
+
   let commonJsPackageFixture = () => ({
     "node_modules/@test-package/commonjs/styles.css": css`
       .commonJsPackage {

integration/vanilla-extract-test.ts

@@ -58,6 +58,7 @@ test.describe("Vanilla Extract", () => {
             ...stableIdentifiersFixture(),
             ...imageUrlsViaCssUrlFixture(),
             ...imageUrlsViaRootRelativeCssUrlFixture(),
+            ...imageUrlsViaAbsoluteCssUrlFixture(),
             ...imageUrlsViaJsImportFixture(),
             ...imageUrlsViaRootRelativeJsImportFixture(),
             ...imageUrlsViaClassCompositionFixture(),
@@ -416,6 +417,50 @@ test.describe("Vanilla Extract", () => {
         expect(imgStatus).toBe(200);
       });
 
+      let imageUrlsViaAbsoluteCssUrlFixture = () => ({
+        "app/fixtures/imageUrlsViaAbsoluteCssUrl/styles.css.ts": js`
+          import { style } from "@vanilla-extract/css";
+
+          export const root = style({
+            backgroundColor: 'peachpuff',
+            backgroundImage: 'url("/imageUrlsViaAbsoluteCssUrl/image.svg")',
+            padding: ${JSON.stringify(TEST_PADDING_VALUE)}
+          });
+        `,
+        "public/imageUrlsViaAbsoluteCssUrl/image.svg": `
+          <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+            <circle cx="50" cy="50" r="50" fill="coral" />
+          </svg>
+        `,
+        "app/routes/image-urls-via-absolute-css-url-test.jsx": js`
+          import * as styles from "../fixtures/imageUrlsViaAbsoluteCssUrl/styles.css";
+
+          export default function() {
+            return (
+              <div data-testid="image-urls-via-absolute-css-url" className={styles.root}>
+                Image URLs via absolute CSS URL test
+              </div>
+            )
+          }
+        `,
+      });
+      test("image URLs via absolute CSS URL", async ({ page }) => {
+        let app = new PlaywrightFixture(appFixture, page);
+        let imgStatus: number | null = null;
+        app.page.on("response", (res) => {
+          if (res.url().endsWith(".svg")) imgStatus = res.status();
+        });
+        await app.goto("/image-urls-via-absolute-css-url-test");
+        let locator = await page.locator(
+          "[data-testid='image-urls-via-absolute-css-url']"
+        );
+        let backgroundImage = await locator.evaluate(
+          (element) => window.getComputedStyle(element).backgroundImage
+        );
+        expect(backgroundImage).toContain(".svg");
+        expect(imgStatus).toBe(200);
+      });
+
       let imageUrlsViaJsImportFixture = () => ({
         "app/fixtures/imageUrlsViaJsImport/styles.css.ts": js`
           import { style } from "@vanilla-extract/css";

packages/remix-dev/compiler/browserjs/compiler.ts

@@ -11,6 +11,7 @@ import type { CompileOptions } from "../options";
 import { browserRouteModulesPlugin } from "./plugins/routes";
 import { browserRouteModulesPlugin as browserRouteModulesPlugin_v2 } from "./plugins/routes_unstable";
 import { cssFilePlugin } from "../plugins/cssImports";
+import { absoluteCssUrlsPlugin } from "../plugins/absoluteCssUrlsPlugin";
 import { deprecatedRemixPackagePlugin } from "../plugins/deprecatedRemixPackage";
 import { emptyModulesPlugin } from "../plugins/emptyModules";
 import { mdxPlugin } from "../plugins/mdx";
@@ -117,6 +118,7 @@ const createEsbuildConfig = (
       ? cssSideEffectImportsPlugin({ config, options })
       : null,
     cssFilePlugin({ config, options }),
+    absoluteCssUrlsPlugin(),
     externalPlugin(/^https?:\/\//, { sideEffects: false }),
     mdxPlugin(config),
     config.future.unstable_dev

packages/remix-dev/compiler/css/compiler.ts

@@ -11,6 +11,7 @@ import { getAppDependencies } from "../../dependencies";
 import { loaders } from "../utils/loaders";
 import type { CompileOptions } from "../options";
 import { cssFilePlugin } from "../plugins/cssImports";
+import { absoluteCssUrlsPlugin } from "../plugins/absoluteCssUrlsPlugin";
 import { emptyModulesPlugin } from "../plugins/emptyModules";
 import { mdxPlugin } from "../plugins/mdx";
 import { externalPlugin } from "../plugins/external";
@@ -70,6 +71,7 @@ const createEsbuildConfig = (
       ? cssSideEffectImportsPlugin({ config, options })
       : null,
     cssFilePlugin({ config, options }),
+    absoluteCssUrlsPlugin(),
     externalPlugin(/^https?:\/\//, { sideEffects: false }),
     mdxPlugin(config),
     emptyModulesPlugin(config, /\.server(\.[jt]sx?)?$/),

packages/remix-dev/compiler/plugins/absoluteCssUrlsPlugin.ts

@@ -0,0 +1,23 @@
+import path from "path";
+import type { Plugin, PluginBuild } from "esbuild";
+
+/**
+ * This plugin treats absolute paths in 'url()' css rules as external to prevent
+ * breaking changes
+ */
+export const absoluteCssUrlsPlugin = (): Plugin => {
+  return {
+    name: "absolute-css-urls-plugin",
+    setup: async (build: PluginBuild) => {
+      build.onResolve({ filter: /.*/ }, async (args) => {
+        let { kind, path: resolvePath } = args;
+        if (kind === "url-token" && path.isAbsolute(resolvePath)) {
+          return {
+            path: resolvePath,
+            external: true,
+          };
+        }
+      });
+    },
+  };
+};

packages/remix-dev/compiler/plugins/cssImports.ts

@@ -7,6 +7,7 @@ import invariant from "../../invariant";
 import type { RemixConfig } from "../../config";
 import type { CompileOptions } from "../options";
 import { getPostcssProcessor } from "../utils/postcss";
+import { absoluteCssUrlsPlugin } from "./absoluteCssUrlsPlugin";
 
 const isExtendedLengthPath = /^\\\\\?\\/;
 
@@ -51,22 +52,8 @@ export function cssFilePlugin({
             ...buildOps.loader,
             ".css": "css",
           },
-          // this plugin treats absolute paths in 'url()' css rules as external to prevent breaking changes
           plugins: [
-            {
-              name: "resolve-absolute",
-              async setup(build) {
-                build.onResolve({ filter: /.*/ }, async (args) => {
-                  let { kind, path: resolvePath } = args;
-                  if (kind === "url-token" && path.isAbsolute(resolvePath)) {
-                    return {
-                      path: resolvePath,
-                      external: true,
-                    };
-                  }
-                });
-              },
-            },
+            absoluteCssUrlsPlugin(),
             ...(postcssProcessor
               ? [postcssPlugin({ postcssProcessor, options })]
               : []),

packages/remix-dev/compiler/serverjs/compiler.ts

@@ -11,6 +11,7 @@ import { cssModulesPlugin } from "../plugins/cssModuleImports";
 import { cssSideEffectImportsPlugin } from "../plugins/cssSideEffectImports";
 import { vanillaExtractPlugin } from "../plugins/vanillaExtract";
 import { cssFilePlugin } from "../plugins/cssImports";
+import { absoluteCssUrlsPlugin } from "../plugins/absoluteCssUrlsPlugin";
 import { deprecatedRemixPackagePlugin } from "../plugins/deprecatedRemixPackage";
 import { emptyModulesPlugin } from "../plugins/emptyModules";
 import { mdxPlugin } from "../plugins/mdx";
@@ -59,6 +60,7 @@ const createEsbuildConfig = (
       ? cssSideEffectImportsPlugin({ config, options })
       : null,
     cssFilePlugin({ config, options }),
+    absoluteCssUrlsPlugin(),
     externalPlugin(/^https?:\/\//, { sideEffects: false }),
     mdxPlugin(config),
     emptyModulesPlugin(config, /\.client(\.[jt]sx?)?$/),