Skip to content

Commit

Permalink
fix(css): fix sass file:// reference (#17909)
Browse files Browse the repository at this point in the history
Co-authored-by: patak <[email protected]>
  • Loading branch information
hi-ogawa and patak-dev authored Aug 22, 2024
1 parent dbd6214 commit 561b940
Show file tree
Hide file tree
Showing 8 changed files with 48 additions and 22 deletions.
20 changes: 15 additions & 5 deletions packages/vite/src/node/plugins/css.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1085,17 +1085,27 @@ function createCSSResolvers(config: ResolvedConfig): CSSAtImportResolvers {
},

get sass() {
return (
sassResolve ||
(sassResolve = config.createResolver({
if (!sassResolve) {
const resolver = config.createResolver({
extensions: ['.scss', '.sass', '.css'],
mainFields: ['sass', 'style'],
conditions: ['sass', 'style'],
tryIndex: true,
tryPrefix: '_',
preferRelative: true,
}))
)
})
sassResolve = async (...args) => {
const id = args[0]
if (id.startsWith('file://')) {
const fileUrl = new URL(id)
if (fs.existsSync(fileUrl)) {
return fileURLToPath(fileUrl)
}
}
return resolver(...args)
}
}
return sassResolve
},

get less() {
Expand Down
1 change: 1 addition & 0 deletions playground/css/__tests__/css.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,7 @@ test('sass', async () => {
isBuild ? /ok-[-\w]+\.png/ : `${viteTestUrl}/ok.png`,
)
expect(await getColor(partialImport)).toBe('orchid')
expect(await getColor(await page.$('.sass-file-absolute'))).toBe('orange')

editFile('sass.scss', (code) =>
code.replace('color: $injectedColor', 'color: red'),
Expand Down
3 changes: 3 additions & 0 deletions playground/css/file-absolute.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.sass-file-absolute {
color: orange;
}
3 changes: 3 additions & 0 deletions playground/css/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,9 @@ <h1>CSS</h1>
<p class="sass-dep">
@import dependency w/ no scss entrypoint: this should be lavender
</p>
<p class="sass-file-absolute">
@import "file:///xxx/absolute-path.scss" should be orange
</p>

<p class="less">Less: This should be blue</p>
<p class="less-at-import">
Expand Down
1 change: 1 addition & 0 deletions playground/css/sass.scss
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
@import 'virtual-dep'; // virtual file added through importer
@import '=/pkg-dep'; // package w/out sass field
@import '=/weapp.wxss'; // wxss file
@import 'virtual-file-absolute';

.sass {
/* injected via vite.config.js */
Expand Down
19 changes: 2 additions & 17 deletions playground/css/vite.config-sass-modern-compiler.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { defineConfig } from 'vite'
import baseConfig from './vite.config.js'
import configSassModern from './vite.config-sass-modern.js'

export default defineConfig({
...baseConfig,
Expand All @@ -8,23 +9,7 @@ export default defineConfig({
preprocessorOptions: {
...baseConfig.css.preprocessorOptions,
scss: {
api: 'modern-compiler',
additionalData: `$injectedColor: orange;`,
importers: [
{
canonicalize(url) {
return url === 'virtual-dep'
? new URL('custom-importer:virtual-dep')
: null
},
load() {
return {
contents: ``,
syntax: 'scss',
}
},
},
],
...configSassModern.css.preprocessorOptions.scss,
},
},
},
Expand Down
15 changes: 15 additions & 0 deletions playground/css/vite.config-sass-modern.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { pathToFileURL } from 'node:url'
import path from 'node:path'
import { defineConfig } from 'vite'
import baseConfig from './vite.config.js'

Expand All @@ -24,6 +26,19 @@ export default defineConfig({
}
},
},
{
canonicalize(url) {
return url === 'virtual-file-absolute'
? new URL('custom-importer:virtual-file-absolute')
: null
},
load() {
return {
contents: `@import "${pathToFileURL(path.join(import.meta.dirname, 'file-absolute.scss')).href}"`,
syntax: 'scss',
}
},
},
],
},
},
Expand Down
8 changes: 8 additions & 0 deletions playground/css/vite.config.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import path from 'node:path'
import { pathToFileURL } from 'node:url'
import stylus from 'stylus'
import { defineConfig } from 'vite'

Expand Down Expand Up @@ -65,6 +66,13 @@ export default defineConfig({
function (url) {
return url === 'virtual-dep' ? { contents: '' } : null
},
function (url) {
return url === 'virtual-file-absolute'
? {
contents: `@import "${pathToFileURL(path.join(import.meta.dirname, 'file-absolute.scss')).href}"`,
}
: null
},
function (url) {
return url.endsWith('.wxss') ? { contents: '' } : null
},
Expand Down

0 comments on commit 561b940

Please sign in to comment.