{"id":22074,"library":"rollup-plugin-import-css","title":"rollup-plugin-import-css","description":"A lightweight Rollup plugin (v4.2.1) for importing CSS into JavaScript via ES module syntax. Supports three import forms: side-effect imports to extract CSS into an external bundle, named imports to get CSS as a string, and import attributes to get a CSSStyleSheet. Features include minification, CSS Modules, runtime injection, preserveModules compatibility, and output file configuration. Differentiators include small size, import-order preservation, and no built-in Sass/Less processing (offers transform function instead). Requires Rollup ^2.x || ^3.x || ^4.x and Node >=16.","status":"active","version":"4.2.1","language":"javascript","source_language":"en","source_url":"https://github.com/jleeson/rollup-plugin-import-css","tags":["javascript","rollup","rollup-plugin","css","import","modules","typescript"],"install":[{"cmd":"npm install rollup-plugin-import-css","lang":"bash","label":"npm"},{"cmd":"yarn add rollup-plugin-import-css","lang":"bash","label":"yarn"},{"cmd":"pnpm add rollup-plugin-import-css","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; plugin requires Rollup to function.","package":"rollup","optional":false}],"imports":[{"note":"Default export; plugin instance can be configured with options.","symbol":"css","correct":"import css from 'rollup-plugin-import-css'"},{"note":"The plugin itself does not export additional types; plugin type comes from Rollup.","wrong":"import type { Plugin } from 'rollup-plugin-import-css'","symbol":"type Plugin","correct":"import type { Plugin } from 'rollup'"}],"quickstart":{"code":"// rollup.config.js\nimport css from 'rollup-plugin-import-css';\n\nexport default {\n  input: 'src/index.js',\n  output: { file: 'dist/bundle.js', format: 'esm' },\n  plugins: [\n    css({\n      output: 'dist/styles.css',\n      minify: true,\n      modules: false,\n      inject: false,\n      alwaysOutput: false\n    })\n  ]\n};\n\n// src/index.js\nimport './styles.css'; // extracts to dist/styles.css\nimport styles from './other.css'; // imports as string\nimport sheet from './sheet.css' with { type: 'css' }; // CSSStyleSheet (Rollup 3+)","lang":"typescript","description":"Shows configuration with options (output, minify) and all three CSS import forms."},"warnings":[{"fix":"Upgrade Rollup to ^3.0.0 or ^4.0.0.","message":"Import attributes (with { type: 'css' }) require Rollup v3 or higher.","severity":"breaking","affected_versions":"<3.0.0"},{"fix":"Configure the `transform` function with a library like clean-css or cssnano.","message":"The built-in minifier uses regex and may not handle complex CSS. For advanced minification, use the `transform` option with a proper CSS minifier.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"If you don't want CSS imports in the final bundle, add `preserveImports: false` to the plugin options.","message":"When `preserveModules` is enabled, CSS imports are retained in the output by default. Set `preserveImports: false` to remove them.","severity":"gotcha","affected_versions":">=0.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Upgrade Rollup to version 3 or 4, or use side-effect import (import './file.css') instead.","cause":"Using import attributes with an older Rollup version.","error":"Error: The 'with' syntax is not supported in Rollup < 3.0.0"},{"fix":"Ensure the plugin is called with correct options: css({ output: 'styles.css' }).","cause":"Missing or malformed plugin configuration (e.g., missing options object or wrong structure).","error":"TypeError: Cannot read properties of undefined (reading 'code')"},{"fix":"Check the relative path from the importing module; the plugin only processes valid CSS imports.","cause":"The CSS file path is incorrect or the plugin is not properly handling the import.","error":"Error: Could not resolve './styles.css' from 'index.js'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}