rollup-plugin-postcss-hot

This is a fork of rollup-plugin-postcss with added support for hot CSS injection during HMR, with rollup-plugin-hot .

The intention is to provide a fillgap solution for HMR and, ideally, to integrate HMR support into the original plugin. If someone is interested is pushing Rollup's HMR cause by discussing this and submitting clean PRs to the original project, that would be huge!

NOTE Hot CSS injection only works when the inject option is true.

NOTE 2 This has only be tested with default options, so if you find a bug with HMR support, please open an issue in this repo (not rollup-plugin-postcss repo).

A basic example is available in rollup-plugin-hot's repository.

Install

yarn add rollup-plugin-postcss-hot --dev

Usage

Usage should be exactly the same as the original plugin. Please refer to rollup-plugin-postcss's docs.

There's only a hot option added:

const HOT = !!process.env.HOT // for example
 
...
 
postcss({
  hot: HOT,
  extract: path.resolve(''),
  sourceMap: true,
}),

When the hot option is true, inject option will be forcefully enabled and, if you have extract option (like in the above example), an empty file will be written in this location.

The empty file avoid a 404 if your app tries to load the file normally. It is emptied because otherwise the content of the file initially loaded by the browser could conflict with CSS inject by HMR.