Repository files navigation

ARollup 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.

# using npmnpm install --save-dev rollup-plugin-css-bundle# using yarnyarn add --dev rollup-plugin-css-bundle

In yourrollup.config.js file:

importcssbundlefrom'rollup-plugin-css-bundle';exportdefault{input:'index.js',output:{file:'dist/index.js',format:'cjs'},plugins:[cssbundle()]};

Like all well-behaved Rollup plugins, cssbundle supports theinclude andexclude 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 withpostcss. It receives a string containing the code to process as its only parameter, and should return the processed code.Par exemple:

// rollup.config.jsimportcssbundlefrom'rollup-plugin-css-bundle';importpostcssfrom'postcss';importautoprefixerfrom'autoprefixer';exportdefault{input:'index.js',output:{file:'dist/index.js',format:'cjs'},plugins:[cssbundle({transform:code=>postcss([autoprefixer]).process(code,{})})]};

That's it. Enjoy! ✌️