feat(css): support at import preprocessed styles (#8400)

Co-authored-by: bluwy <bjornlu.dev@gmail.com>

Author: poyoho

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}`
         },

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

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')
+})

playground/css/imported.scss

@@ -0,0 +1,5 @@
+$color: red;
+
+.at-import-scss {
+  color: $color;
+}

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>