postcss-import-ext-glob

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

Usage no npm install needed!

<script type="module">
  import postcssImportExtGlob from 'https://cdn.skypack.dev/postcss-import-ext-glob';
</script>

README

postcss-import-ext-glob Build Status Coverage Status

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

License

This project is licensed under the MIT license.