chore: temp commit

Author: baiwusanyu-c

packages/core/css/__test__/process-css.spec.ts

@@ -68,6 +68,36 @@ describe('process css', () => {
     })
   })
 
+  test('getCSSFileRecursion: circular dependencies', () => {
+    const mockEvt = vi.fn()
+    const mockRes: Array<ICSSFile> = []
+    const mockCssFiles = new Map()
+    mockCssFiles.set('foo', {
+      importer: new Set(['bar']),
+      vBindCode: {
+        foo: new Set(['v-bind(foo)']),
+      },
+    })
+    mockCssFiles.set('bar', {
+      importer: new Set(['foo']),
+      vBindCode: {
+        bar: new Set(['v-bind(bar)']),
+      },
+    })
+    getCSSFileRecursion('foo', mockCssFiles, (v) => {
+      mockEvt()
+      mockRes.push(v)
+    })
+    expect(mockRes.length).toBe(2)
+    expect(mockEvt).toBeCalledTimes(2)
+    expect(mockRes[0].vBindCode).toMatchObject({
+      foo: new Set(['v-bind(foo)']),
+    })
+    expect(mockRes[1].vBindCode).toMatchObject({
+      bar: new Set(['v-bind(bar)']),
+    })
+  })
+
   test('createCSSModule: basic', () => {
     const mockCssFiles = new Map()
     const mockCSSFilesContent = {

packages/core/css/process-css.ts

@@ -5,9 +5,13 @@ import { walkCSSTree } from './pre-process-css'
 import type { ICSSFile, ICSSFileMap } from '../types'
 import type { SFCDescriptor } from '@vue/compiler-sfc'
 
+const matchedMark = new Set<string>()
 export const getCSSFileRecursion = (key: string, cssFiles: ICSSFileMap, cb: (res: ICSSFile) => void) => {
+  // 避免循环引用
+  if (matchedMark.has(key)) return
   const cssFile = cssFiles.get(key)
   if (cssFile) {
+    matchedMark.add(key)
     cb(cssFile)
     if (cssFile.importer.size > 0) {
       cssFile.importer.forEach((value) => {

play/src/App.vue

@@ -1,14 +1,14 @@
-<!-- <script setup lang="ts">
+<script setup lang="ts">
 import { reactive, ref } from 'vue'
 /* import Comp from './comp.vue' */
 const appAsd = () => 'red'
 const color = appAsd()
-const appTheme2 = 'red'
+const appTheme2 = 'blue'
 const appTheme3 = ref('red')
 const appTheme4 = reactive({ color: 'red' })
 const appTheme5 = { color: 'red' }
 const appTheme6 = () => 'red'
-</script> -->
+</script>
 <!-- <script lang="ts">
   const sc2 = 'red'
 </script> -->
@@ -43,7 +43,7 @@ export default defineComponent({
 })
 </script> -->
 
-<script>
+<!-- <script>
 export default {
   setup() {
     const color3 = 'red'
@@ -57,7 +57,7 @@ export default {
     }
   },
 }
-</script>
+</script> -->
 
 <template>
   <div class="test">
@@ -68,7 +68,7 @@ export default {
 
 <style scoped>
 @import "./assets/test";
- div {
+/* div {
    color: v-bind(color2)
- }
+ }*/
 </style>

play/src/assets/test.css

@@ -1,4 +1,4 @@
-/*@import "./test2";*/
+@import "./test2";
 
 /** test.css **/
 div {

play/src/assets/test2.css

@@ -1,4 +1,10 @@
-
-.test2 {
-    color: v-bind(color);
+@import "./test";
+/*
+存在相同样式（test.css），会以先出现的那个优先
+*/
+/*div {
+    color: v-bind(appTheme2);
+}*/
+.test {
+    color: v-bind(appTheme2);
 }