{"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,"search_vec":"'2.0.3':26 '2.29.0':29 'alongsid':23 'async':64 'bundl':71 'chunk':5,17,38,65,75 'code':19,54 'code-split':53 'complement':66 'configur':37 'css':4,12,35,42,59,82 'depend':46,76 'differenti':31 'enabl':18 'entri':62 'extract':10,70 'file':13,60 'import':11,43 'includ':32 'inject':44 'javascript':24,78 'js/css':74 'key':30 'map':77 'name':39 'option':41 'order':47 'output':16,56 'per':61 'plugin':3,8,69,81 'produc':58 'requir':27 'rollup':2,7,28,51,68,80 'rollup-plugin':79 'rollup-plugin-css-chunk':1 'rollup-plugin-extract-bundle-tre':67 'separ':15 'sourcemap':36 'split':20,55 'stylesheet':22 'support':33 'tree':72 'version':25 'work':49","created_at":"2026-04-27T17:02:44.641949+00:00","updated_at":"2026-04-27T17:02:44.641949+00:00","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,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/domingues/rollup-plugin-css-chunks","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/rollup-plugin-css-chunks","openapi_spec":null,"status_page":null,"smithery":null,"categories":["serialization"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-18","next_check":"2026-07-26","install_tag":null}}