feat: support alias (#30)

baiwusanyu-c · web-flow · commit f02be085d455 · 2023-04-03T21:56:46.000+08:00
* feat: support alias

* docs: updated README.md

* docs: updated README.md
diff --git a/README.ZH-CN.md b/README.ZH-CN.md
@@ -121,6 +121,53 @@ build({
    color: v-bind-m(fontColor)
 }
 ```
+3. 使用别名   
+
+例如你有以下项目结构：  
+
+![img.png](public/img.png)
+
+ ```
+// App.vue
+<template>
+  <div class="scss">
+    app
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import '@/assets/scss/mixin';
+</style>
+
+```
+
+那么你可以这样配置
+
+```
+// vite.config.ts
+import { resolve } from 'path'
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { viteVueCSSVars } from '../dist'
+export default defineConfig({
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, './src'),
+    },
+  },
+  plugins: [
+    vue(),
+    viteVueCSSVars({
+      include: [/.vue/],
+      includeCompile: ['**/**.scss'],
+      alias: {
+        '@': resolve(__dirname, './src'),
+      },
+    }),
+  ],
+})
+
+````
 
 ## Option
 
@@ -164,6 +211,13 @@ export interface Options {
     * @default true
     */
    server?: boolean
+
+   /**
+    * 别名
+    * @default undefined
+    */
+   alias?: Record<string, string>
+
 }
 ```
 
diff --git a/README.md b/README.md
@@ -125,6 +125,53 @@ build({
 }
 ```
 
+3. use alias   
+For example you have the following project structure：  
+
+![img.png](public/img.png)
+
+ ```
+// App.vue
+<template>
+  <div class="scss">
+    app
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import '@/assets/scss/mixin';
+</style>
+
+```
+
+Then you can configure like this
+
+```
+// vite.config.ts
+import { resolve } from 'path'
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { viteVueCSSVars } from '../dist'
+export default defineConfig({
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, './src'),
+    },
+  },
+  plugins: [
+    vue(),
+    viteVueCSSVars({
+      include: [/.vue/],
+      includeCompile: ['**/**.scss'],
+      alias: {
+        '@': resolve(__dirname, './src'),
+      },
+    }),
+  ],
+})
+
+````
+
 ## Option
 
 ```typescript
@@ -167,6 +214,12 @@ export interface Options {
     * @default true
     */
    server?: boolean
+
+   /**
+    * alias
+    * @default undefined
+    */
+   alias?: Record<string, string>
 }
 ```
 
diff --git a/packages/core/index.ts b/packages/core/index.ts
@@ -23,7 +23,7 @@ const unplugin = createUnplugin<Options>(
       userOptions.exclude,
     )
     // 预处理 css 文件
-    const CSSFileModuleMap = preProcessCSS(userOptions)
+    const CSSFileModuleMap = preProcessCSS(userOptions, userOptions.alias)
     const vbindVariableList = new Map<string, TMatchVariable>()
     let isScriptSetup = false
     let isServer = false
@@ -43,7 +43,7 @@ const unplugin = createUnplugin<Options>(
               const {
                 vbindVariableListByPath,
                 injectCSSContent,
-              } = getVBindVariableListByPath(descriptor, id, CSSFileModuleMap, isServer)
+              } = getVBindVariableListByPath(descriptor, id, CSSFileModuleMap, isServer, userOptions.alias)
               const variableName = getVariable(descriptor)
               vbindVariableList.set(id, matchVariable(vbindVariableListByPath, variableName))
 
diff --git a/packages/core/runtime/__test__/__snapshots__/process-css.spec.ts.snap b/packages/core/runtime/__test__/__snapshots__/process-css.spec.ts.snap
@@ -19,6 +19,21 @@ exports[`process css > createCSSModule: no file with lang 1`] = `
 }
 `;
 
+exports[`process css > getVBindVariableListByPath: alias 1`] = `
+{
+  "injectCSSContent": Set {
+    {
+      "content": "content foo color",
+      "lang": "scss",
+      "styleTagIndex": 0,
+    },
+  },
+  "vbindVariableListByPath": [
+    "fooColor",
+  ],
+}
+`;
+
 exports[`process css > getVBindVariableListByPath: basic 1`] = `
 {
   "injectCSSContent": Set {
diff --git a/packages/core/runtime/__test__/process-css.spec.ts b/packages/core/runtime/__test__/process-css.spec.ts
@@ -1,9 +1,9 @@
 import { resolve } from 'path'
 import { describe, expect, test, vi } from 'vitest'
 import { transformSymbol } from '@unplugin-vue-cssvars/utils'
-import { getCSSFileRecursion, getVBindVariableListByPath } from '../process-css'
+import { getCSSFileRecursion, getVBindVariableListByPath, handleAlias } from '../process-css'
 import type { ICSSFile } from '../../types'
-// TODO update
+
 describe('process css', () => {
   test('getCSSFileRecursion: basic', () => {
     const mockEvt = vi.fn()
@@ -174,6 +174,38 @@ describe('process css', () => {
     expect(res).matchSnapshot()
   })
 
+  test('getVBindVariableListByPath: alias', () => {
+    const mockCssFiles = new Map()
+    const mockCSSFilesContent = {
+      importer: new Set(),
+      vBindCode: ['fooColor'],
+      content: 'content foo color',
+      lang: 'scss',
+    }
+    mockCssFiles.set(transformSymbol(resolve('/play/src/assets/test.css')), mockCSSFilesContent)
+    const mockDescriptor = {
+      styles: [{
+        content: '@import "@/assets/test";\n'
+            + ' div {\n'
+            + '   color: v-bind(color2);\n'
+            + ' }',
+      }],
+    }
+    const mockId = transformSymbol(resolve('/play/src/App.vue'))
+    const res = getVBindVariableListByPath(
+      mockDescriptor as any,
+      mockId,
+      mockCssFiles,
+      false,
+      { '@': '/play/src' })
+    expect(res.vbindVariableListByPath).toMatchObject(['fooColor'])
+    expect([...res.injectCSSContent]).toMatchObject([{
+      content: 'content foo color',
+      lang: 'scss',
+    }])
+    expect(res).matchSnapshot()
+  })
+
   test('createCSSModule: no file with lang', () => {
     const mockCssFiles = new Map()
     const mockCSSFilesContent = {
@@ -241,3 +273,42 @@ describe('process css', () => {
     expect(res.vbindVariableListByPath.length).toBe(0)
   })
 })
+
+describe('handleAlias function', () => {
+  test('no alias and no idDirPath', () => {
+    const path = 'path/to/some/file'
+    expect(handleAlias(path)).toBe(path)
+  })
+
+  test('no idDirPath & alias unmatched', () => {
+    const path = 'path/to/some/file'
+    const alias = { '@': 'alias-path/' }
+    expect(handleAlias(path, alias)).toBe(path)
+  })
+
+  test('no idDirPath & alias matched', () => {
+    const path = '@/path/to/some/file'
+    const alias = { '@': 'alias-path' }
+    expect(handleAlias(path, alias)).toBe('alias-path/path/to/some/file')
+  })
+
+  test('idDirPath & alias unmatched', () => {
+    const path = 'path/to/some/file'
+    const alias = { '@': 'alias-path' }
+    const idDirPath = '/some/directory'
+    expect(handleAlias(path, alias, idDirPath)).toBe('/some/directory/path/to/some/file')
+  })
+
+  test('idDirPath & alias matched', () => {
+    const path = '@/to/some/file'
+    const alias = { '@': 'alias-path' }
+    const idDirPath = '/some/directory'
+    expect(handleAlias(path, alias, idDirPath)).toBe('alias-path/to/some/file')
+  })
+
+  test('no alias and idDirPath', () => {
+    const path = 'path/to/some/file'
+    const idDirPath = '/some/directory'
+    expect(handleAlias(path, undefined, idDirPath)).toBe('/some/directory/path/to/some/file')
+  })
+})
diff --git a/packages/core/runtime/pre-process-css.ts b/packages/core/runtime/pre-process-css.ts
@@ -9,21 +9,22 @@ import {
 } from '@unplugin-vue-cssvars/utils'
 import { parseImports, parseVBindM } from '../parser'
 import { transformQuotes } from '../transform/transform-quotes'
+import { handleAlias } from './process-css'
 import type { ICSSFileMap, SearchGlobOptions } from '../types'
 
 /**
  * 预处理css文件
  * @param options 选项参数 Options
+ * @param alias
  */
-export function preProcessCSS(options: SearchGlobOptions): ICSSFileMap {
+export function preProcessCSS(options: SearchGlobOptions, alias?: Record<string, string>): ICSSFileMap {
   const { rootDir, includeCompile } = options
 
   // 获得文件列表
   const files = getAllCSSFilePath(includeCompile!, rootDir!)
-  return createCSSFileModuleMap(files, rootDir!)
+  return createCSSFileModuleMap(files, rootDir!, alias)
 }
 
-// TODO: unit test
 export function getAllCSSFilePath(includeCompile: string[], rootDir: string) {
   return fg.sync(includeCompile!, {
     ignore: FG_IGNORE_LIST,
@@ -32,7 +33,7 @@ export function getAllCSSFilePath(includeCompile: string[], rootDir: string) {
 }
 
 // TODO: unit test
-export function createCSSFileModuleMap(files: string[], rootDir: string) {
+export function createCSSFileModuleMap(files: string[], rootDir: string, alias?: Record<string, string>) {
   const cssFiles: ICSSFileMap = new Map()
   for (const file of files) {
     let absoluteFilePath = resolve(parse(file).dir, parse(file).base)
@@ -62,9 +63,7 @@ export function createCSSFileModuleMap(files: string[], rootDir: string) {
 
     imports.forEach((value) => {
       // 设置 importer
-      const importerPath = resolve(
-        fileDirParse.dir,
-        value.path.replace(/^"|"$/g, ''))
+      const importerPath = handleAlias(value.path.replace(/^"|"$/g, ''), alias, fileDirParse.dir)
       // 默认使用 .css
       let importerVal = completeSuffix(importerPath, SUPPORT_FILE.CSS)
       // 如果 file 不是 .css 文件，那么它的 import 需要判断处理
diff --git a/packages/core/runtime/process-css.ts b/packages/core/runtime/process-css.ts
@@ -16,7 +16,6 @@ export const getCSSFileRecursion = (
   // 如果 .scss 的 import 不存在，则用 css 的
   if (!cssFiles.get(key))
     key = completeSuffix(key, SUPPORT_FILE.CSS, true)
-
   // 避免循环引用
   if (matchedMark.has(key)) return
   const cssFile = cssFiles.get(key)
@@ -41,13 +40,13 @@ export const getCSSFileRecursion = (
  * @param cssFiles
  * @param server
  */
-// TODO: unit test
 export type TInjectCSSContent = Set<{ content: string, lang: string, styleTagIndex: number }>
 export const getVBindVariableListByPath = (
   descriptor: SFCDescriptor,
   id: string,
   cssFiles: ICSSFileMap,
-  server: boolean) => {
+  server: boolean,
+  alias?: Record<string, string>) => {
   const vbindVariable: Set<string> = new Set()
   const injectCSSContent: TInjectCSSContent = new Set()
   // 遍历 sfc 的 style 标签内容
@@ -57,8 +56,7 @@ export const getVBindVariableListByPath = (
     const idDirParse = parse(id)
     const parseImporterRes = parseImports(content)
     parseImporterRes.imports.forEach((res) => {
-      const importerPath = resolve(idDirParse.dir, res.path)
-
+      const importerPath = handleAlias(res.path, alias, idDirParse.dir)
       try {
         // 根据 @import 信息，从 cssFiles 中，递归的获取所有在预处理时生成的 cssvars 样式
         getCSSFileRecursion(lang, importerPath, cssFiles, (res: ICSSFile) => {
@@ -84,3 +82,22 @@ export const getVBindVariableListByPath = (
     injectCSSContent,
   }
 }
+
+export function handleAlias(path: string, alias?: Record<string, string>, idDirPath?: string) {
+  let importerPath = ''
+  if (!alias && !idDirPath) return path
+  if (alias) {
+    for (const aliasKey in alias) {
+      if (alias[aliasKey] && path.startsWith(aliasKey)) {
+        importerPath = path.replace(aliasKey, alias[aliasKey])
+        break
+      }
+    }
+
+    if (importerPath) return importerPath
+    importerPath = idDirPath ? resolve(idDirPath, path) : path
+  } else {
+    idDirPath && (importerPath = resolve(idDirPath, path))
+  }
+  return importerPath
+}
diff --git a/packages/core/types.ts b/packages/core/types.ts
@@ -37,6 +37,12 @@ export interface Options {
    * @default true
    */
   server?: boolean
+
+  /**
+   * alias
+   * @default undefined
+   */
+  alias?: Record<string, string>
 }
 
 export declare type SearchGlobOptions = Options
diff --git a/play/src/views/app/App.vue b/play/src/views/app/App.vue
@@ -79,7 +79,7 @@ export default defineComponent({
 </template>
 
 <style lang="scss" scoped>
-@import '../src/assets/scss/mixin';
+@import '@/assets/scss/mixin';
 @import '../../assets/scss/variables.module';
 /* foo.scss -> test2.css -> test.css */
 /* foo.scss -> test.scss -> test2.css */
diff --git a/play/vite.config.ts b/play/vite.config.ts
diff --git a/public/img.png b/public/img.png
