{"id":21974,"library":"rollup-plugin-css-chunks","title":"rollup-plugin-css-chunks","description":"A Rollup plugin that extracts imported CSS files into separate output chunks, enabling code splitting of stylesheets alongside JavaScript. Version 2.0.3 requires Rollup >=2.29.0. Key differentiators include support for CSS sourcemaps, configurable chunk naming, and optional CSS @import injection for dependency ordering. It works with Rollup's code-splitting output to produce CSS files per entry or async chunk, complementing rollup-plugin-extract-bundle-tree for JS/CSS chunk dependency mapping.","status":"active","version":"2.0.3","language":"javascript","source_language":"en","source_url":"https://github.com/domingues/rollup-plugin-css-chunks","tags":["javascript","rollup-plugin","css"],"install":[{"cmd":"npm install rollup-plugin-css-chunks","lang":"bash","label":"npm"},{"cmd":"yarn add rollup-plugin-css-chunks","lang":"bash","label":"yarn"},{"cmd":"pnpm add rollup-plugin-css-chunks","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency required for plugin functionality","package":"rollup","optional":true}],"imports":[{"note":"ESM-only package; requires Rollup to run in ESM mode or using @rollup/plugin-node-resolve","wrong":"const css = require('rollup-plugin-css-chunks');","symbol":"default","correct":"import css from 'rollup-plugin-css-chunks';"},{"note":"The plugin transforms CSS imports to return the chunk URL as a default string export","wrong":"const { default: css_chunk_url } = require('./home.css');","symbol":"css_chunk_url","correct":"import css_chunk_url from './home.css';"},{"note":"TypeScript type export available for configuration options","wrong":null,"symbol":"RollupPluginCssChunksOptions","correct":"import type { RollupPluginCssChunksOptions } from 'rollup-plugin-css-chunks';"}],"quickstart":{"code":"// rollup.config.js\nimport css from 'rollup-plugin-css-chunks';\n\nexport default {\n  input: 'src/main.js',\n  output: {\n    dir: 'public',\n    format: 'esm'\n  },\n  plugins: [\n    css({\n      chunkFileNames: '[name]-[hash].css',\n      entryFileNames: '[name].css',\n      sourcemap: false,\n      emitFiles: true\n    })\n  ]\n};","lang":"javascript","description":"Basic Rollup configuration using rollup-plugin-css-chunks to emit CSS files per entry and async chunks."},"warnings":[{"fix":"Upgrade Rollup to version 2.29.0 or later.","message":"Requires Rollup >=2.29.0 due to plugin API changes; older Rollup versions will fail.","severity":"breaking","affected_versions":"<2.29.0"},{"fix":"Use import url from './home.css' instead of named imports.","message":"CSS imports must be default imports; named imports (e.g., import { url } from './home.css') are not supported.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Chain a CSS preprocessor plugin before rollup-plugin-css-chunks in the Rollup plugins array.","message":"The plugin does not handle CSS preprocessing (Sass, Less); those must be handled by separate plugins (e.g., rollup-plugin-sass) before this plugin.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Leave injectImports as false unless you are certain about the import ordering behavior.","message":"The option 'injectImports' defaults to false since v2; setting it to true may cause duplicate @imports.","severity":"deprecated","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Install the package: npm install --save-dev rollup-plugin-css-chunks. Ensure rollup.config.js uses ESM (e.g., type: module in package.json or .mjs extension).","cause":"Package not installed or misconfigured in Node.js require resolution (CJS instead of ESM).","error":"Error: Cannot find module 'rollup-plugin-css-chunks'"},{"fix":"Switch rollup.config.js to ESM syntax: import css from 'rollup-plugin-css-chunks';","cause":"Using CommonJS require() on an ESM-only package; the default export is not available via require().","error":"TypeError: css is not a function"},{"fix":"Add the plugin to the rollup.config.js: import css from 'rollup-plugin-css-chunks'; and include it in the plugins array.","cause":"CSS is being imported in JavaScript but rollup-plugin-css-chunks is not added to the plugins array.","error":"Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}