针对 Angular 模板运行 uncss？

【问题标题】：Running uncss against Angular templates?针对 Angular 模板运行 uncss？
【发布时间】：2017-05-17 23:00:36
【问题描述】：

使用uncss，我们可以从样式表中删除未使用的css。它通过查看要部署的 html 文件并仅打包使用的 css 规则来工作。

Angular 4 具有应用条件 css 的指令，如下所示：

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

有人知道是否有类似uncss 的工具可以理解[class.completed]="todo.complete"？

【问题讨论】：

极不可能。像这样的工具应该知道视图封装和 Angular DSL（但仍然会有可以添加类但无法分析的组件类）。并且朝着与 uncss 相同的方向前进（渲染页面并将现有类与 CSS 进行比较）不会变得更加容易和准确。

【解决方案1】：

我正在构建一个可以做到这一点的工具。虽然它仍处于测试阶段，但很想在您的应用程序上尝试它。该工具使用 JavaScript 的 sn-p 来检测正在使用的 CSS 选择器。每次用户与页面交互时，都会触发一个新的测试周期。

服务器汇总结果。最后，该工具可以触发针对您的代码的拉取请求，以在评估可以安全删除选择器（即 X 天内未使用）后实际删除未使用的 CSS。

【讨论】：

非常酷 - 对于我的用例，我正在创建相当大的 css 包。例如，npm 上的 superfly-css-utilitities-layout 或 superfly-css-utilities-fonts（每一个 google 字体）捆绑包。这些需要在发货前针对 uncss 运行。我还计划为网站使用渐进式 Web 应用程序方法，这意味着需要安装 CSS 并根据版本更改进行升级。