diff --git a/packages/vite/rollup.config.ts b/packages/vite/rollup.config.ts index b50359581147e0..7a1064778ae9f8 100644 --- a/packages/vite/rollup.config.ts +++ b/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', }, }), diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts index d189ae06231d42..dd49feb4c744d0 100644 --- a/packages/vite/src/node/plugins/css.ts +++ b/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) { diff --git a/packages/vite/src/node/plugins/resolve.ts b/packages/vite/src/node/plugins/resolve.ts index 52a01652d4cd5d..720f4e6b5f9e5c 100644 --- a/packages/vite/src/node/plugins/resolve.ts +++ b/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 } diff --git a/playground/css/__tests__/css.spec.ts b/playground/css/__tests__/css.spec.ts index 45a33d4c3b1950..e0ef92c74c149b 100644 --- a/playground/css/__tests__/css.spec.ts +++ b/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') }) diff --git a/playground/css/css-proxy-dep-nested/index.css b/playground/css/css-proxy-dep-nested/index.css new file mode 100644 index 00000000000000..ad0654a130d2e5 --- /dev/null +++ b/playground/css/css-proxy-dep-nested/index.css @@ -0,0 +1,3 @@ +.css-proxy-dep { + color: purple; +} diff --git a/playground/css/css-proxy-dep-nested/package.json b/playground/css/css-proxy-dep-nested/package.json new file mode 100644 index 00000000000000..06cb23332c7c56 --- /dev/null +++ b/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" +} diff --git a/playground/css/css-proxy-dep/index.css b/playground/css/css-proxy-dep/index.css new file mode 100644 index 00000000000000..9b31759a8a326d --- /dev/null +++ b/playground/css/css-proxy-dep/index.css @@ -0,0 +1 @@ +@import '@vitejs/test-css-proxy-dep-nested'; diff --git a/playground/css/css-proxy-dep/package.json b/playground/css/css-proxy-dep/package.json new file mode 100644 index 00000000000000..60256b6f4e2486 --- /dev/null +++ b/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" + } +} diff --git a/playground/css/dep.css b/playground/css/dep.css index 3578a9d5312363..2577e5b8cb3578 100644 --- a/playground/css/dep.css +++ b/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'; diff --git a/playground/css/index.html b/playground/css/index.html index 791a549ae53349..748181b87f064e 100644 --- a/playground/css/index.html +++ b/playground/css/index.html @@ -140,6 +140,10 @@

CSS

@import dependency w/ sass export mapping: this should be orange

+

+ @import dependency that @import another dependency: this should be purple +

+

PostCSS dir-dependency: this should be grey

PostCSS dir-dependency (file 2): this should be grey too diff --git a/playground/css/package.json b/playground/css/package.json index 5153cb18f69f1b..826701058bd17e 100644 --- a/playground/css/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f0d4ad1c4f32b3..66e061bcb9b84c 100644 --- a/pnpm-lock.yaml +++ b/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'