Running uncss against Angular templates?

Question

With uncss we can remove unused css from our stylesheets. It works by looking at the html files to be deployed and only packaging the css rules used.

Angular 4 has directives that apply conditional css like this:

<li *ngFor="let todo of todos" [class.completed]="todo.complete">

Anyone know if there is an uncss like tool that understands [class.completed]="todo.complete"?

Answer 1

I am building a tool that can that. It is still in beta though but would love to try it against your app. The tool uses a snippet of JavaScript to detect the CSS selectors being used. Every time a user is interacting with the page, it triggers a new cycle of test.

A server aggregates the results. Finally, the tool can trigger pull-request against your code to actually remove the unused CSS once it evaluate that a selector can be safely removed, aka not being used in X days.

If you want to try it, go to https://www.bleachcss.com