{"id":21976,"library":"rollup-plugin-css-modules","title":"rollup-plugin-css-modules","description":"A Rollup plugin providing support for standard CSS modules with import attributes (type: 'css'). Current stable version is 0.2.0, with no frequent release cadence yet. Key differentiators: it supports both transforming CSS modules into JavaScript that exports CSSStyleSheet instances (for browsers without native CSS module support) and bundling modules into a single CSS file with @supports sheet() wrappers for native support. It requires Rollup 4+. The plugin is lightweight, has no options besides bundledSheet, and ships TypeScript types.","status":"active","version":"0.2.0","language":"javascript","source_language":"en","source_url":"https://github.com/justinfagnani/rollup-plugin-css-modules","tags":["javascript","CSS","modules","import","rollup","plugin","css-modules","native","standard","typescript"],"install":[{"cmd":"npm install rollup-plugin-css-modules","lang":"bash","label":"npm"},{"cmd":"yarn add rollup-plugin-css-modules","lang":"bash","label":"yarn"},{"cmd":"pnpm add rollup-plugin-css-modules","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency, requires Rollup 4.0.0+","package":"rollup","optional":false}],"imports":[{"note":"ESM-only package, cannot use CommonJS require(). Named export.","wrong":"const cssModules = require('rollup-plugin-css-modules')","symbol":"cssModules","correct":"import { cssModules } from 'rollup-plugin-css-modules'"},{"note":"The package has a default export that is an object containing cssModules. Direct default import of the function is incorrect.","wrong":"import cssModules from 'rollup-plugin-css-modules'","symbol":"default import (fallback)","correct":"import pkg from 'rollup-plugin-css-modules'; const { cssModules } = pkg;"},{"note":"Arguments for bundled sheet must be nested under bundledSheet object, not flat.","wrong":"plugins: [cssModules({ fileName: 'styles.css' })]","symbol":"Config usage","correct":"plugins: [cssModules({ bundledSheet: { fileName: 'styles.css' } })]"}],"quickstart":{"code":"// rollup.config.js\nimport { cssModules } from 'rollup-plugin-css-modules';\n\nexport default {\n  input: 'src/index.js',\n  output: { file: 'dist/bundle.js', format: 'es' },\n  plugins: [\n    cssModules({\n      bundledSheet: {\n        fileName: 'bundle.css',\n      },\n    }),\n  ],\n};","lang":"javascript","description":"Basic Rollup config using cssModules() with bundledSheet option to emit a single CSS file."},"warnings":[{"fix":"Ensure your CSS imports include the attribute: import styles from './styles.css' with { type: 'css' };","message":"The plugin only supports CSS modules with {type: 'css'} import attributes. Other CSS imports (e.g., without attributes) are not processed.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Use import syntax or dynamic import(). For CommonJS projects, consider using rollup-plugin-css-modules with ESM config.","message":"Package is ESM-only. CommonJS require() throws error.","severity":"breaking","affected_versions":">=0.0.0"},{"fix":"If your toolchain breaks because of unknown @supports, consider using the non-bundled mode (without bundledSheet option).","message":"The @supports sheet(name) syntax is a convention, not a real CSS feature. It may not work with all CSS minifiers or tools.","severity":"deprecated","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":"Switch to import { cssModules } from 'rollup-plugin-css-modules' in an ESM context, or use dynamic import.","cause":"Attempting to use CommonJS require() on an ESM-only package.","error":"Error [ERR_REQUIRE_ESM]: require() of ES Module from ... not supported."},{"fix":"Use import styles from './file.css' with { type: 'css' }; and ensure plugin is added to config.","cause":"CSS import without the correct attribute or plugin not processing it.","error":"Module \"*.css\" does not provide an export named 'default'"},{"fix":"Use import { cssModules } from 'rollup-plugin-css-modules'.","cause":"Incorrect import pattern: either default import instead of named import, or using require().","error":"TypeError: cssModules is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}