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.
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';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';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';This package requires "fast-glob".
Copyright (c) 2024 Elco Klingen. MIT License.