feat: auto import of style files (#28)

Co-authored-by: Anthony Fu <[email protected]>

Author: develar

src/context.ts

@@ -133,7 +133,6 @@ export class Context {
 
         this._componentNameMap[name] = {
           name,
-          absolute: path,
           path: `/${this.relative(path)}`,
         }
       })
@@ -158,8 +157,7 @@ export class Context {
         else {
           return {
             name,
-            path: result.path,
-            importName: result.importName,
+            ...result,
           }
         }
       }

src/types.ts

@@ -1,4 +1,14 @@
-export type ComponentResolveResult = string | { path: string; importName?: string }
+export interface ImportInfo {
+  name?: string
+  importName?: string
+  path: string
+}
+
+export interface ComponentInfo extends ImportInfo {
+  sideEffects?: (ImportInfo | string)[] | ImportInfo | string
+}
+
+export type ComponentResolveResult = string | ComponentInfo
 
 export type ComponentResolver = (name: string) => ComponentResolveResult | null | undefined | void
 
@@ -91,11 +101,4 @@ Required<Options>,
   globs: string[]
 }
 
-export interface ComponentInfo {
-  name: string
-  path: string
-  absolute?: string
-  importName?: string
-}
-
 export type ComponentsImportMap = Record<string, string[] | undefined>

src/utils.ts

@@ -1,7 +1,7 @@
 import { join, parse, resolve } from 'path'
 import minimatch from 'minimatch'
 import { ResolvedConfig } from 'vite'
-import { ComponentInfo, ResolvedOptions, Options } from './types'
+import { ComponentInfo, ResolvedOptions, Options, ImportInfo } from './types'
 import { LibraryResolver } from './helpers/libraryResolver'
 import { defaultOptions } from './constants'
 import { Context } from './context'
@@ -69,17 +69,32 @@ export function matchGlobs(filepath: string, globs: string[]) {
   return false
 }
 
-export function stringifyComponentImport({ name, path, importName }: ComponentInfo, ctx: Context) {
+export function stringifyImport(info: ImportInfo | string) {
+  if (typeof info === 'string')
+    return `import '${info}'`
+  if (!info.name)
+    return `import '${info.path}'`
+  else if (info.importName)
+    return `import { ${info.importName} as ${info.name} } from '${info.path}'`
+  else
+    return `import ${info.name} from '${info.path}'`
+}
+
+export function stringifyComponentImport({ name, path, importName, sideEffects }: ComponentInfo, ctx: Context) {
   if (ctx.options.importPathTransform) {
     const result = ctx.options.importPathTransform(path)
     if (result != null)
       path = result
   }
 
-  if (importName)
-    return `import { ${importName} as ${name} } from '${path}'`
-  else
-    return `import ${name} from '${path}'`
+  const imports = [
+    stringifyImport({ name, path, importName }),
+  ]
+
+  if (sideEffects)
+    toArray(sideEffects).forEach(i => imports.push(stringifyImport(i)))
+
+  return imports.join('\n')
 }
 
 export function resolveOptions(options: Options, viteConfig: ResolvedConfig): ResolvedOptions {

test/__snapshots__/stringifyComponentImport.test.ts.snap

@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`stringifyComponentImport importName 1`] = `"import { a as Test } from 'test'"`;
+
+exports[`stringifyComponentImport multiple sideEffects 1`] = `
+"import Test from 'test'
+import 'test.css'
+import css from 'test2.css'"
+`;
+
+exports[`stringifyComponentImport plain css sideEffects 1`] = `
+"import Test from 'test'
+import 'test.css'"
+`;

test/stringifyComponentImport.test.ts

@@ -0,0 +1,40 @@
+import { Context } from '../src/context'
+import { stringifyComponentImport } from '../src/utils'
+
+describe('stringifyComponentImport', () => {
+  it('importName', async() => {
+    const ctx = new Context({}, { root: '' } as any)
+    expect(
+      stringifyComponentImport({
+        name: 'Test',
+        path: 'test',
+        importName: 'a',
+      }, ctx),
+    ).toMatchSnapshot()
+  })
+
+  it('plain css sideEffects', async() => {
+    const ctx = new Context({}, { root: '' } as any)
+    expect(
+      stringifyComponentImport({
+        name: 'Test',
+        path: 'test',
+        sideEffects: 'test.css',
+      }, ctx),
+    ).toMatchSnapshot()
+  })
+
+  it('multiple sideEffects', async() => {
+    const ctx = new Context({}, { root: '' } as any)
+    expect(
+      stringifyComponentImport({
+        name: 'Test',
+        path: 'test',
+        sideEffects: [
+          'test.css',
+          { name: 'css', path: 'test2.css' },
+        ],
+      }, ctx),
+    ).toMatchSnapshot()
+  })
+})