PostCSS @import glob

PostCSS plugin to inline CSS @imports, with support for glob patterns.

Usage

a.css:

* { content: "a" }

b.css:

* { content: "b" }

import postcss from "postcss"
import imports from "postcss-import-glob"

const css = '@import "*.css";'
const post = await postcss([imports]).process(css, { from: undefined, to: "post.css" })
console.log(post.css)

post.css:

* { content: "a" }
* { content: "b" }

Examples

@import "style.css";
@import 'style.css';
@import url(style.css);
@import url("style.css");
@import url('style.css');

@import "*.css";
@import '*.css';
@import "**/*.css";
@import url(**/*.css);
@import url(*.css);
@import url("*.css");
@import url('*.css')

Install

pnpm add postcss postcss-import-glob

[!IMPORTANT] This package is ESM only, so must be imported instead of required, and depends on Node.js >=20.

Specify this requirement with engines and/or devEngines:

// package.json
"type": "module",
"engines": {
  "node": ">=20"
},
"devEngines": {
  "runtime": {
    "name": "node",
    "version": ">=20"
  }
},

License

MIT © Daniel Bayley