feat: support sass indented syntax (#15)

* chore: temp commit

* chore: 临时提交

* chore: 临时提交

* chore: temp commit

* chore: temp commit

* chore: temp cimmit

* chore: temp commit

* chore: temp commit

* feat: Generic importer parser

* feat: support sass indented syntax

Author: baiwusanyu-c

package.json

@@ -44,7 +44,6 @@
     }
   },
   "scripts": {
-    "pa": "esno packages/core/parser/parser-import.ts",
     "init": "pnpm i",
     "lint:fix": "eslint --fix ./ --ext .vue,.js,.ts,.jsx,.tsx,.json ",
     "dev": "pnpm run --filter @unplugin-vue-cssvars/build dev",

packages/core/css/__test__/__snapshots__/pre-process-css.spec.ts.snap

@@ -76,10 +76,7 @@ div{color:v-bind(color)}
 `;
 
 exports[`pre process css > getCurFileContent: basic 1`] = `
-" 
- 
- 
-#app {
+"#app {
   div {
     color: v-bind(fooColor);
   }
@@ -90,9 +87,7 @@ exports[`pre process css > getCurFileContent: basic 1`] = `
 `;
 
 exports[`pre process css > getCurFileContent: no ;  1`] = `
-" 
-  
-#app {
+"#app {
   div {
     color: v-bind(fooColor);
   }

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

@@ -17,6 +17,7 @@ import sass from 'sass'
 import less from 'less'
 import stylus from 'stylus'
 import { parseImports } from '../parser/parser-import'
+import { transformQuotes } from '../transform/transform-quotes'
 import type { ImportStatement } from '../parser/parser-import'
 import type { ICSSFileMap, SearchGlobOptions } from '../types'
 
@@ -200,26 +201,31 @@ export function generateCSSCode(path: string, suffix: string) {
   const code = fs.readFileSync(path, { encoding: 'utf-8' })
   let res = ''
   switch (suffix) {
-    case `.${SUPPORT_FILE.SCSS}`: // scss / sass
+    case `.${SUPPORT_FILE.SCSS}`: // scss
       // @import 有 css 和 scss的同名文件，会编译 scss
       // @import 编译 scss，会一直编译，一直到遇到 import 了一个 css 或没有 import 为止
       // 这里先分析出 imports，在根据其内容将 sass 中 import 删除
       // 编译 sass 为 css，再复原
       // eslint-disable-next-line no-case-declarations
-      const parseSassImporter = parseImports(code)
+      const parseScssImporter = parseImports(code, [transformQuotes])
       // eslint-disable-next-line no-case-declarations
-      const codeNoImporter = getCurFileContent(code, parseSassImporter.imports)
+      const codeScssNoImporter = getCurFileContent(code, parseScssImporter.imports)
       // eslint-disable-next-line no-case-declarations
-      const sassParseRes = sass.compileString(codeNoImporter)
-      res = setImportToCompileRes(sassParseRes.css, parseSassImporter.imports)
+      const scssParseRes = sass.compileString(codeScssNoImporter)
+      res = setImportToCompileRes(scssParseRes.css, parseScssImporter.imports)
       break
     case `.${SUPPORT_FILE.SASS}`: // sass
-      // ⭐TODO: 支持 sass
-      res = ''
+      // eslint-disable-next-line no-case-declarations
+      const parseSassImporter = parseImports(code, [transformQuotes])
+      // eslint-disable-next-line no-case-declarations
+      const codeNoImporter = getCurFileContent(code, parseSassImporter.imports)
+      // eslint-disable-next-line no-case-declarations
+      const sassParseRes = sass.compileString(codeNoImporter, { syntax: 'indented' })
+      res = setImportToCompileRes(sassParseRes.css, parseSassImporter.imports)
       break
     case `.${SUPPORT_FILE.LESS}`: // less
       // eslint-disable-next-line no-case-declarations
-      const parseLessImporter = parseImports(code)
+      const parseLessImporter = parseImports(code, [transformQuotes])
       // eslint-disable-next-line no-case-declarations
       const codeLessNoImporter = getCurFileContent(code, parseLessImporter.imports)
       less.render(codeLessNoImporter, {}, (error, output) => {
@@ -230,9 +236,8 @@ export function generateCSSCode(path: string, suffix: string) {
       })
       break
     case `.${SUPPORT_FILE.STYL}`: // stylus
-      // TODO unit test
       // eslint-disable-next-line no-case-declarations
-      const parseStylusImporter = parseImports(code)
+      const parseStylusImporter = parseImports(code, [transformQuotes])
       // eslint-disable-next-line no-case-declarations
       const codeStylusNoImporter = getCurFileContent(code, parseStylusImporter.imports)
       stylus.render(codeStylusNoImporter, {}, (error: Error, css: string) => {
@@ -262,7 +267,7 @@ export function getCurFileContent(content: string, parseRes: ImportStatement[])
       mgcStr.replaceAll('@require', '')
     }
   })
-  return mgcStr.toString()
+  return mgcStr.toString().trimStart()
 }
 
 export function setImportToCompileRes(content: string, parseRes: ImportStatement[]) {

packages/core/css/process-css.ts

@@ -1,7 +1,6 @@
 import path from 'path'
-import * as csstree from 'css-tree'
 import { SUPPORT_FILE, completeSuffix, transformSymbol } from '@unplugin-vue-cssvars/utils'
-import { walkCSSTree } from './pre-process-css'
+import { parseImports } from '../parser/parser-import'
 import type { ICSSFile, ICSSFileMap } from '../types'
 import type { SFCDescriptor } from '@vue/compiler-sfc'
 
@@ -32,10 +31,11 @@ export const createCSSModule = (descriptor: SFCDescriptor, id: string, cssFiles:
   // 遍历 sfc 的 style 标签内容
   for (let i = 0; i < descriptor.styles.length; i++) {
     const content = descriptor.styles[i].content
-    const cssAst = csstree.parse(content)
-    // 根据其 ast，获取 @import 信息
-    walkCSSTree(cssAst, (importer) => {
-      const lang = descriptor.styles[i].lang === SUPPORT_FILE.STYLUS ? SUPPORT_FILE.STYL : descriptor.styles[i].lang
+    const lang = descriptor.styles[i].lang === SUPPORT_FILE.STYLUS ? SUPPORT_FILE.STYL : descriptor.styles[i].lang
+
+    const parseImporterRes = parseImports(content)
+    parseImporterRes.imports.forEach((res) => {
+      const importer = res.path
       // 添加后缀
       // sfc中规则：如果@import 指定了后缀，则根据后缀，否则根据当前 script 标签的 lang 属性（默认css）
       let key = completeSuffix(transformSymbol(path.resolve(path.parse(id).dir, importer)), lang)
@@ -47,7 +47,7 @@ export const createCSSModule = (descriptor: SFCDescriptor, id: string, cssFiles:
       getCSSFileRecursion(key, cssFiles, (res: ICSSFile) => {
         importModule.push(res)
       })
-    }, { i: true, v: false })
+    })
   }
   return importModule
 }