postcss-banner

library4.0.1jsnpmunverified

PostCSS plugin to prepend a banner and/or append a footer text comment to the resulting CSS file. The current stable version is 4.0.1, with no frequent releases (last major release in 2020). It provides options for inline single-line comments or multi-line styled comments, and supports `important` flag to preserve banners during minification (e.g., /*! … */). Unlike manual string concatenation, it integrates seamlessly into PostCSS pipeline and respects plugin ordering.

devops

npm install postcss-banner

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · POSTCSS-BANNER

postcss-banner

devopsjavascriptv4.0.1

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.

default

✓ import postcssBanner from 'postcss-banner'

✗ import { postcssBanner } from 'postcss-banner'

This is a default export. Named import will resolve to undefined.

require

✓ const postcssBanner = require('postcss-banner')

✗ const { postcssBanner } = require('postcss-banner')

CommonJS: default export is assigned to the module.exports object, not as a named property.

postcss plugin usage

✓ postcss([postcssBanner({ banner: 'my banner' })])

✗ postcss([postcssBanner({ banner: 'my banner' }).postcss])

The function returns a PostCSS plugin directly; no need to access .postcss property.

Shows how to import and use postcss-banner with banner, footer, and important options.

import postcss from 'postcss'; import postcssBanner from 'postcss-banner'; const result = await postcss([ postcssBanner({ banner: 'My Project v1.0.0', footer: 'Generated by PostCSS', important: true }) ]).process('.foo { color: red }', { from: undefined }); console.log(result.css); /* /*! My Project v1.0.0 *\/ .foo { color: red } /*! Generated by PostCSS *\/ */

Debug

Known issues

breakingMigration from v3: asterisks are no longer automatically added per line; use inline: false to keep multi-line asterisks.

fix

Set `inline: false` to restore previous multi-line comment style with leading asterisks.

affects: >=4.0.0

breakingMigration from v3: bang (!) is no longer added automatically; use important: true to add it.

fix

Add `important: true` to the options object.

affects: >=4.0.0

gotchaPostCSS is a peer dependency; must be installed separately.

fix

Run `npm install --save-dev postcss postcss-banner` to install both.

affects: >=4.0.0

gotchaPlugin should be placed after minifiers in the PostCSS pipeline to avoid banner removal.

fix

Ensure postcss-banner is listed after cssnano or other minifiers in the plugin array.

affects: >=1.0.0

gotchaThe banner and footer are naively prepended/appended; using with other plugin that already adds comments may duplicate.

fix

Use only one plugin for banners, or check if your minifier/other plugin already adds headers.

affects: >=1.0.0

Errors

Common errors & fixes

TypeError: postcssBanner is not a function

Using named import instead of default import.

fix

Use `import postcssBanner from 'postcss-banner'` or `const postcssBanner = require('postcss-banner')`.

Error: PostCSS plugin postcss-banner requires PostCSS 8.

Incompatible PostCSS version (e.g., PostCSS 7).

fix

Update PostCSS to version 8 or later (`npm install postcss@latest`).

SyntaxError: Cannot use import statement outside a module

Using ES module import but package.json type is not module or Node version < 13.

fix

Add `"type": "module"` to package.json, or use CommonJS require().

Upgrade

Version history

4.0.1latest on npm

Audit

Dependencies

postcssrequiredpeer dependency; plug into PostCSS plugin system

Agent activity

36 hits · last 30 days

node

Resources

githubhttps://github.com/princed/postcss-banner ↗

packagepostcss-banner ↗

homepagehttps://github.com/princed/postcss-banner#readme ↗