feat: add ensureStyleFile to ensure that the style file exists #4

README.md

@@ -91,9 +91,9 @@ export default (): UserConfigExport => {
             resolveStyle: (name) => {
               return `element-plus/lib/theme-chalk/${name}.css`;
             },
-            // resolveComponent: (name) => {
-            //   return `element-plus/lib/${name}`;
-            // },
+            resolveComponent: (name) => {
+              return `element-plus/lib/${name}`;
+            },
           },
         ],
       }),
@@ -116,6 +116,7 @@ export default (): UserConfigExport => {
 {
   // Need to imported  library name
   libraryName: string;
+
   // Custom style file conversion
   resolveStyle: (name: string) => string;
 
@@ -124,12 +125,20 @@ export default (): UserConfigExport => {
   libraryNameChangeCase?: LibraryNameChangeCase;
 
   // If the style file is not .css suffix. Need to turn on this option
+  // default: false
   esModule?: boolean;
 
+  /**
+   * There may be some component libraries that are not very standardized.
+   * You can turn on this to ignore to determine whether the file exists. Prevent errors when importing non-existent css files.
+   * Performance may be slightly reduced after it is turned on, but the impact is not significant
+   * default: false
+   */
+  ensureStyleFile?: boolean;
 
   // https://github.com/anncwb/vite-plugin-style-import/pull/5
-  // Used in some situations where components may need to be introduced on demand, not just to introduce styles
-  // Turning on the environment does not work
+  // Used in some situations where components may need to be introduced on demand, not just to introduce styles.(Libraries that don't support Esm well)
+  // Only work in production
   resolveComponent?: (name: string) => string;
 }
 

README.zh_CN.md

@@ -91,9 +91,9 @@ export default (): UserConfigExport => {
             resolveStyle: (name) => {
               return `element-plus/lib/theme-chalk/${name}.css`;
             },
-            // resolveComponent: (name) => {
-            //   return `element-plus/lib/${name}`;
-            // },
+            resolveComponent: (name) => {
+              return `element-plus/lib/${name}`;
+            },
           },
         ],
       }),
@@ -116,6 +116,7 @@ export default (): UserConfigExport => {
 {
   // 需要导入的库名
   libraryName: string;
+
   // 自定义样式转换
   resolveStyle: (name: string) => string ｜ string[];
 
@@ -125,11 +126,21 @@ export default (): UserConfigExport => {
 
 
   // 如果样式文件不是.css后缀。需要开启此选项
+  // default:false
   esModule?: boolean;
 
+
+   /**
+   * 可能有些组件库不是很标准化。
+   * 您可以打开此选项以忽略以确定文件是否存在。 导入不存在的CSS文件时防止错误。
+   * 开启后性能可能会略有下降，但影响不大
+   * default: false
+   */
+  ensureStyleFile?: boolean;
+
    // https://github.com/anncwb/vite-plugin-style-import/pull/5
-  // 用于一些可能需要按需引入组件的情况,不单单只是引入样式
-  // ! 开启环境不起作用
+  // 用于一些可能需要按需引入组件的情况,不单单只是引入样式(对Esm不能很好支持的库)
+  // 仅在生产环境工作
   resolveComponent?: (name: string) => string;
 }
 

example/vite.config.ts

@@ -29,9 +29,9 @@ export default (): UserConfigExport => {
             resolveStyle: (name) => {
               return `element-plus/lib/theme-chalk/${name}.css`;
             },
-            // resolveComponent: (name) => {
-            //   return `element-plus/lib/${name}`;
-            // },
+            resolveComponent: (name) => {
+              return `element-plus/lib/${name}`;
+            },
           },
         ],
       }),

src/index.ts

@@ -14,9 +14,12 @@ import MagicString from 'magic-string';
 import path from 'path';
 import { normalizePath } from 'vite';
 import { debug as Debug } from 'debug';
+import fs from 'fs';
 
 const debug = Debug('vite-plugin-style-import');
 
+const ensureFileExts: string[] = ['.css', 'js', '.scss', '.less', '.styl'];
+
 export default (options: VitePluginComponentImport): Plugin => {
   const {
     include = ['**/*.vue', '**/*.ts', '**/*.js', '**/*.tsx', '**/*.jsx'],
@@ -107,7 +110,13 @@ export default (options: VitePluginComponentImport): Plugin => {
 
 // Generate the corresponding component css string array
 function transformComponentCss(lib: Lib, importVariables: string[]) {
-  const { libraryName, resolveStyle, esModule, libraryNameChangeCase = 'paramCase' } = lib;
+  const {
+    libraryName,
+    resolveStyle,
+    esModule,
+    libraryNameChangeCase = 'paramCase',
+    ensureStyleFile = false,
+  } = lib;
   if (!resolveStyle || typeof resolveStyle !== 'function' || !libraryName) {
     return [];
   }
@@ -119,7 +128,14 @@ function transformComponentCss(lib: Lib, importVariables: string[]) {
     if (esModule) {
       importStr = resolveNodeModules(importStr);
     }
-    set.add(`import '${importStr}';\n`);
+
+    let isAdd = true;
+
+    if (ensureStyleFile) {
+      isAdd = ensureFileExists(importStr, esModule);
+    }
+
+    isAdd && set.add(`import '${importStr}';\n`);
   }
   debug('import css sets:', set.toString());
   return Array.from(set);
@@ -170,6 +186,37 @@ function transformImportVar(importStr: string) {
   return importVariables;
 }
 
+// Make sure the file exists
+// Prevent errors when importing non-existent css files
+function ensureFileExists(importStr: string, esModule = false) {
+  const extName = path.extname(importStr);
+  if (!extName) {
+    return tryEnsureFile(importStr, esModule);
+  }
+
+  if (esModule) {
+    return fileExists(importStr);
+  }
+
+  return true;
+}
+
+function tryEnsureFile(filePath: string, esModule = false) {
+  const filePathList = ensureFileExts.map((item) => {
+    const p = `${filePath}${item}`;
+    return esModule ? p : resolveNodeModules(p);
+  });
+  return filePathList.some((item) => fileExists(item));
+}
+
+function fileExists(f: string) {
+  try {
+    return fs.existsSync(f);
+  } catch (error) {
+    return false;
+  }
+}
+
 function getLib(libraryName: string, libs: Lib[]) {
   return libs.find((item) => item.libraryName === libraryName);
 }

src/types.ts

@@ -14,6 +14,15 @@ export interface Lib {
    * Custom imported component style conversion
    */
   resolveStyle: (name: string) => string;
+
+  /**
+   * There may be some component libraries that are not very standardized.
+   * You can turn on this to ignore to determine whether the file exists. Prevent errors when importing non-existent css files.
+   * Performance may be slightly reduced after it is turned on, but the impact is not significant
+   * @default: false
+   */
+  ensureStyleFile?: boolean;
+
   /**
    * Custom component file conversion
    * Turning on the environment does not work