PostCSS Bundler

npm install @csstools/postcss-bundler --save-dev

PostCSS Bundler bundles your CSS.

This plugin pack contains :

• a bundler based on standard CSS @import statements.
• a rebaser that rewrites URLs in your CSS.

examples/example.css :

@import url("imports/basic.css");
@import url("node_modules:open-props/red");

examples/imports/basic.css:

.foo {
	background: url('../../images/green.png');
}

when bundled :

/* imports/basic.css */
.foo {
	background: url("../images/green.png");
}
/* node_modules:open-props/red */
:where(html){--red-0:#fff5f5;--red-1:#ffe3e3;--red-2:#ffc9c9;--red-3:#ffa8a8;--red-4:#ff8787;--red-5:#ff6b6b;--red-6:#fa5252;--red-7:#f03e3e;--red-8:#e03131;--red-9:#c92a2a;--red-10:#b02525;--red-11:#962020;--red-12:#7d1a1a}

Usage

Add PostCSS Bundler to your project:

npm install postcss @csstools/postcss-bundler --save-dev

Use it as a PostCSS plugin:

const postcss = require('postcss');
const postcssBundler = require('@csstools/postcss-bundler');

postcss([
	postcssBundler(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);

PostCSS Bundler runs in all Node environments, with special instructions for:

• Node
• PostCSS CLI
• PostCSS Load Config
• Webpack
• Next.js
• Gulp
• Grunt

postcss-import

postcss-import is also a CSS bundler and parts of PostCSS Bundler are based on it.
While creating this plugin we also submitted patches to postcss-import where possible.

PostCSS Bundler is tuned differently and lacks configuration options that are present in postcss-import.

PostCSS Bundler is intended to just work and to be a drop-in replacement for native CSS @import statements.