{"id":21980,"library":"rollup-plugin-cssimport","title":"rollup-plugin-cssimport","description":"A Rollup plugin (v1.0.3, last updated 2021) that converts CSS imports into CSSStyleSheet objects for use with adoptedStyleSheets. It works natively in Chrome and requires a polyfill for other browsers. The plugin is deprecated in favor of rollup-plugin-import-assert, which aligns with modern web standards. Only supports global and element-level CSS imports; does not support CSS modules or custom transformations.","status":"deprecated","version":"1.0.3","language":"javascript","source_language":"en","source_url":null,"tags":["javascript"],"install":[{"cmd":"npm install rollup-plugin-cssimport","lang":"bash","label":"npm"},{"cmd":"yarn add rollup-plugin-cssimport","lang":"bash","label":"yarn"},{"cmd":"pnpm add rollup-plugin-cssimport","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Default export; plugin is ESM-only.","wrong":"const cssimport = require('rollup-plugin-cssimport')","symbol":"cssimport","correct":"import cssimport from 'rollup-plugin-cssimport'"},{"note":"Plugin returns the CSS as a string; you must create the CSSStyleSheet manually.","wrong":"import * as style from './styles.css'; // returns module object, not string","symbol":"CSSStyleSheet","correct":"import style from './styles.css';\nconst sheet = new CSSStyleSheet();\nsheet.replaceSync(style);"},{"note":"Assignment replaces entire array; use spread for add/remove.","wrong":"document.adoptedStyleSheets.push(sheet); // Array is frozen in some browsers","symbol":"adoptedStyleSheets","correct":"document.adoptedStyleSheets = [sheet];"}],"quickstart":{"code":"// rollup.config.js\nimport cssimport from 'rollup-plugin-cssimport';\n\nexport default {\n  input: 'src/index.js',\n  output: {\n    file: 'dist/bundle.js',\n    format: 'iife'\n  },\n  plugins: [cssimport()]\n};\n\n// src/index.js\nimport style from './styles.css';\nconst sheet = new CSSStyleSheet();\nsheet.replaceSync(style);\ndocument.adoptedStyleSheets = [sheet];","lang":"javascript","description":"Basic Rollup config using the plugin, importing CSS and applying as an adopted stylesheet."},"warnings":[{"fix":"Use rollup-plugin-import-assert instead.","message":"Package is deprecated; consider migrating to rollup-plugin-import-assert.","severity":"deprecated","affected_versions":">=0.0.0"},{"fix":"Use new CSSStyleSheet() and sheet.replaceSync(style).","message":"CSS output is a string, not a CSSStyleSheet object. Must manually create sheet.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Assign new array with desired sheets.","message":"document.adoptedStyleSheets is not a mutable array; assignment replaces entire set.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Add construct-style-sheets polyfill for non-Chrome browsers.","message":"Browser support limited: Chrome only natively; Firefox/others need polyfill.","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":"Add cssimport() to plugins array.","cause":"Missing plugin configuration in rollup.config.js.","error":"Error: \"Unexpected token\" when importing .css file without plugin"},{"fix":"Use sheet.replace(style) (async) or update browser.","cause":"Browser does not support CSSStyleSheet.replaceSync (e.g., older Chrome).","error":"TypeError: Failed to construct 'CSSStyleSheet': 'replaceSync' is not a function"},{"fix":"Assign a new array, e.g., document.adoptedStyleSheets = [...document.adoptedStyleSheets, newSheet];","cause":"Attempting to push to adoptedStyleSheets array.","error":"TypeError: Cannot assign to read only property 'adoptedStyleSheets' of object '[object Document]'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}