From 2bd6077722318d9b116d657871fbe497c9484e7a Mon Sep 17 00:00:00 2001 From: yoho Date: Tue, 6 Jun 2023 23:07:14 +0800 Subject: [PATCH] feat(css): support at import preprocessed styles (#8400) Co-authored-by: bluwy --- packages/vite/src/node/plugins/css.ts | 6 ++++++ packages/vite/src/types/shims.d.ts | 1 + playground/css/__tests__/css.spec.ts | 4 ++++ playground/css/imported.scss | 5 +++++ playground/css/index.html | 5 ++++- 5 files changed, 20 insertions(+), 1 deletion(-) create mode 100644 playground/css/imported.scss diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts index a6f16f76b8155a..7228c2fae781e2 100644 --- a/packages/vite/src/node/plugins/css.ts +++ b/packages/vite/src/node/plugins/css.ts @@ -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}` }, diff --git a/packages/vite/src/types/shims.d.ts b/packages/vite/src/types/shims.d.ts index 4e31945d0449ae..de2875bd239cfd 100644 --- a/packages/vite/src/types/shims.d.ts +++ b/packages/vite/src/types/shims.d.ts @@ -31,6 +31,7 @@ declare module 'postcss-import' { basedir: string, importOptions: any, ) => string | string[] | Promise + load: (id: string) => Promise nameLayer: (index: number, rootFilename: string) => string }) => Plugin export = plugin diff --git a/playground/css/__tests__/css.spec.ts b/playground/css/__tests__/css.spec.ts index e0ef92c74c149b..5c85f24fe8820b 100644 --- a/playground/css/__tests__/css.spec.ts +++ b/playground/css/__tests__/css.spec.ts @@ -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') +}) diff --git a/playground/css/imported.scss b/playground/css/imported.scss new file mode 100644 index 00000000000000..eee442a32c9eb5 --- /dev/null +++ b/playground/css/imported.scss @@ -0,0 +1,5 @@ +$color: red; + +.at-import-scss { + color: $color; +} diff --git a/playground/css/index.html b/playground/css/index.html index 748181b87f064e..2016c1b3c72ca8 100644 --- a/playground/css/index.html +++ b/playground/css/index.html @@ -192,5 +192,8 @@

CSS


   

import '#alias-module': this should be blue

- + +
@import scss: this should be red