@eklingen/glob-importers

Glob importers

Plugins to add globbing support to import statements in various environments like Sass, Webpack and ESBuild.

TODO: Add support for detecting import calls as opposed to statements.

Usage

For sass / sass-embedded (with .scss syntax)

Add the plugin to the plugins field of your sass.config.js:

import { sassPlugin as globImporter } from '@eklingen/glob-importers'
plugins: [globImporter()],

This will enable the following:

@import '../../components/**/*';

Will get expanded to, for example (depending on the glob and files present):

@import '../../components/button/button.scss';
@import '../../components/link/link.scss';
@import '../../components/vide/video.scss';

For esbuild

Add the plugin to the plugins field of your esbuild.config.js:

import { esbuildPlugin as globImporter } from '@eklingen/glob-importers'
plugins: [globImporter()],

This will enable the following:

import 'components/**/*.js';

Will get expanded to, for example (depending on the glob and files present):

import 'components/button/button.js';
import 'components/link/link.js';
import 'components/video/video.js';

For webpack

Add an extra prority rule to the rules in webpack.config.js:

  import { path as resolvePath } from 'node:path';
  const globImporter = join(process.cwd(), 'node_modules/@eklingen/glob-importers/importers/webpack.js'); // This path has to resolve, since webpack loads it dynamically.
  ...
  {
    module: {
      rules: {
        /* NOTE: Change `test`, `include` and `exclude` to taste. Here sourcePath is the scripts root. The plugin tries to resolve the globs on the include paths. */
        { enforce: 'pre', test: /\.((j|t)sx?)$/, include: resolvePath(__dirname, sourcePath), exclude: /node_modules/, loader: globImporter, options: { test: '(import|require)', delimiter: '\n' } },
        ...
      }
    }
  }

This will enable the following:

import 'components/**/*.js';

Will get expanded to, for example (depending on the glob and files present):

import 'components/button/button.js';
import 'components/link/link.js';
import 'components/video/video.js';

Dependencies

This package requires "fast-glob".

---

Copyright (c) 2024 Elco Klingen. MIT License.