feat: add ignoreComponents config option (#176)

Co-authored-by: 三咲智子 Kevin Deng <sxzz@sxzz.moe>
Fix #165

README.md

@@ -222,6 +222,24 @@ type Prefix = string
 import { AlButton } from 'xx-lib'
 ```
 
+### `ignoreComponents`
+
+```ts
+type IgnoreComponents = string[]
+```
+
+Skip style imports for a list of components. Useful for Element Plus components which do not have a style file.
+At the time of writing, this is only the `AutoResizer` component.
+
+```javascript
+// format: 'cjs'
+import { ElAutoResizer } from 'element-plus'
+
+//    ↓ ↓ ↓ ↓ ↓ ↓
+
+import { ElAutoResizer } from 'element-plus'
+```
+
 ### `defaultLocale`
 
 Replace default locale, you can find locale list [here](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang).

src/core/style.ts

@@ -31,9 +31,10 @@ export const transformImportStyle = (
     prefix: string
     lib: string
     format: FormatType
+    ignoreComponents: string[]
   }
 ) => {
-  const { prefix, lib, format } = options
+  const { prefix, lib, format, ignoreComponents } = options
   const statement = stripeComments(source.slice(specifier.ss, specifier.se))
   const leftBracket = statement.indexOf('{')
   if (leftBracket > -1) {
@@ -46,6 +47,7 @@ export const transformImportStyle = (
       const trimmed = c.replace(/\sas\s.+/, '').trim()
       if (trimmed.startsWith(prefix)) {
         const component = trimmed.slice(prefix.length)
+        if (ignoreComponents.includes(component)) return
         if (useSource) {
           styleImports.push(
             `import '${lib}/${formatMap[format]}/components/${hyphenate(
@@ -66,7 +68,7 @@ export const transformImportStyle = (
 }
 
 export const transformStyle = async (source: string, options: Options) => {
-  const { useSource, lib, prefix, format } = options
+  const { useSource, lib, prefix, format, ignoreComponents } = options
 
   if (!source) return
 
@@ -84,6 +86,7 @@ export const transformStyle = async (source: string, options: Options) => {
         lib,
         prefix,
         format,
+        ignoreComponents,
       })
       return ret
     })

src/index.ts

@@ -14,6 +14,7 @@ const defaultOptions: Options = {
   include: ['**/*.vue', '**/*.ts', '**/*.js', '**/*.tsx', '**/*.jsx'],
   exclude: [/[/\\]node_modules[/\\]/, /[/\\]\.git[/\\]/, /[/\\]\.nuxt[/\\]/],
   lib: 'element-plus',
+  ignoreComponents: [],
   useSource: false,
   defaultLocale: '',
   format: 'esm',

src/types.ts

@@ -16,6 +16,13 @@ export type Options = {
   /** replace default locale */
   defaultLocale: string
 
+  /**
+   * Array of component names that will not be transformed.
+   * Can be useful for components that do not have an associated style file.
+   * Do not include the prefix in the name.
+   */
+  ignoreComponents: string[]
+
   lib: string
   prefix: string
   format: 'cjs' | 'esm'

tests/__snapshots__/transform.test.ts.snap

@@ -36,6 +36,22 @@ console.log(ElButton, ElCol);
 "
 `;
 
+exports[`transform > fixtures > tests/fixtures/ignored.ts > useSource = false 1`] = `
+"import { ElAutoResizer } from 'element-plus';
+import 'element-plus/es/components/button/style/css';
+
+console.log(ElAutoResizer);
+"
+`;
+
+exports[`transform > fixtures > tests/fixtures/ignored.ts > useSource = true 1`] = `
+"import { ElAutoResizer } from 'element-plus';
+import 'element-plus/es/components/button/style/index';
+
+console.log(ElAutoResizer);
+"
+`;
+
 exports[`transform > fixtures > tests/fixtures/import-alias.ts > useSource = false 1`] = `
 "import { ElButton, ElCard } from 'element-plus';
 import 'element-plus/es/components/button/style/css';

tests/fixtures/ignored.ts

@@ -0,0 +1,3 @@
+import { ElAutoResizer, ElButton } from 'element-plus'
+
+console.log(ElAutoResizer)

tests/transform.test.ts

@@ -41,6 +41,7 @@ describe('transform', () => {
               filepath,
               plugin({
                 useSource,
+                ignoreComponents: ['AutoResizer'],
               })
             )
             expect(code).toMatchSnapshot()