Correctly resolve module paths when using Vite plugins that affect module resolution (#1309)

Author: mrm007

.changeset/integration.md

@@ -0,0 +1,7 @@
+---
+'@vanilla-extract/integration': major
+---
+
+Use absolute paths internally to make sure Vite resolves modules correctly
+
+This change only affects integrations that use the vite-node compiler, which is currently the esbuild (next) and Vite plugins

.changeset/plugins.md

@@ -0,0 +1,6 @@
+---
+'@vanilla-extract/vite-plugin': patch
+'@vanilla-extract/esbuild-plugin-next': patch
+---
+
+Correctly resolve module paths when using Vite plugins that affect module resolution, such as [`vite-tsconfig-paths`](https://github.com/aleclarson/vite-tsconfig-paths)

package.json

@@ -14,7 +14,7 @@
     "start-site": "pnpm --filter=site start",
     "build-site": "pnpm --filter=site build",
     "test:unit": "pnpm test:jest && pnpm test:vitest",
-    "test:jest": "jest",
+    "test:jest": "cross-env NODE_OPTIONS=--experimental-vm-modules jest",
     "test:vitest": "vitest --watch=false",
     "test:playwright": "NODE_OPTIONS=--no-experimental-fetch playwright test",
     "format": "prettier --write .",
@@ -41,17 +41,18 @@
     "@types/testing-library__jest-dom": "^5.14.5",
     "@vanilla-extract/jest-transform": "*",
     "babel-jest": "^27.3.1",
+    "cross-env": "^7.0.3",
     "fast-glob": "^3.2.7",
-    "jest": "^29.3.1",
+    "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.3.1",
     "prettier": "^2.8.8",
     "resolve.exports": "^1.1.0",
     "rollup": "^2.7.0",
     "rollup-plugin-dts": "^4.2.2",
     "rollup-plugin-node-externals": "^5.0.0",
     "ts-node": "^10.0.0",
-    "typescript": "^4.9.4",
-    "vitest": "^1.1.0"
+    "typescript": "^5.3.3",
+    "vitest": "^1.2.2"
   },
   "preconstruct": {
     "___experimentalFlags_WILL_CHANGE_IN_PATCH": {

packages/esbuild-plugin-next/src/index.ts

@@ -53,9 +53,9 @@ export function vanillaExtractPlugin({
       build.onLoad(
         { filter: /.*/, namespace: vanillaCssNamespace },
         async ({ path }) => {
-          const [rootRelativePath] = path.split('.vanilla.css');
+          const [vanillaModulePath] = path.split('.vanilla.css');
 
-          let { css, filePath } = compiler.getCssForFile(rootRelativePath);
+          let { css, filePath } = compiler.getCssForFile(vanillaModulePath);
 
           if (typeof processCss === 'function') {
             css = await processCss(css);

packages/integration/src/compiler.ts

@@ -1,4 +1,4 @@
-import { join, relative, isAbsolute } from 'path';
+import { join, isAbsolute } from 'path';
 import type { Adapter } from '@vanilla-extract/css';
 import { transformCss } from '@vanilla-extract/css/transformCss';
 import type { ModuleNode, InlineConfig as ViteConfig } from 'vite';
@@ -16,7 +16,7 @@ type Composition = Parameters<Adapter['registerComposition']>[0];
 
 const globalAdapterIdentifier = '__vanilla_globalCssAdapter__';
 
-const scanModule = (entryModule: ModuleNode, root: string) => {
+const scanModule = (entryModule: ModuleNode) => {
   const queue = new Set([entryModule]);
   const cssDeps = new Set<string>();
   const watchFiles = new Set<string>();
@@ -26,10 +26,8 @@ const scanModule = (entryModule: ModuleNode, root: string) => {
       continue;
     }
 
-    const relativePath = moduleNode.id && relative(root, moduleNode.id);
-
-    if (relativePath && cssFileFilter.test(relativePath)) {
-      cssDeps.add(relativePath);
+    if (moduleNode.id && cssFileFilter.test(moduleNode.id)) {
+      cssDeps.add(moduleNode.id);
     }
     if (moduleNode.file) {
       watchFiles.add(moduleNode.file);
@@ -151,7 +149,7 @@ class NormalizedMap<V> extends Map<string, V> {
 
   #normalizePath(filePath: string) {
     return normalizePath(
-      isAbsolute(filePath) ? relative(this.root, filePath) : filePath,
+      isAbsolute(filePath) ? filePath : join(this.root, filePath),
     );
   }
 
@@ -319,7 +317,7 @@ export const createCompiler = ({
 
           const cssImports = [];
 
-          const { cssDeps, watchFiles } = scanModule(moduleNode, root);
+          const { cssDeps, watchFiles } = scanModule(moduleNode);
 
           for (const cssDep of cssDeps) {
             const cssDepModuleId = normalizePath(cssDep);
@@ -388,9 +386,7 @@ export const createCompiler = ({
     },
     getCssForFile(filePath: string) {
       filePath = isAbsolute(filePath) ? filePath : join(root, filePath);
-      const rootRelativePath = relative(root, filePath);
-
-      const moduleId = normalizePath(rootRelativePath);
+      const moduleId = normalizePath(filePath);
       const result = cssCache.get(moduleId);
 
       if (!result) {
@@ -399,7 +395,7 @@ export const createCompiler = ({
 
       return {
         css: result.css,
-        filePath: rootRelativePath,
+        filePath: filePath,
         resolveDir: root,
       };
     },