Comment by oyvindeh | Hacker News Reader

Comment by oyvindeh | Hacker News Reader

Parent Full thread

I started a similar project before Christmas. It has a whitelist feature, where you can list styles added using JavaScript. It may not be the perfect approach, but it's at least one way of getting around the problem.

It also supports lists of HTML and CSS files to search through. It can perform login, find duplicates, list used rules as well as unused rules, as well as count how many times each rule is matched in the markup.

Requires Node, can be installed with npm.

https://github.com/operasoftware/ucss

The only thing I could think of was to have some kind of browser extension, that works something like this:

  1. Start the extension scan

  2. Scan all external CSS currently in use (page load)

  3. Scan all inline CSS currently in use (page load)

  4. Monitor (this is the missing piece of the puzzle): Developer uses the app and extension monitors new AJAX or JavaScript added CSS rules

  5. Developer clicks a Finish and Report button:

    a) Warning for inline CSS that could be moved externally

    b) Warning for external CSS that is never used

    c) Export (per CSS file, or combined and minified) CSS files, with unused CSS removed.

Reply on news.ycombinator.com