rollup-plugin-keep-css-imports

1.0.0 verified Mon Apr 27 auth: no javascript

Rollup plugin that preserves CSS, SCSS, and SASS import statements unchanged during bundling. Version 1.0.0, actively maintained. Useful for component libraries where consumers need to handle CSS bundling themselves. Supports custom output paths, extensions, source maps, and PostCSS compatibility. Differentiates by keeping imports untouched rather than bundling or extracting CSS.

Common errors

error Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'rollup-plugin-keep-css-imports' imported from ... ↓

cause Package not installed or not in node_modules.

fix

Run npm install rollup-plugin-keep-css-imports --save-dev.

error TypeError: keepCssImports is not a function ↓

cause Using named import instead of default import.

fix

Use import keepCssImports from 'rollup-plugin-keep-css-imports' (without braces).

error Plugin could not be loaded: Error [ERR_REQUIRE_ESM] ↓

cause Attempted to require() an ES module package.

fix

Use import instead of require, or set "type": "module" in package.json.

Warnings

gotcha Plugin requires Rollup to be installed as peer dependency. ↓

fix Ensure rollup is installed: npm install rollup --save-dev.

gotcha outputPath option 'keep' only preserves the original relative path if the input file is under the current working directory. If using absolute paths or paths outside cwd, behavior may be unexpected. ↓

fix Use a custom function to generate output paths explicitly.

gotcha Source maps are only generated when sourceMap option is true or 'inline'. Default is false, no source maps. ↓

fix Set sourceMap: true or sourceMap: 'inline' if source maps are needed.

Install

npm install rollup-plugin-keep-css-imports

yarn add rollup-plugin-keep-css-imports

pnpm add rollup-plugin-keep-css-imports

Imports

keepCssImports

wrong

const keepCssImports = require('rollup-plugin-keep-css-imports')

correct

import keepCssImports from 'rollup-plugin-keep-css-imports'

Default export, ESM only. CommonJS require will fail as package is type: module.

keepCssImports

wrong

import { keepCssImports } from 'rollup-plugin-keep-css-imports'

correct

import keepCssImports from 'rollup-plugin-keep-css-imports'; keepCssImports({...})

Named export does not exist. Only default export.

keepCssImports (TypeScript)

import keepCssImports from 'rollup-plugin-keep-css-imports'; keepCssImports({...})

TypeScript types are bundled. Use default import.

Quickstart

Shows a basic Rollup configuration using keepCssImports plugin with default options to preserve CSS imports.

// rollup.config.js
import keepCssImports from 'rollup-plugin-keep-css-imports';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'esm',
  },
  plugins: [
    keepCssImports({
      includeRegexp: /\.(?:s[ca]|c)ss$/,
      outputExt: '.css',
      outputDir: 'dist/styles',
      outputPath: 'keep',
      sourceMap: false,
      skipCurrentFolderPart: false,
    }),
  ],
};