rollup-plugin-inline-postcss

3.0.1 verified Mon Apr 27 auth: no javascript

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.

Common errors

error Error [ERR_REQUIRE_ESM]: require() of ES Module not supported ↓

cause Using CommonJS `require` to import an ESM-only package (v3+)

fix

Switch to import syntax in an ES module context, or use dynamic import.

error TypeError: inlinePostCSS is not a function ↓

cause Named import `{ inlinePostCSS }` used instead of default import

fix

Use import inlinePostCSS from 'rollup-plugin-inline-postcss'

error Error: Cannot find module 'postcss' ↓

cause PostCSS is not installed as a peer dependency

fix

Run npm install postcss --save-dev

Warnings

breaking Option `styleDelineator` renamed to `styleDelimiter` in v3.0.0 ↓

fix Rename `styleDelineator` to `styleDelimiter` in plugin options.

breaking PostCSS peer dependency bumped to v8 in v2.0.0 ↓

fix Upgrade PostCSS to v8 or later.

gotcha Default regex only matches template literals starting with `css` - not generic strings ↓

fix Provide custom `styleRegex` and `styleDelimiter` for other patterns like `<style>` tags.

deprecated Named import `{ inlinePostCSS }` does not exist; only default export ↓

fix Use default import: `import inlinePostCSS from '...'`

gotcha Options `from` and `to` are usually set by Rollup; overriding may cause path issues ↓

fix Avoid manually setting `from` and `to` unless you know what you're doing.

Install

npm install rollup-plugin-inline-postcss

yarn add rollup-plugin-inline-postcss

pnpm add rollup-plugin-inline-postcss

Imports

inlinePostCSS

wrong

const inlinePostCSS = require('rollup-plugin-inline-postcss')

correct

import inlinePostCSS from 'rollup-plugin-inline-postcss'

Default export; ESM-only since v3. CommonJS require will break.

inlinePostCSS (type)

import type { RollupPluginInlinePostCSSOptions } from 'rollup-plugin-inline-postcss'

Types are exported; use `import type` for TypeScript options.

named export (none)

wrong

import { inlinePostCSS } from 'rollup-plugin-inline-postcss'

correct

import inlinePostCSS from 'rollup-plugin-inline-postcss'

Only default export exists; named import will result in undefined.

Quickstart

Shows basic setup with custom regex for <style> tags, environment variable, and PostCSS config path.

import resolve from '@rollup/plugin-node-resolve';
import inlinePostCSS from 'rollup-plugin-inline-postcss';

export default {
  input: 'src/main.js',
  output: { dir: 'dist', format: 'es' },
  plugins: [
    resolve(),
    inlinePostCSS({
      styleRegex: /(?:<style>)((.|\n)+?)(?=(<\/style>))/gi,
      styleDelimiter: /<\/?style>/g,
      env: process.env.NODE_ENV ?? 'development',
      configPath: './postcss.config.js',
    }),
  ],
};