3

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"?

Ole
  • 41,793
  • 59
  • 191
  • 359
  • Highly unlikely. A tool like that should be aware of view encapsulation and Angular DSL (yet still there will be component classes that can add classes but cannot be analyzed). And moving in the same direction as uncss (rendering a page and comparing existing classes against CSS) won't be much easier and accurate. – Estus Flask May 17 '17 at 23:15

1 Answers1

3

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

Xt6
  • 56
  • 3
  • Very cool - For my use case I'm creating fairly massive css bundles. For example the superfly-css-utilitities-layout or superfly-css-utilities-fonts (Every single google font) bundles on npm. These need to be run against uncss before shipping. I'm also planning on using a progressive web app approach for the site, which means the CSS would need to be installed and upgraded with version changes. – Ole May 20 '17 at 21:18