fix: path calculation error (#29)

* fix: path calculation error

* test: update unit test

* test: update catch error info

Author: baiwusanyu-c

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

@@ -9,13 +9,13 @@ describe('process css', () => {
     const mockEvt = vi.fn()
     const mockRes: Array<ICSSFile> = []
     const mockCssFiles = new Map()
-    mockCssFiles.set('foo', {
+    mockCssFiles.set('foo.css', {
       importer: new Set(),
       vBindCode: {
         foo: new Set(['v-bind(foo)']),
       },
     })
-    getCSSFileRecursion('foo', mockCssFiles, (v) => {
+    getCSSFileRecursion('css', 'foo', mockCssFiles, (v) => {
       mockEvt()
       mockRes.push(v)
     })
@@ -30,34 +30,56 @@ describe('process css', () => {
     const mockEvt = vi.fn()
     const mockRes = []
     const mockCssFiles = new Map()
-    mockCssFiles.set('foo', {
+    mockCssFiles.set('foo.css', {
       importer: new Set(['foo1', 'foo2']),
     })
-    getCSSFileRecursion('bar', mockCssFiles, (v) => {
+    const testFn = () => getCSSFileRecursion('css', 'bar', mockCssFiles, (v) => {
       mockEvt()
       mockRes.push(v)
     })
     expect(mockRes.length).toBe(0)
     expect(mockEvt).not.toBeCalled()
+    expect(testFn).toThrowError()
+  })
+
+  test('getCSSFileRecursion: not custom suffix', () => {
+    const mockEvt = vi.fn()
+    const mockRes: Array<ICSSFile> = []
+    const mockCssFiles = new Map()
+    mockCssFiles.set('foo.module.css', {
+      importer: new Set(),
+      vBindCode: {
+        foo: new Set(['v-bind(foo)']),
+      },
+    })
+    getCSSFileRecursion('css', 'foo.module', mockCssFiles, (v) => {
+      mockEvt()
+      mockRes.push(v)
+    })
+    expect(mockRes.length).toBe(1)
+    expect(mockEvt).toBeCalledTimes(1)
+    expect(mockRes[0].vBindCode).toMatchObject({
+      foo: new Set(['v-bind(foo)']),
+    })
   })
 
   test('getCSSFileRecursion: recursion', () => {
     const mockEvt = vi.fn()
     const mockRes: Array<ICSSFile> = []
     const mockCssFiles = new Map()
-    mockCssFiles.set('foo', {
-      importer: new Set(['bar']),
+    mockCssFiles.set('foo.css', {
+      importer: new Set(['bar.css']),
       vBindCode: {
         foo: new Set(['v-bind(foo)']),
       },
     })
-    mockCssFiles.set('bar', {
+    mockCssFiles.set('bar.css', {
       importer: new Set(),
       vBindCode: {
         bar: new Set(['v-bind(bar)']),
       },
     })
-    getCSSFileRecursion('foo', mockCssFiles, (v) => {
+    getCSSFileRecursion('css', 'foo', mockCssFiles, (v) => {
       mockEvt()
       mockRes.push(v)
     })
@@ -75,19 +97,19 @@ describe('process css', () => {
     const mockEvt = vi.fn()
     const mockRes: Array<ICSSFile> = []
     const mockCssFiles = new Map()
-    mockCssFiles.set('foo', {
-      importer: new Set(['bar']),
+    mockCssFiles.set('foo.css', {
+      importer: new Set(['bar.css']),
       vBindCode: {
         foo: new Set(['v-bind(foo)']),
       },
     })
-    mockCssFiles.set('bar', {
+    mockCssFiles.set('bar.css', {
       importer: new Set(['foo']),
       vBindCode: {
         bar: new Set(['v-bind(bar)']),
       },
     })
-    getCSSFileRecursion('foo', mockCssFiles, (v) => {
+    getCSSFileRecursion('css', 'foo', mockCssFiles, (v) => {
       mockEvt()
       mockRes.push(v)
     })

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

@@ -66,13 +66,14 @@ export function createCSSFileModuleMap(files: string[], rootDir: string) {
         fileDirParse.dir,
         value.path.replace(/^"|"$/g, ''))
       // 默认使用 .css
-      let importerVal = completeSuffix(importerPath)
+      let importerVal = completeSuffix(importerPath, SUPPORT_FILE.CSS)
       // 如果 file 不是 .css 文件，那么它的 import 需要判断处理
       if (fileSuffix !== `.${SUPPORT_FILE.CSS}`) {
-        // 先根据后缀名查找是否存在该文件
+        // 根据后缀名查找是否存在该文件
         const importerValBySuffix = completeSuffix(
           importerPath,
           fileSuffix.split('.')[1],
+          true,
         )
         // 存在就使用 fileSuffix 的后缀文件
         if (cssFiles.get(importerValBySuffix))

packages/core/runtime/process-css.ts

@@ -1,15 +1,22 @@
 import { parse, resolve } from 'path'
 import { SUPPORT_FILE, completeSuffix, setTArray } from '@unplugin-vue-cssvars/utils'
-import chalk from 'chalk'
 import { parseImports } from '../parser'
 import type { ICSSFile, ICSSFileMap } from '../types'
 import type { SFCDescriptor } from '@vue/compiler-sfc'
 
 export const getCSSFileRecursion = (
+  lang: string = SUPPORT_FILE.CSS,
   key: string,
   cssFiles: ICSSFileMap,
   cb: (res: ICSSFile) => void,
   matchedMark = new Set<string>()) => {
+  // 添加后缀
+  // sfc中规则：如果@import 指定了后缀，则根据后缀，否则根据当前 script 标签的 lang 属性（默认css）
+  key = completeSuffix(key, lang)
+  // 如果 .scss 的 import 不存在，则用 css 的
+  if (!cssFiles.get(key))
+    key = completeSuffix(key, SUPPORT_FILE.CSS, true)
+
   // 避免循环引用
   if (matchedMark.has(key)) return
   const cssFile = cssFiles.get(key)
@@ -18,11 +25,11 @@ export const getCSSFileRecursion = (
     cb(cssFile)
     if (cssFile.importer.size > 0) {
       cssFile.importer.forEach((value) => {
-        getCSSFileRecursion(value, cssFiles, cb, matchedMark)
+        getCSSFileRecursion(lang, value, cssFiles, cb, matchedMark)
       })
     }
   } else {
-    console.log(chalk.yellowBright(`[uplugin-vue-cssvars]: The writing of the path '${key}' is not standardized, which may cause \`v-bind-m\` to fail to take effect`))
+    throw new Error('path')
   }
 }
 
@@ -51,22 +58,25 @@ export const getVBindVariableListByPath = (
     const parseImporterRes = parseImports(content)
     parseImporterRes.imports.forEach((res) => {
       const importerPath = resolve(idDirParse.dir, res.path)
-      // 添加后缀
-      // sfc中规则：如果@import 指定了后缀，则根据后缀，否则根据当前 script 标签的 lang 属性（默认css）
-      let key = completeSuffix(importerPath, lang)
-      // 如果 .scss 的 import 不存在，则用 css 的
-      if (!cssFiles.get(key))
-        key = completeSuffix(importerPath)
 
-      // 根据 @import 信息，从 cssFiles 中，递归的获取所有在预处理时生成的 cssvars 样式
-      getCSSFileRecursion(key, cssFiles, (res: ICSSFile) => {
-        if (res.vBindCode) {
-          !server && injectCSSContent.add({ content: res.content, lang: res.lang, styleTagIndex: i })
-          res.vBindCode.forEach((vb) => {
-            vbindVariable.add(vb)
-          })
+      try {
+        // 根据 @import 信息，从 cssFiles 中，递归的获取所有在预处理时生成的 cssvars 样式
+        getCSSFileRecursion(lang, importerPath, cssFiles, (res: ICSSFile) => {
+          if (res.vBindCode) {
+            !server && injectCSSContent.add({ content: res.content, lang: res.lang, styleTagIndex: i })
+            res.vBindCode.forEach((vb) => {
+              vbindVariable.add(vb)
+            })
+          }
+        })
+      } catch (e) {
+        if ((e as Error).message === 'path') {
+          const doc = 'https://github.com/baiwusanyu-c/unplugin-vue-cssvars/pull/29'
+          throw new Error(`Unable to resolve file under path '${res.path}', see: ${doc}`)
+        } else {
+          throw new Error((e as Error).message)
         }
-      })
+      }
     })
   }
   return {

play/src/main.ts

@@ -1,3 +1,3 @@
 import { createApp } from 'vue'
-import App from './App.vue'
+import App from './views/app/App.vue'
 createApp(App).mount('#app')

play/src/App.vue renamed to play/src/views/app/App.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { reactive, ref } from 'vue'
-import Comp from './comp.vue'
+import Comp from '../../comp.vue'
 const color = 'green'
 const appAsd = () => 'red'
 const fooColor = appAsd()
@@ -79,8 +79,8 @@ export default defineComponent({
 </template>
 
 <style lang="scss" scoped>
-@import './assets/scss/mixin.scss';
-@import './assets/scss/variables.module.scss';
+@import '../src/assets/scss/mixin';
+@import '../../assets/scss/variables.module';
 /* foo.scss -> test2.css -> test.css */
 /* foo.scss -> test.scss -> test2.css */
 

pnpm-lock.yaml

@@ -1,5 +1,6 @@
 export const NAME = 'unplugin-vue-cssvars'
 export const SUPPORT_FILE_LIST = ['**/**.css']
+export const SUPPORT_FILE_REG = /\.(css|sass|scss|styl|less)$/i
 export const FG_IGNORE_LIST = ['**/node_modules/**', '**/dist/**', '**/.git/**']
 export const SUPPORT_FILE = {
   CSS: 'css',

utils/constant.ts

@@ -1,5 +1,5 @@
-import { SUPPORT_FILE } from './constant'
-
+import { join, parse } from 'path'
+import { SUPPORT_FILE, SUPPORT_FILE_REG } from './constant'
 export * from './constant'
 
 export const extend = <
@@ -16,7 +16,11 @@ export const isEmptyObj = (val: unknown) => JSON.stringify(val) === '{}'
 
 export const transformSymbol = (path: string) => path.replaceAll('\\', '/')
 
-export const completeSuffix = (fileName: string, suffix = SUPPORT_FILE.CSS) => {
+export const completeSuffix = (fileName: string, suffix: string, force?: boolean) => {
   const transformSymbolRes = transformSymbol(fileName)
-  return !(/\.[^./\\]+$/i.test(transformSymbolRes)) ? `${transformSymbolRes}.${suffix}` : transformSymbolRes
+  if (force) {
+    const { dir, name } = parse(transformSymbolRes)
+    return transformSymbol(join(dir, `${name}.${suffix || SUPPORT_FILE.CSS}`))
+  }
+  return !(SUPPORT_FILE_REG.test(transformSymbolRes)) && suffix ? `${transformSymbolRes}.${suffix}` : transformSymbolRes
 }