postcss-import-ext-glob

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.

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

Installation

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

Usage

// PostCSS plugins
postcss([
  require('postcss-import-ext-glob'),
  require('postcss-import')
]);

Check out PostCSS docs for the complete installation.

Example

This plugin transform this:

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

into this:

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

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

You can pass multiple globs in one:

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

Options

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

// Postcss plugins
postcss([
  require('postcss-import-ext-glob')({
    sort: 'desc'
  }),
  require('postcss-import')
]);

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.

Changelog

2.1.1 - 2022-11-30

Fixed

• Upgraded dependencies.