Skip to content
Rollup plugin to extract CSS into a single external file.
Branch: master
Clone or download
Latest commit 5d0df70 Nov 7, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Use `generateBundle` hook rather than deprecated `ongenerate` and `on… Nov 7, 2018
.gitignore Readme Apr 20, 2018
CHANGELOG.md v1.0.4 Nov 7, 2018
LICENSE Initial commit Apr 20, 2018
README.md Readme: installation, npm badge Oct 31, 2018
package.json v1.0.4 Nov 7, 2018
rollup.config.js Housekeeping: Oct 31, 2018
yarn.lock Housekeeping: Oct 31, 2018

README.md

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

npm version

# 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! ✌️

You can’t perform that action at this time.