Registry / web-framework / rollup-plugin-hot-css

rollup-plugin-hot-css

library0.7.2jsnpmunverified

A Rollup plugin for loading CSS files with Hot Module Replacement (HMR) support via Nollup. Version 0.7.2 is the latest release. It supports preprocessing with built-in scss and less loaders or custom loaders (including PostCSS), resolves asset URLs (images, fonts), and emits them as Rollup assets. HMR works by replacing the <link> tag href with a timestamp to force browser reload. Differentiates from other CSS plugins by focusing on HMR with Nollup and flexible loader chaining.

web-framework devops

npm install rollup-plugin-hot-css

package ↗

INSTALL

IMPORT

SIG · ROLLUP-PLUGIN-HOT-

rollup-plugin-hot-css

web-frameworkjavascriptv0.7.2

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

✓ import hotcss from 'rollup-plugin-hot-css'

✗ const hotcss = require('rollup-plugin-hot-css');

Package does not ship ESM; use require() in CommonJS or use dynamic import in ESM.

require()

✓ const hotcss = require('rollup-plugin-hot-css')

✗ import hotcss from 'rollup-plugin-hot-css'

Only CJS is supported. In ESM contexts, use createRequire or transpile.

TypeScript types

✓ // @ts-ignore or declare module 'rollup-plugin-hot-css'

✗ import type { RollupPluginHotCssOptions } from 'rollup-plugin-hot-css'

Does not include TypeScript declarations. Use custom type declaration or @ts-ignore.

Basic Rollup config using rollup-plugin-hot-css with SCSS preprocessing and HMR.

// rollup.config.js const hotcss = require('rollup-plugin-hot-css'); module.exports = { input: 'src/main.js', output: { dir: 'dist', format: 'esm', assetFileNames: '[name][extname]' }, plugins: [ hotcss({ file: 'styles.css', extensions: ['.css', '.scss'], loaders: ['scss'], hot: true, publicPath: '/' }) ] };

Debug

Known issues

breakingHMR only works with Nollup dev server, not Rollup's built-in watcher. Using hot:true without Nollup will cause errors.

fix

Set hot: false for production builds, or use Nollup development server.

affects: >=0.0.0

gotchaAsset URLs are resolved only if sourcemaps are emitted by the previous loader. If missing, URLs may be broken.

fix

Ensure each loader (especially custom ones) returns a sourcemap or disable url: false.

affects: >=0.0.0

deprecatedThe 'file' option default is 'styles.css', but final name depends on assetFileNames Rollup output option, which can be confusing.

fix

Set assetFileNames to '[name][extname]' to get expected output filename.

affects: >=0.0.0

gotchaCustom loaders can be async by returning a Promise, but many users forget to wrap resolve correctly in Promise constructor.

fix

Always return a Promise object, not an object directly from the executor. Use async/await or new Promise(resolve => resolve({...})).

affects: >=0.0.0

breakingThe 'loaders' array expects string names only for built-in loaders ('scss', 'less'); passing a function works but requires correct signature.

fix

For custom loaders, use a function that receives (input, id) and returns { code, map?, watchFiles? }.

affects: >=0.0.0

Errors

Common errors & fixes

Error: Cannot find module 'sass'

The SCSS loader requires the 'sass' npm package to be installed but it is missing.

fix

npm install sass --save-dev

Error: No loader found for .css

The 'extensions' option does not include '.css' or loaders array is missing a suitable loader.

fix

Add '.css' to extensions and ensure a loader is present (e.g., loaders: [] for plain CSS).

TypeError: hotcss is not a function

Using ES import syntax with a package that only exports CommonJS.

fix

Use require() or configuration with bundler that handles CJS interop.

The 'hot' option is deprecated. Use HMR through Nollup only.

Confusion with other Rollup HMR plugins; this plugin's hot option works only with Nollup.

fix

Ensure you are using Nollup dev server. For Rollup-only builds, set hot: false.

Upgrade

Version history

0.7.2latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

7 hits · last 30 days

node

Resources

packagehttps://www.npmjs.com/package/rollup-plugin-hot-css ↗