From 5513b7b09c87ad112025c92f5a057aab9a567483 Mon Sep 17 00:00:00 2001 From: Hiroshi Ogawa Date: Wed, 28 Aug 2024 12:25:40 +0900 Subject: [PATCH 1/4] fix(css): fix directory index import in sass modern --- packages/vite/src/node/plugins/css.ts | 5 +---- playground/css/index.html | 1 + playground/css/sass.scss | 1 + playground/css/scss-dir/dir/index.scss | 3 +++ playground/css/scss-dir/main.scss | 1 + 5 files changed, 7 insertions(+), 4 deletions(-) create mode 100644 playground/css/scss-dir/dir/index.scss create mode 100644 playground/css/scss-dir/main.scss diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts index e447a486fc39b7..91f43f48638eb5 100644 --- a/packages/vite/src/node/plugins/css.ts +++ b/packages/vite/src/node/plugins/css.ts @@ -1097,10 +1097,7 @@ function createCSSResolvers(config: ResolvedConfig): CSSAtImportResolvers { sassResolve = async (...args) => { const id = args[0] if (id.startsWith('file://')) { - const fileUrl = new URL(id) - if (fs.existsSync(fileUrl)) { - return fileURLToPath(fileUrl) - } + args[0] = fileURLToPath(id) } return resolver(...args) } diff --git a/playground/css/index.html b/playground/css/index.html index 396ffc02fd3d27..45a38cdf9341b8 100644 --- a/playground/css/index.html +++ b/playground/css/index.html @@ -44,6 +44,7 @@

CSS

@import "file:///xxx/absolute-path.scss" should be orange

+

@import "./dir" should be orange

Less: This should be blue

diff --git a/playground/css/sass.scss b/playground/css/sass.scss index 44beb140e3fe3a..a49fcf1e8f3692 100644 --- a/playground/css/sass.scss +++ b/playground/css/sass.scss @@ -7,6 +7,7 @@ @import '=/pkg-dep'; // package w/out sass field @import '=/weapp.wxss'; // wxss file @import 'virtual-file-absolute'; +@import '=/scss-dir/main.scss'; // "./dir" reference from vite custom importer .sass { /* injected via vite.config.js */ diff --git a/playground/css/scss-dir/dir/index.scss b/playground/css/scss-dir/dir/index.scss new file mode 100644 index 00000000000000..e6bcdc2166b8ab --- /dev/null +++ b/playground/css/scss-dir/dir/index.scss @@ -0,0 +1,3 @@ +.sass-dir-index { + color: orange; +} diff --git a/playground/css/scss-dir/main.scss b/playground/css/scss-dir/main.scss new file mode 100644 index 00000000000000..2f3723f11945ca --- /dev/null +++ b/playground/css/scss-dir/main.scss @@ -0,0 +1 @@ +@import './dir'; From a8b921c1375b657a1934eda5afbeadb6cfae31bf Mon Sep 17 00:00:00 2001 From: Hiroshi Ogawa Date: Wed, 28 Aug 2024 12:28:44 +0900 Subject: [PATCH 2/4] test: add test --- playground/css/__tests__/css.spec.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/playground/css/__tests__/css.spec.ts b/playground/css/__tests__/css.spec.ts index 14894bf11e4228..5bdb49277269af 100644 --- a/playground/css/__tests__/css.spec.ts +++ b/playground/css/__tests__/css.spec.ts @@ -94,6 +94,7 @@ test('sass', async () => { ) expect(await getColor(partialImport)).toBe('orchid') expect(await getColor(await page.$('.sass-file-absolute'))).toBe('orange') + expect(await getColor(await page.$('.sass-dir-index'))).toBe('orange') editFile('sass.scss', (code) => code.replace('color: $injectedColor', 'color: red'), From c40fb9b0fd0a7ba5c8d319b444e6379dc2cf1fb3 Mon Sep 17 00:00:00 2001 From: Hiroshi Ogawa Date: Wed, 28 Aug 2024 14:44:50 +0900 Subject: [PATCH 3/4] fix: skip fixScssBugImportValue for sass-embedded --- packages/vite/src/node/plugins/css.ts | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts index 91f43f48638eb5..82a9ce134dfd1a 100644 --- a/packages/vite/src/node/plugins/css.ts +++ b/packages/vite/src/node/plugins/css.ts @@ -2099,6 +2099,7 @@ const makeScssWorker = ( resolvers: CSSAtImportResolvers, alias: Alias[], maxWorkers: number | undefined, + packageName: 'sass' | 'sass-embedded', ) => { const internalImporter = async ( url: string, @@ -2116,6 +2117,9 @@ const makeScssWorker = ( '$', resolvers.sass, ) + if (packageName === 'sass-embedded') { + return data + } return fixScssBugImportValue(data) } catch (data) { return data @@ -2408,7 +2412,12 @@ const scssProcessor = ( ? makeModernCompilerScssWorker(resolvers, options.alias, maxWorkers) : api === 'modern' ? makeModernScssWorker(resolvers, options.alias, maxWorkers) - : makeScssWorker(resolvers, options.alias, maxWorkers), + : makeScssWorker( + resolvers, + options.alias, + maxWorkers, + sassPackage.name, + ), ) } const worker = workerMap.get(options.alias)! From b48ef3de7f2793507a23c3e3e0630f1e998a9124 Mon Sep 17 00:00:00 2001 From: Hiroshi Ogawa Date: Wed, 28 Aug 2024 14:46:07 +0900 Subject: [PATCH 4/4] chore: cleanup --- packages/vite/src/node/plugins/css.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts index 82a9ce134dfd1a..1d3b5eb9a9d991 100644 --- a/packages/vite/src/node/plugins/css.ts +++ b/packages/vite/src/node/plugins/css.ts @@ -1095,9 +1095,8 @@ function createCSSResolvers(config: ResolvedConfig): CSSAtImportResolvers { preferRelative: true, }) sassResolve = async (...args) => { - const id = args[0] - if (id.startsWith('file://')) { - args[0] = fileURLToPath(id) + if (args[0].startsWith('file://')) { + args[0] = fileURLToPath(args[0]) } return resolver(...args) }