{"id":22314,"library":"rollup-styles","title":"rollup-styles","description":"Universal Rollup plugin for processing CSS and preprocessor files (PostCSS, Sass, Less, Stylus). Current stable version is v1.5.0 (v2.0.0 available but may have breaking changes). Supports CSS Modules, URL resolving/rewriting with asset handling, and @import in regular CSS. Modes: inject (default, CSS embedded in JS), extract (separate CSS files), emit (pass through for other plugins). Automatic PostCSS config loading. Ships TypeScript types. Alternative to rollup-plugin-postcss or rollup-plugin-css-only.","status":"active","version":"1.5.0","language":"javascript","source_language":"en","source_url":"https://github.com/plumelo/rollup-styles","tags":["javascript","rollup","rollup-plugin","css","css-modules","postcss","sass","scss","less","typescript"],"install":[{"cmd":"npm install rollup-styles","lang":"bash","label":"npm"},{"cmd":"yarn add rollup-styles","lang":"bash","label":"yarn"},{"cmd":"pnpm add rollup-styles","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency: requires rollup ^2.63.0 || ^3.0.0 || ^4.0.0","package":"rollup","optional":false}],"imports":[{"note":"Default export; the function is named 'styles' but imported as default.","wrong":"import { styles } from 'rollup-styles'","symbol":"styles","correct":"import styles from 'rollup-styles'"},{"note":"Call as a function, not a constructor.","wrong":"const plugin = new styles()","symbol":"styles function call","correct":"const plugin = styles({ /* options */ })"},{"note":"Default export gives CSS string (in inject/extract modes).","wrong":"import { default as style } from './style.css'","symbol":"CSS import (default)","correct":"import style from './style.css'"},{"note":"Named 'css' export always available; use for CSS Modules or explicit CSS string.","wrong":"import css from './style.css'","symbol":"CSS import (named css)","correct":"import { css } from './style.css'"},{"note":"Bundle ships TypeScript declarations; import types as needed.","wrong":"","symbol":"TypeScript types","correct":"import type { RollupStylesOptions } from 'rollup-styles'"}],"quickstart":{"code":"// rollup.config.js\nimport styles from 'rollup-styles';\n\nexport default {\n  output: {\n    assetFileNames: '[name]-[hash][extname]',\n  },\n  plugins: [styles({\n    mode: 'inject', // 'inject' | 'extract' | 'emit'\n    // For PostCSS:\n    // postcss: { plugins: [require('autoprefixer')] },\n    // For Sass:\n    // sass: { includePaths: ['node_modules'] },\n    // CSS Modules:\n    // modules: true,\n  })],\n};\n\n// In your code:\nimport style from './style.css';\nconsole.log(style); // CSS string string\n\n// Named export for CSS string:\nimport { css } from './style.css';\nconsole.log(css);","lang":"typescript","description":"Basic rollup-styles configuration with mode options, and JS import of CSS as default or named export."},"warnings":[{"fix":"Update import from 'rollup-plugin-styles' to 'rollup-styles'. Check peer dependency for rollup.","message":"v2.0.0 changed the package name from rollup-plugin-styler to rollup-styles; older v1.x was rollup-plugin-styles.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Upgrade rollup to ^2.63.0, ^3.0.0, or ^4.0.0.","message":"Peer dependency requires rollup ^2.63.0 || ^3.0.0 || ^4.0.0; lower versions not supported.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Do not expect any export from CSS when mode:'emit'. Use for preprocessing only.","message":"In 'emit' mode, no exports (default or named) are available from CSS imports; CSS is passed along the build pipeline for other plugins.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Always use { css } import when modules:true.","message":"CSS Modules do not provide a default export; use named destructuring: import { css } from './style.css' to get the CSS string object.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Replace 'rollup-plugin-styles' with 'rollup-styles' in package.json and imports.","message":"Configuration via rollup-plugin-styles (older npm package name) is deprecated; use rollup-styles.","severity":"deprecated","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Install: npm install -D rollup-styles. Ensure import path is 'rollup-styles', not 'rollup-plugin-styles'.","cause":"package not installed or wrong package name used.","error":"Error: Cannot find module 'rollup-styles'"},{"fix":"Use default import: import styles from 'rollup-styles'.","cause":"Default import used incorrectly, e.g., import { styles } from 'rollup-styles'.","error":"[!] (plugin styles) TypeError: styles is not a function"},{"fix":"Ensure PostCSS plugins use PostCSS 8 API; update plugins or use postcss version 8.","cause":"PostCSS plugin (e.g., Autoprefixer) version incompatible with PostCSS version used by rollup-styles.","error":"Error: PostCSS plugin requires PostCSS 8"},{"fix":"Add styles() to plugins array in rollup.config.js.","cause":"CSS import not handled by any loader; rollup-styles plugin not included or misconfigured.","error":"Module parse failed: Unexpected character '@' (1:0)"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}