rollup-plugin-css-bundle

rollup-plugin-css-bundle

A Rollup plugin whose sole purpose is to collect all the CSS files you import into your project and bundle them into a single glorious CSS file. Refreshingly, it preserves the order in which the CSS files are imported. Soberingly, it does not generate source maps.

Installation

# using npm
npm install --save-dev rollup-plugin-css-bundle

# using yarn
yarn add --dev rollup-plugin-css-bundle

Usage

In your rollup.config.js file:

import cssbundle from 'rollup-plugin-css-bundle';

export default {
	input: 'index.js',
	output: {
		file: 'dist/index.js',
		format: 'cjs'
	},
	plugins: [cssbundle()]
};

Like all well-behaved Rollup plugins, cssbundle supports the include and exclude options that filter the files on which the plugin should run.

output: String is an optional path for the extracted CSS; when ommitted, we use the bundle's file name to fashion a path for the bundled CSS.

transform: Function is available for processing the CSS, such as with postcss. It receives a string containing the code to process as its only parameter, and should return the processed code. Par exemple:

// rollup.config.js

import cssbundle from 'rollup-plugin-css-bundle';
import postcss from 'postcss';
import autoprefixer from 'autoprefixer';

export default {
	input: 'index.js',
	output: {
		file: 'dist/index.js',
		format: 'cjs'
	},
	plugins: [
		cssbundle({
			transform: code => postcss([autoprefixer]).process(code, {})
		})
	]
};

That's it. Enjoy! ✌️