From 2bd6077722318d9b116d657871fbe497c9484e7a Mon Sep 17 00:00:00 2001
From: yoho <panyoho@gmail.com>
Date: Tue, 6 Jun 2023 23:07:14 +0800
Subject: [PATCH] feat(css): support at import preprocessed styles (#8400)

Co-authored-by: bluwy <bjornlu.dev@gmail.com>
---
 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<string | string[]>
+    load: (id: string) => Promise<string>
     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 @@ <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>