vite: Fix incorrect bundling of imported assets when base is set in vite config (#1583)

Author: askoufis

.changeset/large-glasses-travel.md

@@ -0,0 +1,8 @@
+---
+'@vanilla-extract/compiler': patch
+'@vanilla-extract/vite-plugin': patch
+---
+
+Ignore Vite `base` config
+
+Fixes a bug where imported asset URLs would be transformed by the compiler when setting the `base` option in Vite, resulting in incorrect resolution and bundling of these assets during the build process.

packages/compiler/src/compiler.ts

@@ -101,6 +101,9 @@ const createViteServer = async ({
 
   const server = await vite.createServer({
     ...viteConfig,
+    // The vite-node server should not rewrite imported asset URLs within VE stylesheets.
+    // Doing so interferes with Vite's resolution and bundling of these assets at build time.
+    base: undefined,
     configFile: false,
     root,
     server: {

tests/compiler/compiler.test.ts

@@ -23,7 +23,8 @@ describe('compiler', () => {
     | 'shortIdentifiers'
     | 'viteResolve'
     | 'vitePlugins'
-    | 'tsconfigPaths',
+    | 'tsconfigPaths'
+    | 'basePath',
     ReturnType<typeof createCompiler>
   >;
 
@@ -72,6 +73,12 @@ describe('compiler', () => {
         root: __dirname,
         vitePlugins: [tsconfigPaths()],
       }),
+      basePath: createCompiler({
+        root: __dirname,
+        viteConfig: {
+          base: '/assets/',
+        },
+      }),
     };
   });
 
@@ -521,4 +528,27 @@ describe('compiler', () => {
       }
     `);
   });
+
+  test('base path should be ignored', async () => {
+    const compiler = compilers.basePath;
+
+    const cssPath = path.join(__dirname, 'fixtures/vite-config/image.css.ts');
+    const output = await compiler.processVanillaFile(cssPath);
+    const { css } = compiler.getCssForFile(cssPath);
+
+    expect(output.source).toMatchInlineSnapshot(`
+      import '{{__dirname}}/fixtures/vite-config/image.css.ts.vanilla.css';
+      export var imageStyle1 = 'image_imageStyle1__1lseqzh0';
+      export var imageStyle2 = 'image_imageStyle2__1lseqzh1';
+    `);
+
+    expect(css).toMatchInlineSnapshot(`
+      .image_imageStyle1__1lseqzh0 {
+        background-image: url('/fixtures/vite-config/test.jpg');
+      }
+      .image_imageStyle2__1lseqzh1 {
+        background-image: url('/fixtures/vite-config/test.jpg');
+      }
+    `);
+  });
 });

tests/compiler/fixtures/vite-config/image.css.ts

@@ -0,0 +1,11 @@
+import { style } from '@vanilla-extract/css';
+// @ts-expect-error No type definition for image assets
+import testImage from './test.jpg';
+
+export const imageStyle1 = style({
+  backgroundImage: `url('${testImage}')`,
+});
+
+export const imageStyle2 = style({
+  backgroundImage: `url('/fixtures/vite-config/test.jpg')`,
+});