2017-05-17 4 views
1

Mit uncss können wir unbenutzte CSS aus unseren Stylesheets entfernen. Es funktioniert, indem man sich die HTML-Dateien anschaut, die bereitgestellt werden sollen, und nur die verwendeten css-Regeln paketieren.Laufen uncss gegen Angular 4 Vorlagen?

Angular 4 hat Richtlinien, die bedingte CSS wie folgt anwenden:

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

Wer weiß, ob es ein uncss wie Werkzeug, das [class.completed]="todo.complete" versteht?

+0

Sehr unwahrscheinlich. Ein Tool wie dieses sollte die View Encapsulation und Angular DSL kennen (aber es wird immer noch Komponentenklassen geben, die Klassen hinzufügen können, aber nicht analysiert werden können). Und in die gleiche Richtung wie uncss zu gehen (das Rendern einer Seite und das Vergleichen existierender Klassen mit CSS) wird nicht viel einfacher und genauer sein. – estus

Antwort

2

Ich baue ein Werkzeug, das kann. Es ist zwar noch in der Betaversion, würde es aber gerne gegen deine App ausprobieren. Das Tool verwendet ein JavaScript-Snippet, um die verwendeten CSS-Selektoren zu erkennen. Jedes Mal, wenn ein Benutzer mit der Seite interagiert, löst er einen neuen Testzyklus aus.

Ein Server aggregiert die Ergebnisse. Schließlich kann das Tool Pull-Request gegen Ihren Code auslösen, um das unbenutzte CSS tatsächlich zu entfernen, sobald es bewertet hat, dass ein Selektor sicher entfernt werden kann, auch nicht in X Tagen verwendet.

Wenn Sie es versuchen möchten, gehen Sie zu https://www.bleachcss.com

+0

Sehr cool - Für meinen Anwendungsfall erstelle ich ziemlich massive CSS-Pakete. Zum Beispiel bündeln die superfly-css-utilitities-layout- oder superfly-css-utilities-fonts (Jede einzelne google-Schriftart) auf npm. Diese müssen vor dem Versand gegen uncss laufen. Ich plane auch, einen progressiven Web-App-Ansatz für die Website zu verwenden, was bedeutet, dass das CSS mit Versionsänderungen installiert und aktualisiert werden müsste. – Ole