From 3d7ad1241e95e32bfab08ec144d8d95e558eedf7 Mon Sep 17 00:00:00 2001
From: bluwy
Date: Sun, 9 Apr 2023 11:35:27 +0800
Subject: [PATCH] fix(css): resolve at import from dependency basedir
---
packages/vite/rollup.config.ts | 2 +-
packages/vite/src/node/plugins/css.ts | 12 ++++++++++
packages/vite/src/node/plugins/resolve.ts | 9 ++++---
playground/css/__tests__/css.spec.ts | 4 ++++
playground/css/css-proxy-dep-nested/index.css | 3 +++
.../css/css-proxy-dep-nested/package.json | 6 +++++
playground/css/css-proxy-dep/index.css | 1 +
playground/css/css-proxy-dep/package.json | 9 +++++++
playground/css/dep.css | 1 +
playground/css/index.html | 4 ++++
playground/css/package.json | 1 +
pnpm-lock.yaml | 24 +++++++++++++++++++
12 files changed, 70 insertions(+), 6 deletions(-)
create mode 100644 playground/css/css-proxy-dep-nested/index.css
create mode 100644 playground/css/css-proxy-dep-nested/package.json
create mode 100644 playground/css/css-proxy-dep/index.css
create mode 100644 playground/css/css-proxy-dep/package.json
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'