Registry / web-framework / rollup-plugin-inline-postcss

rollup-plugin-inline-postcss

library3.0.1jsnpmunverified

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.

web-framework serialization

npm install rollup-plugin-inline-postcss

github ↗package ↗

INSTALL

IMPORT

SIG · ROLLUP-PLUGIN-INLI

rollup-plugin-inline-postcss

web-frameworkjavascriptv3.0.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

inlinePostCSS

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

✗ const inlinePostCSS = require('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)

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

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

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

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', }), ], };

Debug

Known issues

breakingOption `styleDelineator` renamed to `styleDelimiter` in v3.0.0

fix

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

affects: >=3.0.0

breakingPostCSS peer dependency bumped to v8 in v2.0.0

fix

Upgrade PostCSS to v8 or later.

affects: >=2.0.0

gotchaDefault regex only matches template literals starting with `css` - not generic strings

fix

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

affects: >=1.0.0

deprecatedNamed import `{ inlinePostCSS }` does not exist; only default export

fix

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

affects: >=1.0.0

gotchaOptions `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.

affects: >=1.0.0

Errors

Common errors & fixes

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

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

fix

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

TypeError: inlinePostCSS is not a function

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

fix

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

Error: Cannot find module 'postcss'

PostCSS is not installed as a peer dependency

fix

Run `npm install postcss --save-dev`

Upgrade

Version history

3.0.1latest on npm

Audit

Dependencies

rolluprequiredpeer dependency required for Rollup plugin system

postcssrequiredpeer dependency (v8+) required for CSS transformations

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/steveblue/rollup-plugin-inline-postcss ↗

packagehttps://www.npmjs.com/package/rollup-plugin-inline-postcss ↗