Skip to content

Commit

Permalink
feat(css): support at import preprocessed styles (#8400)
Browse files Browse the repository at this point in the history
Co-authored-by: bluwy <bjornlu.dev@gmail.com>
  • Loading branch information
poyoho and bluwy authored Jun 6, 2023
1 parent 4a06e66 commit 2bd6077
Show file tree
Hide file tree
Showing 5 changed files with 20 additions and 1 deletion.
6 changes: 6 additions & 0 deletions packages/vite/src/node/plugins/css.ts
Original file line number Diff line number Diff line change
Expand Up @@ -954,6 +954,12 @@ async function compileCSS(

return id
},
async load(id) {
const code = fs.readFileSync(id, 'utf-8')
const result = await compileCSS(id, code, config)
result.deps?.forEach((dep) => deps.add(dep))
return result.code
},
nameLayer(index) {
return `vite--anon-layer-${getHash(id)}-${index}`
},
Expand Down
1 change: 1 addition & 0 deletions packages/vite/src/types/shims.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ declare module 'postcss-import' {
basedir: string,
importOptions: any,
) => string | string[] | Promise<string | string[]>
load: (id: string) => Promise<string>
nameLayer: (index: number, rootFilename: string) => string
}) => Plugin
export = plugin
Expand Down
4 changes: 4 additions & 0 deletions playground/css/__tests__/css.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -534,3 +534,7 @@ test('async css order with css modules', async () => {
expect(await getColor('.modules-pink')).toMatchInlineSnapshot('"pink"')
}, true)
})

test('@import scss', async () => {
expect(await getColor('.at-import-scss')).toBe('red')
})
5 changes: 5 additions & 0 deletions playground/css/imported.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
$color: red;

.at-import-scss {
color: $color;
}
5 changes: 4 additions & 1 deletion playground/css/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -192,5 +192,8 @@ <h1>CSS</h1>
<pre class="aliased-content"></pre>
<p class="aliased-module">import '#alias-module': this should be blue</p>
</div>

<style>
@import url(./imported.scss);
</style>
<div class="at-import-scss">@import scss: this should be red</div>
<script type="module" src="./main.js"></script>

0 comments on commit 2bd6077

Please sign in to comment.