From 8ccf7222e9ffaa5e97bd0797de101c8bc6ca8d41 Mon Sep 17 00:00:00 2001 From: smeng9 <38666763+smeng9@users.noreply.github.com> Date: Tue, 9 Jan 2024 05:51:14 +0800 Subject: [PATCH] fix(css): @import with .css in node_modules importing a different package failed to resolve (#15000) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Shaoyu Meng Co-authored-by: 翠 / green --- packages/vite/src/node/plugins/css.ts | 14 +++++++++--- playground/css/__tests__/css.spec.ts | 4 ++++ playground/css/index.html | 4 ++++ playground/css/package.json | 1 + playground/css/sass.scss | 1 + .../css/scss-proxy-dep-nested/index.css | 3 +++ .../css/scss-proxy-dep-nested/package.json | 5 +++++ playground/css/scss-proxy-dep/index.scss | 1 + playground/css/scss-proxy-dep/package.json | 9 ++++++++ pnpm-lock.yaml | 22 +++++++++++++++++++ 10 files changed, 61 insertions(+), 3 deletions(-) create mode 100644 playground/css/scss-proxy-dep-nested/index.css create mode 100644 playground/css/scss-proxy-dep-nested/package.json create mode 100644 playground/css/scss-proxy-dep/index.scss create mode 100644 playground/css/scss-proxy-dep/package.json diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts index 654113da1411bb..3a52be03eefe7a 100644 --- a/packages/vite/src/node/plugins/css.ts +++ b/packages/vite/src/node/plugins/css.ts @@ -1844,7 +1844,13 @@ const scss: SassStylePreprocessor = async ( importer = cleanScssBugUrl(importer) resolvers.sass(url, importer).then((resolved) => { if (resolved) { - rebaseUrls(resolved, options.filename, options.alias, '$') + rebaseUrls( + resolved, + options.filename, + options.alias, + '$', + resolvers.sass, + ) .then((data) => done?.(fixScssBugImportValue(data))) .catch((data) => done?.(data)) } else { @@ -1930,6 +1936,7 @@ async function rebaseUrls( rootFile: string, alias: Alias[], variablePrefix: string, + resolver: ResolveFn, ): Promise { file = path.resolve(file) // ensure os-specific flashes // in the same dir, no need to rebase @@ -1952,7 +1959,7 @@ async function rebaseUrls( } let rebased - const rebaseFn = (url: string) => { + const rebaseFn = async (url: string) => { if (url[0] === '/') return url // ignore url's starting with variable if (url.startsWith(variablePrefix)) return url @@ -1964,7 +1971,7 @@ async function rebaseUrls( return url } } - const absolute = path.resolve(fileDir, url) + const absolute = (await resolver(url, file)) || path.resolve(fileDir, url) const relative = path.relative(rootDir, absolute) return normalizePath(relative) } @@ -2093,6 +2100,7 @@ function createViteLessPlugin( this.rootFile, this.alias, '@', + this.resolvers.less, ) let contents: string if (result && 'contents' in result) { diff --git a/playground/css/__tests__/css.spec.ts b/playground/css/__tests__/css.spec.ts index 8b4f498430e099..4fdb23df0c4930 100644 --- a/playground/css/__tests__/css.spec.ts +++ b/playground/css/__tests__/css.spec.ts @@ -292,6 +292,10 @@ test('@import dependency that @import another dependency', async () => { expect(await getColor('.css-proxy-dep')).toBe('purple') }) +test('@import scss dependency that has @import with a css extension pointing to another dependency', async () => { + expect(await getColor('.scss-proxy-dep')).toBe('purple') +}) + test('@import dependency w/out package scss', async () => { expect(await getColor('.sass-dep')).toBe('lavender') }) diff --git a/playground/css/index.html b/playground/css/index.html index 2016c1b3c72ca8..67644c75d4502c 100644 --- a/playground/css/index.html +++ b/playground/css/index.html @@ -143,6 +143,10 @@

CSS

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

+

+ @import dependency that has @import with a css extension pointing to another + dependency: this should be purple +

PostCSS dir-dependency: this should be grey

diff --git a/playground/css/package.json b/playground/css/package.json index f80acbf572675e..cd699d809c767f 100644 --- a/playground/css/package.json +++ b/playground/css/package.json @@ -20,6 +20,7 @@ "@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", + "@vitejs/test-scss-proxy-dep": "file:./scss-proxy-dep", "fast-glob": "^3.3.2", "less": "^4.2.0", "postcss-nested": "^6.0.1", diff --git a/playground/css/sass.scss b/playground/css/sass.scss index 4105e1aefa9c55..f2f9e685630597 100644 --- a/playground/css/sass.scss +++ b/playground/css/sass.scss @@ -2,6 +2,7 @@ @import '=/nested/partial'; // sass convention: omitting leading _ for partials @import '@vitejs/test-css-dep'; // package w/ sass entry points @import '@vitejs/test-css-dep-exports'; // package with a sass export mapping +@import '@vitejs/test-scss-proxy-dep'; // package with a sass proxy import @import 'virtual-dep'; // virtual file added through importer @import '=/pkg-dep'; // package w/out sass field @import '=/weapp.wxss'; // wxss file diff --git a/playground/css/scss-proxy-dep-nested/index.css b/playground/css/scss-proxy-dep-nested/index.css new file mode 100644 index 00000000000000..4c7e3b16e62597 --- /dev/null +++ b/playground/css/scss-proxy-dep-nested/index.css @@ -0,0 +1,3 @@ +.scss-proxy-dep { + color: purple; +} diff --git a/playground/css/scss-proxy-dep-nested/package.json b/playground/css/scss-proxy-dep-nested/package.json new file mode 100644 index 00000000000000..4f7a99bb559207 --- /dev/null +++ b/playground/css/scss-proxy-dep-nested/package.json @@ -0,0 +1,5 @@ +{ + "name": "@vitejs/test-scss-proxy-dep-nested", + "private": true, + "version": "1.0.0" +} diff --git a/playground/css/scss-proxy-dep/index.scss b/playground/css/scss-proxy-dep/index.scss new file mode 100644 index 00000000000000..2b1a7a543cd776 --- /dev/null +++ b/playground/css/scss-proxy-dep/index.scss @@ -0,0 +1 @@ +@import '@vitejs/test-scss-proxy-dep-nested/index.css'; diff --git a/playground/css/scss-proxy-dep/package.json b/playground/css/scss-proxy-dep/package.json new file mode 100644 index 00000000000000..a2749e7ae3e957 --- /dev/null +++ b/playground/css/scss-proxy-dep/package.json @@ -0,0 +1,9 @@ +{ + "name": "@vitejs/test-scss-proxy-dep", + "private": true, + "version": "1.0.0", + "sass": "index.scss", + "dependencies": { + "@vitejs/test-scss-proxy-dep-nested": "file:../scss-proxy-dep-nested" + } +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1cdfd7279d691a..391f6654b9f1da 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -514,6 +514,9 @@ importers: '@vitejs/test-css-proxy-dep': specifier: file:./css-proxy-dep version: file:playground/css/css-proxy-dep + '@vitejs/test-scss-proxy-dep': + specifier: file:./scss-proxy-dep + version: file:playground/css/scss-proxy-dep fast-glob: specifier: ^3.3.2 version: 3.3.2 @@ -592,6 +595,14 @@ importers: playground/css/postcss-caching/green-app: {} + playground/css/scss-proxy-dep: + dependencies: + '@vitejs/test-scss-proxy-dep-nested': + specifier: file:../scss-proxy-dep-nested + version: file:playground/css/scss-proxy-dep-nested + + playground/css/scss-proxy-dep-nested: {} + playground/data-uri: {} playground/define: @@ -10130,6 +10141,17 @@ packages: resolution: {directory: playground/css/css-proxy-dep-nested, type: directory} name: '@vitejs/test-css-proxy-dep-nested' + file:playground/css/scss-proxy-dep: + resolution: {directory: playground/css/scss-proxy-dep, type: directory} + name: '@vitejs/test-scss-proxy-dep' + dependencies: + '@vitejs/test-scss-proxy-dep-nested': file:playground/css/scss-proxy-dep-nested + dev: true + + file:playground/css/scss-proxy-dep-nested: + resolution: {directory: playground/css/scss-proxy-dep-nested, type: directory} + name: '@vitejs/test-scss-proxy-dep-nested' + file:playground/define/commonjs-dep: resolution: {directory: playground/define/commonjs-dep, type: directory} name: '@vitejs/test-commonjs-dep'