{"id":22087,"library":"rollup-plugin-inline-postcss","title":"rollup-plugin-inline-postcss","description":"A Rollup plugin that processes inline CSS (template literals or `<style>` tags) with PostCSS. Current stable version is 3.0.1. The plugin supports custom regex and delimiters, environment-based PostCSS config, and multiple style declarations per file. Unlike other PostCSS Rollup plugins (e.g., rollup-plugin-postcss), this one focuses solely on inline styles rather than imported CSS files, making it ideal for Web Components or CSS-in-JS workflows. Version 3 introduced breaking changes including renaming `styleDelineator` to `styleDelimiter` and support for multiple style blocks. Maintained by the author, releases are sporadic.","status":"active","version":"3.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/steveblue/rollup-plugin-inline-postcss","tags":["javascript","rollup","postcss","plugin"],"install":[{"cmd":"npm install rollup-plugin-inline-postcss","lang":"bash","label":"npm"},{"cmd":"yarn add rollup-plugin-inline-postcss","lang":"bash","label":"yarn"},{"cmd":"pnpm add rollup-plugin-inline-postcss","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency required for Rollup plugin system","package":"rollup","optional":false},{"reason":"peer dependency (v8+) required for CSS transformations","package":"postcss","optional":false}],"imports":[{"note":"Default export; ESM-only since v3. CommonJS require will break.","wrong":"const inlinePostCSS = require('rollup-plugin-inline-postcss')","symbol":"inlinePostCSS","correct":"import inlinePostCSS from 'rollup-plugin-inline-postcss'"},{"note":"Types are exported; use `import type` for TypeScript options.","wrong":"","symbol":"inlinePostCSS (type)","correct":"import type { RollupPluginInlinePostCSSOptions } from 'rollup-plugin-inline-postcss'"},{"note":"Only default export exists; named import will result in undefined.","wrong":"import { inlinePostCSS } from 'rollup-plugin-inline-postcss'","symbol":"named export (none)","correct":"import inlinePostCSS from 'rollup-plugin-inline-postcss'"}],"quickstart":{"code":"import resolve from '@rollup/plugin-node-resolve';\nimport inlinePostCSS from 'rollup-plugin-inline-postcss';\n\nexport default {\n  input: 'src/main.js',\n  output: { dir: 'dist', format: 'es' },\n  plugins: [\n    resolve(),\n    inlinePostCSS({\n      styleRegex: /(?:<style>)((.|\\n)+?)(?=(<\\/style>))/gi,\n      styleDelimiter: /<\\/?style>/g,\n      env: process.env.NODE_ENV ?? 'development',\n      configPath: './postcss.config.js',\n    }),\n  ],\n};","lang":"javascript","description":"Shows basic setup with custom regex for <style> tags, environment variable, and PostCSS config path."},"warnings":[{"fix":"Rename `styleDelineator` to `styleDelimiter` in plugin options.","message":"Option `styleDelineator` renamed to `styleDelimiter` in v3.0.0","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Upgrade PostCSS to v8 or later.","message":"PostCSS peer dependency bumped to v8 in v2.0.0","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Provide custom `styleRegex` and `styleDelimiter` for other patterns like `<style>` tags.","message":"Default regex only matches template literals starting with `css` - not generic strings","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use default import: `import inlinePostCSS from '...'`","message":"Named import `{ inlinePostCSS }` does not exist; only default export","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Avoid manually setting `from` and `to` unless you know what you're doing.","message":"Options `from` and `to` are usually set by Rollup; overriding may cause path issues","severity":"gotcha","affected_versions":">=1.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` syntax in an ES module context, or use dynamic import.","cause":"Using CommonJS `require` to import an ESM-only package (v3+)","error":"Error [ERR_REQUIRE_ESM]: require() of ES Module not supported"},{"fix":"Use `import inlinePostCSS from 'rollup-plugin-inline-postcss'`","cause":"Named import `{ inlinePostCSS }` used instead of default import","error":"TypeError: inlinePostCSS is not a function"},{"fix":"Run `npm install postcss --save-dev`","cause":"PostCSS is not installed as a peer dependency","error":"Error: Cannot find module 'postcss'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}