rollup-plugin-merge-and-inject-css
v1.1.4
Published
A rollup plugin to merge all css files and inject them to top of the styles blocks
Downloads
45
Maintainers
Readme
rollup-plugin-merge-and-inject-css
A rollup plugin to collect and combine all the imported css file and inject them to the head at the top of style blocks list.
Install
npm install --save-dev rollup-plugin-merge-and-inject-css
yarn add rollup-plugin-merge-and-inject-css --dev
Plugin options
| Name | Type | Required | Description
|----------|-------------------|----------|-------------
| id | String | false | The id
of your rollup build, it's needed to update build properly in watch mode. Default value is the random uid
for a current watch run.
Usage
The common scenario for using this plugin is the merging of css files produced by different component. For example, it's useful for rollup-plugin-vue.
The default inject tool of this plugin will produce something like that:
<style>
.red-component {
color: red;
}
</style>
<style>
.blue-component {
color: blue;
}
</style>
<style>
.green-component {
color: green;
}
</style>
This plugin will produce this (if all that components are the part of a generating bundle):
<style>
/*for=example-components*/
.red-component {
color: red;
}
.blue-component {
color: blue;
}
.green-component {
color: green;
}
</style>
Example
The example of the rollup config with this plugin
import autoprefixer from 'autoprefixer';
import Vue from 'rollup-plugin-vue';
import babel from 'rollup-plugin-babel';
import commonjs from 'rollup-plugin-commonjs';
import external from 'rollup-plugin-peer-deps-external';
import postcss from 'rollup-plugin-postcss';
import resolve from 'rollup-plugin-node-resolve';
import url from 'rollup-plugin-url';
import sass from 'rollup-plugin-sass';
import css from 'rollup-plugin-merge-and-inject-css'
import pkg from './package.json';
export default {
input: 'src/index.js',
output: [
{
file: pkg.main,
format: 'cjs',
sourcemap: true
},
{
file: pkg.module,
format: 'es',
sourcemap: true
}
],
plugins: [
external(),
css({
id: 'example-components'
}),
Vue({
css: false,
style: {
postcssPlugins: [autoprefixer]
}
}),
url(),
babel({
exclude: 'node_modules/**',
}),
resolve(),
commonjs(),
]
}