uncss/grunt-uncss

grunt-uncss is a plugin for Grunt, a JavaScript build tool that automates repetitive tasks in web development projects. This particular plugin solves a specific problem: when you use a large CSS framework like Bootstrap in your website, you typically only use a fraction of the styles it provides, but the full stylesheet still gets loaded by every visitor. grunt-uncss scans your HTML files, figures out which CSS rules are actually used on those pages, and produces a smaller stylesheet containing only those rules. The result can be dramatic. The README demonstrates taking a multi-page Bootstrap site from over 120 kilobytes of CSS down to about 11 kilobytes. Smaller stylesheets mean faster page loads, especially on mobile connections. To use it, you add the plugin to your existing Grunt configuration, then tell it which HTML files to scan and where to write the cleaned CSS output. The configuration is a short block of JavaScript that lists your input HTML files and a destination filename for the trimmed stylesheet. You can also provide a list of selectors to ignore, which is useful for CSS classes that get added to the page by JavaScript at runtime and would not appear in the static HTML scan. The plugin also supports scanning pages by URL rather than local files, which makes it possible to use with server-rendered sites built on platforms like WordPress or other content management systems, though that approach is slower. One known limitation noted in the README is that the CSS parser it relies on does not handle certain complex CSS selectors correctly, which can cause errors at build time. The suggested workaround is to move those problematic styles into a separate stylesheet that the plugin does not process. The project relies on the underlying UnCSS library for the actual CSS analysis, so issues with parsing behavior should be reported there rather than on this plugin's tracker.