fix(css): resolve at import from dependency basedir (#12796)

packages/vite/rollup.config.ts

@@ -125,7 +125,7 @@ function createNodePlugins(
         // bundling the `resolve` dep.
         'postcss-import/index.js': {
           src: 'const resolveId = require("./lib/resolve-id")',
-          replacement: 'const resolveId = undefined',
+          replacement: 'const resolveId = (id) => id',
         },
       }),
 

packages/vite/src/node/plugins/css.ts

@@ -929,6 +929,18 @@ async function compileCSS(
           if (resolved) {
             return path.resolve(resolved)
           }
+
+          // postcss-import falls back to `resolve` dep if this is unresolved,
+          // but we've shimmed to remove the `resolve` dep to cut on bundle size.
+          // warn here to provide a better error message.
+          if (!path.isAbsolute(id)) {
+            config.logger.error(
+              colors.red(
+                `Unable to resolve \`@import "${id}"\` from ${basedir}`,
+              ),
+            )
+          }
+
           return id
         },
         nameLayer(index) {

packages/vite/src/node/plugins/resolve.ts

@@ -695,12 +695,11 @@ export function tryNodeResolve(
   let basedir: string
   if (dedupe?.includes(pkgId)) {
     basedir = root
-  } else if (
-    importer &&
-    path.isAbsolute(importer) &&
-    fs.existsSync(cleanUrl(importer))
-  ) {
+  } else if (importer && path.isAbsolute(importer)) {
     basedir = path.dirname(importer)
+    if (!fs.existsSync(basedir)) {
+      basedir = root
+    }
   } else {
     basedir = root
   }

playground/css/__tests__/css.spec.ts

@@ -297,6 +297,10 @@ test('@import dependency w/ sass export mapping', async () => {
   expect(await getColor('.css-dep-exports-sass')).toBe('orange')
 })
 
+test('@import dependency that @import another dependency', async () => {
+  expect(await getColor('.css-proxy-dep')).toBe('purple')
+})
+
 test('@import dependency w/out package scss', async () => {
   expect(await getColor('.sass-dep')).toBe('lavender')
 })

playground/css/css-proxy-dep-nested/index.css

@@ -0,0 +1,3 @@
+.css-proxy-dep {
+  color: purple;
+}

playground/css/css-proxy-dep-nested/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "@vitejs/test-css-proxy-dep-nested",
+  "private": true,
+  "version": "1.0.0",
+  "style": "index.css"
+}

playground/css/css-proxy-dep/index.css

@@ -0,0 +1 @@
+@import '@vitejs/test-css-proxy-dep-nested';

playground/css/css-proxy-dep/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "@vitejs/test-css-proxy-dep",
+  "private": true,
+  "version": "1.0.0",
+  "style": "index.css",
+  "dependencies": {
+    "@vitejs/test-css-proxy-dep-nested": "file:../css-proxy-dep-nested"
+  }
+}

playground/css/dep.css

@@ -1,2 +1,3 @@
 @import '@vitejs/test-css-dep';
 @import '@vitejs/test-css-dep-exports';
+@import '@vitejs/test-css-proxy-dep';

playground/css/index.html

@@ -140,6 +140,10 @@
     @import dependency w/ sass export mapping: this should be orange
   </p>
 
+  <p class="css-proxy-dep">
+    @import dependency that @import another dependency: this should be purple
+  </p>
+
   <p class="dir-dep">PostCSS dir-dependency: this should be grey</p>
   <p class="dir-dep-2">
     PostCSS dir-dependency (file 2): this should be grey too

playground/css/package.json

@@ -18,6 +18,7 @@
     "@vitejs/test-css-dep": "link:./css-dep",
     "@vitejs/test-css-dep-exports": "link:./css-dep-exports",
     "@vitejs/test-css-js-dep": "file:./css-js-dep",
+    "@vitejs/test-css-proxy-dep": "file:./css-proxy-dep",
     "fast-glob": "^3.2.12",
     "less": "^4.1.3",
     "postcss-nested": "^6.0.1",

pnpm-lock.yaml

@@ -369,6 +369,7 @@ importers:
       '@vitejs/test-css-dep': link:./css-dep
       '@vitejs/test-css-dep-exports': link:./css-dep-exports
       '@vitejs/test-css-js-dep': file:./css-js-dep
+      '@vitejs/test-css-proxy-dep': file:./css-proxy-dep
       fast-glob: ^3.2.12
       less: ^4.1.3
       postcss-nested: ^6.0.1
@@ -379,6 +380,7 @@ importers:
       '@vitejs/test-css-dep': link:css-dep
       '@vitejs/test-css-dep-exports': link:css-dep-exports
       '@vitejs/test-css-js-dep': file:playground/css/css-js-dep
+      '@vitejs/test-css-proxy-dep': file:playground/css/css-proxy-dep
       fast-glob: 3.2.12
       less: 4.1.3
       postcss-nested: 6.0.1
@@ -418,6 +420,15 @@ importers:
   playground/css/css-js-dep:
     specifiers: {}
 
+  playground/css/css-proxy-dep:
+    specifiers:
+      '@vitejs/test-css-proxy-dep-nested': file:../css-proxy-dep-nested
+    dependencies:
+      '@vitejs/test-css-proxy-dep-nested': file:playground/css/css-proxy-dep-nested
+
+  playground/css/css-proxy-dep-nested:
+    specifiers: {}
+
   playground/css/pkg-dep:
     specifiers: {}
 
@@ -10095,6 +10106,19 @@ packages:
     version: 1.0.0
     dev: true
 
+  file:playground/css/css-proxy-dep:
+    resolution: {directory: playground/css/css-proxy-dep, type: directory}
+    name: '@vitejs/test-css-proxy-dep'
+    version: 1.0.0
+    dependencies:
+      '@vitejs/test-css-proxy-dep-nested': file:playground/css/css-proxy-dep-nested
+    dev: true
+
+  file:playground/css/css-proxy-dep-nested:
+    resolution: {directory: playground/css/css-proxy-dep-nested, type: directory}
+    name: '@vitejs/test-css-proxy-dep-nested'
+    version: 1.0.0
+
   file:playground/define/commonjs-dep:
     resolution: {directory: playground/define/commonjs-dep, type: directory}
     name: '@vitejs/test-commonjs-dep'