Skip to content

Commit 9b001ba

Browse files
authored
fix(css): fix directory index import in sass modern api (#17960)
1 parent 5c5f82c commit 9b001ba

File tree

6 files changed

+19
-7
lines changed

6 files changed

+19
-7
lines changed

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

+12-7
Original file line numberDiff line numberDiff line change
@@ -1095,12 +1095,8 @@ function createCSSResolvers(config: ResolvedConfig): CSSAtImportResolvers {
10951095
preferRelative: true,
10961096
})
10971097
sassResolve = async (...args) => {
1098-
const id = args[0]
1099-
if (id.startsWith('file://')) {
1100-
const fileUrl = new URL(id)
1101-
if (fs.existsSync(fileUrl)) {
1102-
return fileURLToPath(fileUrl)
1103-
}
1098+
if (args[0].startsWith('file://')) {
1099+
args[0] = fileURLToPath(args[0])
11041100
}
11051101
return resolver(...args)
11061102
}
@@ -2102,6 +2098,7 @@ const makeScssWorker = (
21022098
resolvers: CSSAtImportResolvers,
21032099
alias: Alias[],
21042100
maxWorkers: number | undefined,
2101+
packageName: 'sass' | 'sass-embedded',
21052102
) => {
21062103
const internalImporter = async (
21072104
url: string,
@@ -2119,6 +2116,9 @@ const makeScssWorker = (
21192116
'$',
21202117
resolvers.sass,
21212118
)
2119+
if (packageName === 'sass-embedded') {
2120+
return data
2121+
}
21222122
return fixScssBugImportValue(data)
21232123
} catch (data) {
21242124
return data
@@ -2411,7 +2411,12 @@ const scssProcessor = (
24112411
? makeModernCompilerScssWorker(resolvers, options.alias, maxWorkers)
24122412
: api === 'modern'
24132413
? makeModernScssWorker(resolvers, options.alias, maxWorkers)
2414-
: makeScssWorker(resolvers, options.alias, maxWorkers),
2414+
: makeScssWorker(
2415+
resolvers,
2416+
options.alias,
2417+
maxWorkers,
2418+
sassPackage.name,
2419+
),
24152420
)
24162421
}
24172422
const worker = workerMap.get(options.alias)!

playground/css/__tests__/css.spec.ts

+1
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,7 @@ test('sass', async () => {
9494
)
9595
expect(await getColor(partialImport)).toBe('orchid')
9696
expect(await getColor(await page.$('.sass-file-absolute'))).toBe('orange')
97+
expect(await getColor(await page.$('.sass-dir-index'))).toBe('orange')
9798

9899
editFile('sass.scss', (code) =>
99100
code.replace('color: $injectedColor', 'color: red'),

playground/css/index.html

+1
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ <h1>CSS</h1>
4444
<p class="sass-file-absolute">
4545
@import "file:///xxx/absolute-path.scss" should be orange
4646
</p>
47+
<p class="sass-dir-index">@import "./dir" should be orange</p>
4748

4849
<p class="less">Less: This should be blue</p>
4950
<p class="less-at-import">

playground/css/sass.scss

+1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
@import '=/pkg-dep'; // package w/out sass field
88
@import '=/weapp.wxss'; // wxss file
99
@import 'virtual-file-absolute';
10+
@import '=/scss-dir/main.scss'; // "./dir" reference from vite custom importer
1011

1112
.sass {
1213
/* injected via vite.config.js */
+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.sass-dir-index {
2+
color: orange;
3+
}

playground/css/scss-dir/main.scss

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@import './dir';

0 commit comments

Comments
 (0)