{"id":26336,"library":"rollup-plugin-template-postcss","title":"rollup-plugin-template-postcss","description":"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.","status":"active","version":"1.3.0","language":"javascript","source_language":"en","source_url":"https://github.com/ph1p/rollup-plugin-template-postcss","tags":["javascript","css","lit","postcss","rollup","rollup-plugin","template","typescript"],"install":[{"cmd":"npm install rollup-plugin-template-postcss","lang":"bash","label":"npm"},{"cmd":"yarn add rollup-plugin-template-postcss","lang":"bash","label":"yarn"},{"cmd":"pnpm add rollup-plugin-template-postcss","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency required for the plugin to function","package":"postcss","optional":false}],"imports":[{"note":"ESM-only; named export, not default export","wrong":"const templatePostcss = require('rollup-plugin-template-postcss')","symbol":"templatePostcss","correct":"import { templatePostcss } from 'rollup-plugin-template-postcss'"},{"note":"Type import for TypeScript users; import type {} is required for type-only imports","wrong":"import { TemplatePostcssOptions } from 'rollup-plugin-template-postcss'","symbol":"TemplatePostcssOptions","correct":"import type { TemplatePostcssOptions } from 'rollup-plugin-template-postcss'"},{"note":"Default import does not exist; always use named import","wrong":"import templatePostcss from 'rollup-plugin-template-postcss'","symbol":"rollup-plugin-template-postcss","correct":"import { templatePostcss } from 'rollup-plugin-template-postcss'"}],"quickstart":{"code":"import { templatePostcss } from 'rollup-plugin-template-postcss';\nimport cssnano from 'cssnano';\n\nexport default {\n  input: 'src/index.js',\n  output: {\n    dir: 'dist',\n    format: 'esm'\n  },\n  plugins: [\n    templatePostcss({\n      tags: ['css'],\n      include: ['**/*.js', '**/*.ts'],\n      exclude: ['node_modules/**'],\n      plugins: [\n        cssnano({\n          preset: 'default'\n        })\n      ]\n    })\n  ]\n};\n","lang":"typescript","description":"Basic Rollup config using rollup-plugin-template-postcss with cssnano to minify CSS template literals in LitElement components."},"warnings":[{"fix":"Update your configuration to match the documented options in v1.3.0 README.","message":"In 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.","severity":"breaking","affected_versions":">=1.2.0"},{"fix":"Change tags: 'css' to tags: ['css']","message":"Using a string for the 'tags' option is deprecated as of v1.2.0; now it should be an array of strings.","severity":"deprecated","affected_versions":">=1.2.0"},{"fix":"Ensure your CSS template literals are tagged: e.g., import { css } from 'lit'; const styles = css`...`;","message":"The 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.","severity":"gotcha","affected_versions":"all"},{"fix":"Change import statement to import { templatePostcss } from 'rollup-plugin-template-postcss'","message":"Version 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.","severity":"breaking","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Use a tagged template literal: import { css } from 'lit'; const styles = css`...`; Or set tags: ['css', 'myTag'] if using custom tag.","cause":"The template literal is not tagged (missing css tag) or not matching the specified 'tags' option.","error":"The plugin is not working: CSS is not transformed."},{"fix":"Run npm install --save-dev postcss","cause":"postcss is a peer dependency and must be installed separately.","error":"Error: Cannot find module 'postcss'"},{"fix":"Use import { templatePostcss } from 'rollup-plugin-template-postcss' in an ESM context or configure Rollup for ESM.","cause":"The plugin is ESM-only and cannot be required with require().","error":"SyntaxError: Unexpected token 'export'"},{"fix":"Use import { templatePostcss } from 'rollup-plugin-template-postcss'","cause":"Incorrect import: using default import instead of named import.","error":"TypeError: templatePostcss is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}