refactor: compiler-sfc process dependencies relation

playground/App.vue

@@ -16,6 +16,7 @@
   <TestCssModules />
   <TestCssAtImport/>
   <TestPreprocessors />
+  <TestScssAtImport/>
   <TestAssets />
   <TestSrcImport />
   <TestJsonImport />
@@ -44,6 +45,7 @@ import TestAlias from './TestAlias.vue'
 import TestTransform from './TestTransform.vue'
 import TestRewriteOptimized from "./rewrite-optimized/TestRewriteOptimized.vue";
 import TestCssAtImport from './css-@import/TestCssAtImport.vue'
+import TestScssAtImport from './css-@import/TestSCssAtImport.vue'
 
 export default {
   data: () => ({
@@ -59,6 +61,7 @@ export default {
     TestCssModules,
     TestPreprocessors,
     TestCssAtImport,
+    TestScssAtImport,
     TestSrcImport,
     TestAssets,
     TestJsonImport,

playground/css-@import/TestScssAtImport.vue

@@ -0,0 +1,22 @@
+<template>
+  <h2>CSS Preprocessor @import</h2>
+  <div class="sfc-style-scss-at-import">
+    &lt;style lang="scss" @import &gt; this should be red
+  </div>
+  <div class="script-scss-at-import">
+    &lt;script scss @import &gt; this should be green
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  @import './testScssAtImportFromStyle.scss';
+  .sfc-style-scss-at-import {
+    color: $colorSfc;
+  }
+</style>
+
+<script>
+import './testScssAtImportFromScript.scss'
+
+export default {}
+</script>

playground/css-@import/testCssAtImportFromScript.css

@@ -1 +1,2 @@
 @import './imported.css'
+

playground/css-@import/testScss.imported.scss

@@ -0,0 +1 @@
+$colorScript: green;

playground/css-@import/testScssAtImportFromScript.scss

@@ -0,0 +1,4 @@
+@import './testScss.imported.scss';
+.script-scss-at-import {
+  color: $colorScript;
+}

playground/css-@import/testScssAtImportFromStyle.scss

@@ -0,0 +1,2 @@
+// single comment is not support by css
+$colorSfc: red;

src/node/utils/cssUtils.ts

@@ -69,7 +69,8 @@ export async function compileCss(
 
   const postcssOptions = postcssConfig && postcssConfig.options
   const postcssPlugins = postcssConfig ? postcssConfig.plugins : []
-  postcssPlugins.push(require('postcss-import')())
+  // parser plain css @import
+  postcssPlugins.unshift(require('postcss-import')())
 
   const res = await compileStyleAsync({
     source,
@@ -91,20 +92,13 @@ export async function compileCss(
     postcssPlugins
   })
 
-  // record css import dependencies
-  if (res.rawResult) {
-    res.rawResult.messages.forEach((msg) => {
-      let { type, file, parent } = msg
-      if (type === 'dependency') {
-        if (cssImportMap.has(file)) {
-          cssImportMap.get(file)!.add(parent)
-        } else {
-          cssImportMap.set(file, new Set([parent]))
-        }
-      }
-    })
-  }
-
+  res.dependencies.forEach((dependency) => {
+    if (cssImportMap.has(dependency)) {
+      cssImportMap.get(dependency)!.add(filename)
+    } else {
+      cssImportMap.set(dependency, new Set([filename]))
+    }
+  })
   return res
 }
 

test/test.js

@@ -255,6 +255,29 @@ describe('vite', () => {
       }
     })
 
+    test('CSS preprocessor @import', async () => {
+      const el = await page.$('.script-scss-at-import')
+      expect(await getComputedColor(el)).toBe('rgb(0, 128, 0)')
+      if (!isBuild) {
+        await updateFile('css-@import/testScss.imported.scss', (content) =>
+          content.replace('green', 'rgb(0, 0, 0)')
+        )
+        await expectByPolling(() => getComputedColor(el), 'rgb(0, 0, 0)')
+      }
+    })
+
+    test('SFC <style lang="sass"> w/ @import', async () => {
+      const el = await page.$('.sfc-style-scss-at-import')
+      expect(await getComputedColor(el)).toBe('rgb(255, 0, 0)')
+      if (!isBuild) {
+        await updateFile(
+          'css-@import/testSCssAtImportFromStyle.scss',
+          (content) => content.replace('red', 'rgb(0, 0, 0)')
+        )
+        await expectByPolling(() => getComputedColor(el), 'rgb(0, 0, 0)')
+      }
+    })
+
     test('import *.module.css', async () => {
       const el = await page.$('.css-modules-import')
       expect(await getComputedColor(el)).toBe('rgb(255, 140, 0)')