postcss-import-ext-glob

A PostCSS v8 plugin to extend postcss-import path resolver to allow glob usage as a path.

You must use this plugin along with postcss-import, place this plugin before postcss-import.

1@import-glob "components/**/*.css";

Installation

1$ npm install --save-dev postcss postcss-import postcss-import-ext-glob

Usage

1// PostCSS plugins
2postcss([
3  require('postcss-import-ext-glob'),
4  require('postcss-import')
5]);

Check out PostCSS docs for the complete installation.

Example

This plugin transform this:

1@import-glob "components/**/*.css";

into this:

1@import "components/form/input.css";
2@import "components/form/submit.css";
3/* etc */

Thereby, the plugin postcss-import can now import each file.

You can pass multiple globs in one:

1@import-glob "helpers/**/*.css", "components/**/*.css";

Options

You can pass a sort option to this plugin with a value of "asc" or "desc":

1// Postcss plugins
2postcss([
3  require('postcss-import-ext-glob')({
4    sort: 'desc'
5  }),
6  require('postcss-import')
7]);

The sort order is by default ascending.

Related

• postcss-import - PostCSS plugin to inline @import rules content
• fast-glob - Module used for getting glob entries
• fast-sort - Module used for sorting glob entries
• ava-postcss-tester - Simply test your PostCSS plugin with AVA

License

This project is licensed under the MIT license.