{"id":22072,"library":"rollup-plugin-import-assert","title":"rollup-plugin-import-assert","description":"A Rollup plugin that enables import assertions (formerly import attributes) for CSS and JSON modules, allowing developers to import stylesheets as constructible stylesheets and JSON modules with type assertions. Version 3.0.1 works with Rollup 3+ and requires acorn-import-assertions as a peer dependency. It transforms CSS imports into CSS module scripts for use with adoptedStyleSheets. Compared to alternatives like @rollup/plugin-json or raw CSS imports, this plugin provides standardized import assertion syntax as per the TC39 proposal, but only supports static imports with literal assertion values. It does not handle dynamic imports with dynamic expressions. The package ships TypeScript definitions.","status":"active","version":"3.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/calebdwilliams/rollup-plugin-import-assert","tags":["javascript","Rollup","constructible stylesheets","json","css","web components","acorn","typescript"],"install":[{"cmd":"npm install rollup-plugin-import-assert","lang":"bash","label":"npm"},{"cmd":"yarn add rollup-plugin-import-assert","lang":"bash","label":"yarn"},{"cmd":"pnpm add rollup-plugin-import-assert","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required to parse import assertion syntax in Rollup's Acorn parser","package":"acorn-import-assertions","optional":false},{"reason":"Peer dependency; plugin works with Rollup 3+","package":"rollup","optional":false}],"imports":[{"note":"ESM-only package, no CommonJS support","wrong":"const importAssertionsPlugin = require('rollup-plugin-import-assert')","symbol":"importAssertionsPlugin","correct":"import { importAssertionsPlugin } from 'rollup-plugin-import-assert'"},{"note":"This is from the peer dependency, but commonly confused as part of the plugin. Must be installed separately.","wrong":null,"symbol":"importAssertions","correct":"import { importAssertions } from 'acorn-import-assertions'"},{"note":"The package uses a named export, not default. Many users mistakenly use default import.","wrong":"import importAssertionsPlugin from 'rollup-plugin-import-assert'","symbol":"default (plugin instance)","correct":"import { importAssertionsPlugin } from 'rollup-plugin-import-assert'"}],"quickstart":{"code":"// Install: npm i -D rollup-plugin-import-assert acorn-import-assertions\n// rollup.config.js\nimport { importAssertionsPlugin } from 'rollup-plugin-import-assert';\nimport { importAssertions } from 'acorn-import-assertions';\n\nexport default {\n  input: 'src/index.js',\n  output: {\n    format: 'esm',\n    dir: 'dist',\n  },\n  acornInjectPlugins: [importAssertions],\n  plugins: [importAssertionsPlugin()],\n};\n\n// src/index.js\nimport styles from './styles.css' assert { type: 'css' };\nclass MyElement extends HTMLElement {\n  connectedCallback() {\n    this.attachShadow({ mode: 'open' }).adoptedStyleSheets = [styles];\n  }\n}\ncustomElements.define('my-element', MyElement);","lang":"javascript","description":"Shows how to install, configure Rollup with acorn-import-assertions and the plugin, and use import assertions for CSS modules."},"warnings":[{"fix":"Upgrade Rollup to version 3 or later, or use older versions of this plugin (not specified).","message":"Requires Rollup 3+; not compatible with Rollup 2","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Use static imports or ensure the import path is a string literal for assertions to work.","message":"Dynamic imports with dynamic expressions (e.g., import(`./${name}.json`)) are silently ignored","severity":"gotcha","affected_versions":"all"},{"fix":"Watch for future updates; may need to use 'with' syntax in newer versions.","message":"Import assertions are being renamed to 'import attributes' in the TC39 proposal; future ECMAScript versions may use 'with' instead of 'assert'","severity":"deprecated","affected_versions":"all"},{"fix":"Install construct-style-sheets-polyfill for cross-browser support.","message":"CSS module script API (adoptedStyleSheets) is only natively supported in Chromium browsers; requires polyfill for other browsers","severity":"gotcha","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"npm install -D acorn-import-assertions","cause":"Missing peer dependency acorn-import-assertions","error":"Error: Cannot find module 'acorn-import-assertions'"},{"fix":"Change import to: import { importAssertionsPlugin } from 'rollup-plugin-import-assert'","cause":"Using default import when plugin exports named export","error":"The requested module 'rollup-plugin-import-assert' does not provide an export named 'default'"},{"fix":"Use a static import with assert syntax or avoid dynamic expressions in the import path.","cause":"The plugin ignores dynamic imports with template literals or variables","error":"[!] Error: Cannot use import assertion with dynamic import with dynamic expression"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}