chore: update todo

Author: baiwusanyu-c

README.ZH-CN.md

@@ -130,5 +130,9 @@ export interface Options {
   revoke?: boolean
 }
 ```
-
+## Tips TODO
+### 转换分析时的约定规则
+1. sfc 中，如果 @import 指定了后缀，则根据后缀的文件进行转换分析，否则根据当前 script 标签的 lang 属性（默认css）进行转换分析。
+2. css中规则：css文件只能引用 css 文件，只会解析 css 后缀的文件
+3. scss、less、stylus 中规则：scss、less、stylus文件可以引用 css 文件、以及对应的scss或less文件或stylus文件，则对同名文件的css文件和对应的预处理器后缀文件进行转换分析
 ## Thanks TODO

packages/core/css/pre-process-css.ts

@@ -144,11 +144,10 @@ export function preProcessCSS(options: SearchGlobOptions): ICSSFileMap {
 
   const cssFiles: ICSSFileMap = new Map()
 
-  // ⭐TODO: 同名文件，不同後綴怎麽處理？ 優先級怎麽定？
   for (const file of files) {
-    // ⭐⭐TODO: 读取内容，後綴怎麽處理？
     const code = fs.readFileSync(resolve(rootDir!, file), { encoding: 'utf-8' })
     // parse css ast
+    // css中规则：css文件只能引用 css 文件
     if (file.endsWith(`.${SUPPORT_FILE.CSS}`)) {
       const cssAst = csstree.parse(code)
       let absoluteFilePath = resolve(parse(file).dir, parse(file).base)
@@ -173,12 +172,22 @@ export function preProcessCSS(options: SearchGlobOptions): ICSSFileMap {
         })
       })
     }
+    // scss、less、stylus 中规则：scss、less、stylus文件可以引用 css 文件、
+    // 以及对应的scss或less文件或stylus文件，则对同名文件的css文件和对应的预处理器后缀文件进行转换分析
+    // ⭐⭐TODO: 读取内容，後綴怎麽處理？
+    // ⭐TODO: 同名文件，不同後綴怎麽處理？ 優先級怎麽定？
+
+    // ⭐TODO: 支持 scss
+    // if (file.endsWith(`.${SUPPORT_FILE.SASS}`)) { /* empty */ }
 
     // ⭐TODO: 支持 sass
     // if (file.endsWith(`.${SUPPORT_FILE.SASS}`)) { /* empty */ }
 
     // ⭐TODO: 支持 less
     // if (file.endsWith(`.${SUPPORT_FILE.LESS}`)) { /* empty */ }
+
+    // ⭐TODO: 支持 stylus
+    // if (file.endsWith(`.${SUPPORT_FILE.SASS}`)) { /* empty */ }
   }
   return cssFiles
 }

packages/core/css/process-css.ts

@@ -36,7 +36,8 @@ export const createCSSModule = (descriptor: SFCDescriptor, id: string, cssFiles:
     // 根据其 ast，获取 @import 信息
     walkCSSTree(cssAst, (importer) => {
       // 添加后缀
-      const key = completeSuffix(transformSymbol(path.resolve(path.parse(id).dir, importer)))
+      // sfc中规则：如果@import 指定了后缀，则根据后缀，否则根据当前 script 标签的 lang 属性（默认css）
+      const key = completeSuffix(transformSymbol(path.resolve(path.parse(id).dir, importer)), descriptor.styles[i].lang)
       // 根据 @import 信息，从 cssFiles 中，递归的获取所有在预处理时生成的 cssvars 样式
       getCSSFileRecursion(key, cssFiles, (res: ICSSFile) => {
         importModule.push(res)

play/src/App.vue

@@ -66,7 +66,7 @@ export default {
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 @import "./assets/test";
 /* div {
    color: v-bind(color2)

utils/constant.ts

@@ -1,10 +1,11 @@
 export const NAME = 'unplugin-vue-cssvars'
-export const SUPPORT_FILE_LIST = ['**/**.css', '**/**.less', '**/**.scss']
+export const SUPPORT_FILE_LIST = ['**/**.css', '**/**.less', '**/**.scss', '**/**.stylus']
 export const FG_IGNORE_LIST = ['**/node_modules/**', '**/dist/**', '**/.git/**']
 export const SUPPORT_FILE = {
   CSS: 'css',
   LESS: 'less',
   SASS: 'sass',
+  STYLUS: 'stylus',
 }
 export const DEFAULT_INCLUDE_REG = [/\.vue$/]
 export const DEFAULT_EXCLUDE_REG = [/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/, /[\\/]\.dist[\\/]/]

utils/index.ts

@@ -1,6 +1,8 @@
+import { SUPPORT_FILE } from './constant'
+
 export * from './log'
 export * from './constant'
-export const completeSuffix = (fileName: string, suffix = 'css') => {
+export const completeSuffix = (fileName: string, suffix = SUPPORT_FILE.CSS) => {
   return !fileName.endsWith(`.${suffix}`) ? `${fileName}.${suffix}` : fileName
 }
 export const extend = <