postcss-discard-comments

What is postcss-discard-comments?

The postcss-discard-comments npm package is a PostCSS plugin designed to remove comments from your CSS files. It can be highly useful for reducing the size of CSS files in production environments, improving load times and efficiency. The package offers flexibility in handling comments, allowing users to remove all comments or selectively keep some based on specific criteria.

What are postcss-discard-comments's main functionalities?

Remove all comments

This feature allows you to remove all comments from your CSS files, which can significantly reduce file size and improve loading times for your web pages.

postcss([ require('postcss-discard-comments')() ]).process(YOUR_CSS).then(result => { console.log(result.css); });

Preserve comments with specific patterns

This feature enables you to keep comments that match specific patterns, such as those starting with an exclamation mark (!), which are often used to denote important information or licensing details.

postcss([ require('postcss-discard-comments')({remove: (comment) => !comment.startsWith('!')}) ]).process(YOUR_CSS).then(result => { console.log(result.css); });

Other packages similar to postcss-discard-comments

cssnano

cssnano is a modular minifier that includes functionalities similar to postcss-discard-comments as part of its optimization capabilities. It can remove comments, but also offers a wide range of other optimizations like minifying font weights, discarding unused at-rules, and reducing CSS calc expressions.

clean-css

clean-css is another CSS minifier that can remove comments from CSS files. It provides advanced optimizations including restructuring rules, merging duplicate rules, and removing unused CSS, making it a more comprehensive tool for CSS optimization compared to postcss-discard-comments.

README

postcss-discard-comments

Discard comments in your CSS files with PostCSS.

Install

With npm do:

npm install postcss-discard-comments --save

Example

Input

h1/* heading */{
    margin: 0 auto
}

Output

h1 {
    margin: 0 auto
}

This module discards comments from your CSS files; by default, it will remove all regular comments (/* comment */) and preserve comments marked as important (/*! important */) or that refer to a source mapping URL (/*# sourcemap */).

API

comments([options])

options

remove(function)

Type: function Return: boolean Variable: comment contains a comment without /**/

For each comment, return true to remove, or false to keep the comment.

function(comment) {}

var css = '/* headings *//*@ h1 */h1{margin:0 auto}/*@ h2 */h2{color:red}';
console.log(postcss(comments({
    remove: function(comment) { return comment[0] == "@"; }
})).process(css).css);
//=> /* headings */h1{margin:0 auto}h2{color:red}

NOTE: If you use the remove function other options will not be available.

removeAll

Type: boolean Default: false

Remove all comments marked as important.

var css = '/*! heading */h1{margin:0 auto}/*! heading 2 */h2{color:red}';
console.log(postcss(comments({removeAll: true})).process(css).css);
//=> h1{margin:0 auto}h2{color:red}

removeAllButFirst

Type: boolean Default: false

Remove all comments marked as important, but the first one.

var css = '/*! heading */h1{margin:0 auto}/*! heading 2 */h2{color:red}';
console.log(postcss(comments({removeAllButFirst: true})).process(css).css);
//=> /*! heading */h1{margin:0 auto}h2{color:red}

Usage

See the PostCSS documentation for examples for your environment.

Contributing

Pull requests are welcome. If you add functionality, then please add unit tests to cover it.

License

MIT © Ben Briggs