Registry / devops / rollup-plugin-template-postcss

rollup-plugin-template-postcss

library1.3.0jsnpmunverified

A Rollup plugin that processes CSS template literals (including LitElement's css tag) through PostCSS. Current stable version is 1.3.0. The plugin iterates over all matched JavaScript/TypeScript files, extracts CSS template literals, and runs them through PostCSS with user-provided plugins. It supports custom tag names (e.g., 'css'), include/exclude globs, and works with Vite. Unlike related plugins, it leverages PostCSS's plugin ecosystem, making it extensible for minification (cssnano), Tailwind CSS v4, Autoprefixer, and more. Peer dependency on postcss ^8.4.40. Ship TypeScript types.

devops

npm install rollup-plugin-template-postcss

github ↗package ↗

INSTALL

IMPORT

SIG · ROLLUP-PLUGIN-TEMP

rollup-plugin-template-postcss

devopsjavascriptv1.3.0

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

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

templatePostcss

✓ import { templatePostcss } from 'rollup-plugin-template-postcss'

✗ const templatePostcss = require('rollup-plugin-template-postcss')

ESM-only; named export, not default export

TemplatePostcssOptions

✓ import type { TemplatePostcssOptions } from 'rollup-plugin-template-postcss'

✗ import { TemplatePostcssOptions } from 'rollup-plugin-template-postcss'

Type import for TypeScript users; import type {} is required for type-only imports

rollup-plugin-template-postcss

✓ import { templatePostcss } from 'rollup-plugin-template-postcss'

✗ import templatePostcss from 'rollup-plugin-template-postcss'

Default import does not exist; always use named import

Basic Rollup config using rollup-plugin-template-postcss with cssnano to minify CSS template literals in LitElement components.

import { templatePostcss } from 'rollup-plugin-template-postcss'; import cssnano from 'cssnano'; export default { input: 'src/index.js', output: { dir: 'dist', format: 'esm' }, plugins: [ templatePostcss({ tags: ['css'], include: ['**/*.js', '**/*.ts'], exclude: ['node_modules/**'], plugins: [ cssnano({ preset: 'default' }) ] }) ] };

Debug

Known issues

breakingIn v1.2.0, the plugin was refactored to use tsdown. The import path remains the same, but the plugin options type may have changed. Ensure you are using the correct option names.

fix

Update your configuration to match the documented options in v1.3.0 README.

affects: >=1.2.0

deprecatedUsing a string for the 'tags' option is deprecated as of v1.2.0; now it should be an array of strings.

fix

Change tags: 'css' to tags: ['css']

affects: >=1.2.0

gotchaThe plugin processes only tagged template literals. Untagged template literals (e.g., `some css`) will not be transformed. You must use a CSS tag like css`` or a custom tag specified in options.

fix

Ensure your CSS template literals are tagged: e.g., import { css } from 'lit'; const styles = css`...`;

affects: all

breakingVersion 1.0.0 changed the export from a default export to a named export 'templatePostcss'. Old code using import templatePostcss from 'rollup-plugin-template-postcss' will break.

fix

Change import statement to import { templatePostcss } from 'rollup-plugin-template-postcss'

affects: >=1.0.0

Errors

Common errors & fixes

The plugin is not working: CSS is not transformed.

The template literal is not tagged (missing css tag) or not matching the specified 'tags' option.

fix

Use a tagged template literal: import { css } from 'lit'; const styles = css`...`; Or set tags: ['css', 'myTag'] if using custom tag.

Error: Cannot find module 'postcss'

postcss is a peer dependency and must be installed separately.

fix

Run npm install --save-dev postcss

SyntaxError: Unexpected token 'export'

The plugin is ESM-only and cannot be required with require().

fix

Use import { templatePostcss } from 'rollup-plugin-template-postcss' in an ESM context or configure Rollup for ESM.

TypeError: templatePostcss is not a function

Incorrect import: using default import instead of named import.

fix

Use import { templatePostcss } from 'rollup-plugin-template-postcss'

Upgrade

Version history

1.3.0latest on npm

Audit

Dependencies

postcssrequiredpeer dependency required for the plugin to function

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/ph1p/rollup-plugin-template-postcss ↗

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