Why is gulp-uncss deprecated?

It's deprecated because UnCSS became a PostCSS plugin, allowing better integration with other CSS processing steps without needing a separate Gulp plugin. The README recommends using postcss-uncss instead for more flexibility.

gulp-uncss vs postcss-uncss: which should I use?

Use postcss-uncss if you're on a modern build stack; it's more maintainable and works seamlessly with other PostCSS plugins. gulp-uncss is only for legacy Gulp setups, but even then, migration is advised due to deprecation.

How to migrate from gulp-uncss to PostCSS?

Replace gulp-uncss with gulp-postcss and postcss-uncss in your Gulpfile, as shown in the README's deprecation notice. This lets you keep using Gulp while benefiting from PostCSS's plugin ecosystem.

Can gulp-uncss handle CSS from frameworks like Bootstrap?

Yes, it can analyze HTML to remove unused Bootstrap styles, but accuracy depends on correctly specifying all HTML sources and using the ignore option for dynamic classes. However, deprecation means it's not recommended for new projects.

What are the performance trade-offs with gulp-uncss?

It adds build time by analyzing HTML and CSS, especially with URL sources, and may incorrectly remove styles if HTML sources are incomplete. The deprecated nature also risks unpatched bugs affecting output.

How accurate is gulp-uncss at detecting unused CSS?

It relies on static HTML analysis, so it can miss styles used dynamically via JavaScript unless specified with the ignore option. For complex SPAs, manual review or more advanced tools might be needed.

Open-Awesome

gulp-uncss

MITJavaScript

A deprecated Gulp plugin that removes unused CSS selectors from stylesheets by analyzing HTML files.

GitHub

931 stars38 forks0 contributors

What is gulp-uncss?

gulp-uncss is a deprecated Gulp plugin that removes unused CSS selectors from stylesheets. It analyzes HTML files, URLs, or inline HTML to identify which CSS rules are actually used, then strips out the rest to reduce file size and improve front-end performance. The plugin integrates into Gulp build pipelines, allowing chaining with other CSS processing steps like Sass compilation and minification.

Target Audience

Frontend developers and build engineers using Gulp for their build processes who need to optimize CSS file sizes by removing unused styles.

Value Proposition

It automates the removal of unused CSS directly within Gulp workflows, offering a streamlined way to reduce stylesheet bloat without manual auditing. However, it's now deprecated in favor of using UnCSS as a PostCSS plugin for more flexible CSS processing.

Overview

DEPRECATED. Remove unused CSS selectors.

Use Cases

Best For

Optimizing CSS file sizes in Gulp-based build pipelines
Removing unused styles from legacy or large CSS codebases
Integrating CSS cleanup with Sass or other preprocessors in Gulp tasks
Automating performance improvements for static websites
Reducing CSS bloat in projects with multiple HTML templates
Chaining CSS minification with unused selector removal in builds

Not Ideal For

New projects adopting PostCSS or modern bundlers like Vite or Webpack
Teams requiring active plugin maintenance and community support
Build pipelines that integrate multiple PostCSS plugins for CSS processing
Projects where avoiding deprecated dependencies is a priority

Pros & Cons

Pros

Gulp Pipeline Integration

Seamlessly fits into Gulp streams, enabling easy chaining with tasks like Sass compilation and minification, as demonstrated in the README example with gulp-sass and gulp-cssnano.

Flexible HTML Source Support

Accepts local files, glob patterns, URLs, and raw HTML strings for CSS analysis, allowing comprehensive detection of used styles across various inputs.

Dynamic Selector Ignoring

Supports preserving selectors for interactive states (e.g., hover or click) via literal names or regex patterns, preventing accidental removal of user interaction styles.

Cons

Officially Deprecated

The README includes a deprecation notice, recommending migration to postcss-uncss, meaning no updates, bug fixes, or new features will be added.

Redundant in Modern Stacks

UnCSS is now a PostCSS plugin, making gulp-uncss an unnecessary middleman; PostCSS integration allows more flexible and efficient CSS processing with plugins like cssnano.

Gulp-Only Limitation

Ties CSS optimization to Gulp, which can be restrictive for teams using other build tools or seeking framework-agnostic solutions.

Frequently Asked Questions

Related Projects

Uglify

JavaScript parser / mangler / compressor / beautifier toolkit

Stars13,389

Forks1,223

Last commit1 year ago

clean-css

Fast and efficient CSS optimizer for node.js and the Web

Stars4,203

Forks318