Rollup Plugin Lib Style

2.5.0 verified Mon Apr 27 auth: no javascript

A Rollup plugin for building component libraries with tree-shakeable, per-component CSS. Version 2.5.0 (stable). It converts CSS and preprocessor files (SASS/SCSS, Less, Stylus) into CSS modules, generating a separate CSS file per component with scoped class names. Unlike single CSS file bundling (bloat) or CSS-in-JS (runtime overhead), this plugin outputs plain CSS with zero runtime cost and automatic scoping. Works with preserveModules and code splitting. ESM-only, requires Node >=16. Ships TypeScript types.

Common errors

error Error [ERR_REQUIRE_ESM]: require() of ES Module not supported. ↓

cause Using CommonJS require() to import the plugin.

fix

Replace require('rollup-plugin-lib-style') with import { libStylePlugin } from 'rollup-plugin-lib-style'.

error TypeError: libStylePlugin is not a function ↓

cause Incorrect import; plugin is not default exported in older versions?

fix

Verify you are using the named export: import { libStylePlugin } from 'rollup-plugin-lib-style'.

error Node.js v14.17.0 is not supported: rollup-plugin-lib-style requires Node >=16 ↓

cause Running on unsupported Node version.

fix

Upgrade Node to 16 or higher.

Warnings

gotcha The plugin generates .css.js files alongside .css files. These extra files may be included in the bundle if not handled properly. ↓

fix Ensure Rollup's output does not include the temporary .css.js files in final distribution (they are typically removed by build cleanup or ignored by .npmignore).

gotcha The plugin requires Node >=16. Older Node versions cause runtime errors. ↓

fix Update Node to >=16.

gotcha The plugin is ESM-only. CommonJS require() will fail with ERR_REQUIRE_ESM. ↓

fix Use import syntax in your Rollup config or run Node with --experimental-require-module.

deprecated Version <2.x used a different export pattern (default export only). ↓

fix Update to 2.x and use named export { libStylePlugin } or default export.

Install

npm install rollup-plugin-lib-style

yarn add rollup-plugin-lib-style

pnpm add rollup-plugin-lib-style

Imports

libStylePlugin

wrong

const libStylePlugin = require('rollup-plugin-lib-style')

correct

import { libStylePlugin } from 'rollup-plugin-lib-style'

ESM-only package; require() will not work.

default
```
import libStylePlugin from 'rollup-plugin-lib-style'
```
Default export is also available but named export is preferred for tree-shaking.

LibStylePluginOptions

import type { LibStylePluginOptions } from 'rollup-plugin-lib-style'

Type exported for TypeScript users.

Quickstart

Shows minimal Rollup config with preserveModules, CSS module usage, and plugin setup.

// rollup.config.js
import { libStylePlugin } from 'rollup-plugin-lib-style';

export default {
  input: 'src/index.js',
  output: {
    dir: 'dist',
    format: 'es',
    preserveModules: true
  },
  plugins: [
    libStylePlugin({
      // Optional: custom postcss config
      postcss: {
        modules: true
      }
    })
  ]
};

// src/components/Button.js
import styles from './Button.css';

const Button = () => {
  const button = document.createElement('button');
  button.className = styles.button;
  button.textContent = 'Click me';
  return button;
};

export default Button;