gulp-check-unused-css
A Gulp plugin that checks HTML templates for unused CSS classes and CSS files for undefined classes.
What is gulp-check-unused-css?
gulp-check-unused-css is a Gulp plugin that validates the relationship between CSS and HTML files in a project. It detects unused CSS classes and undefined HTML classes, helping developers remove redundant code and ensure style consistency. The tool integrates into build processes to enforce code quality and reduce unnecessary file bloat.
Frontend developers and teams using Gulp for build automation who want to maintain clean, efficient CSS and HTML codebases. It's particularly useful for projects with large stylesheets or those integrating third-party CSS frameworks.
Developers choose this plugin for its straightforward integration into Gulp workflows and its focus on catching CSS/HTML mismatches early. Unlike general CSS purgers, it specifically validates bidirectional consistency and offers flexible ignore rules for frameworks.
Overview
A build tool for checking your HTML templates for unused CSS classes
Use Cases
Best For
- Identifying and removing dead CSS in large legacy projects
- Ensuring HTML templates don't reference undefined CSS classes
- Integrating CSS quality checks into CI/CD pipelines
- Maintaining style consistency when using frameworks like Bootstrap
- Automating code cleanup in Gulp-based build systems
- Preventing style regressions in team development workflows
Not Ideal For
- Projects requiring ongoing maintenance and security updates, as it's archived and no longer supported
- Modern build systems using Webpack, Vite, or other bundlers instead of Gulp
- Applications with CSS-in-JS or dynamically generated classes that static analysis can't capture
- Teams using CSS frameworks newer than Bootstrap 3.2.0 or other unsupported libraries
Pros & Cons
Pros
Simultaneously detects unused CSS classes and undefined HTML classes, ensuring comprehensive style consistency across codebases.
Includes pre-built ignore lists for frameworks like Bootstrap 3.2.0 via globals, reducing false positives in common use cases.
Allows ignoring classes with strings, regexes, or custom modules, offering granular control over what gets checked.
Designed to break builds when issues are found, integrating seamlessly into automated pipelines to enforce code quality.
Cons
The README explicitly states it's no longer maintained and recommends alternatives, risking compatibility issues and lack of bug fixes.
Globals only support Bootstrap 3.2.0, ignoring newer versions or other popular frameworks, which reduces usefulness in modern stacks.
AngularJS ng-class detection is optional and outdated, lacking support for modern frameworks like React or Vue with dynamic classes.
Requires reading all CSS and HTML files into the stream before analysis, which can slow down builds in large projects with numerous files.
Frequently Asked Questions
Related Projects
gulp-eslintA Gulp plugin for identifying and reporting on patterns found in ECMAScript/JavaScript code.
gulp-jshintJSHint plugin for gulp
gulp-jscsCheck JavaScript code style with jscs
gulp-tslintTypeScript linter plugin for Gulp
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.