CSS Clean!

这是一个基于html文件中实际使用的样式来清理CSS的库。尽管有一些使用npm的库，但我不是很喜欢，所以我想要一个Python版本。

方法

我们采取了一种保守的过滤方法，这意味着

• 对于任何样式块，一个匹配的类或标识符就足以包含在内
• 多级选择器不会被组合（例如，使用"button"就足以添加 .button. red。）
• 我们始终保留关键帧和导入。可以添加额外的解析来支持检查，但它们相当罕见（据我所知）。
• 该库是 新的，我可能遗漏了一些情况！如果您发现任何问题，请 提交一个问题。

当然这可以改进，但我们需要更仔细的标记解析！如果您感兴趣，请 提交一个问题。

使用方法

安装

首先，克隆并安装。

$ git clone https://github.com/vsoch/cssclean
$ cd cssclean
$ pip install -e .

或者从pip安装。

$ pip install cssclean

然后尝试运行一个示例！

清理目录

以下我们要求cssclean自动检测同一测试目录下的文件（css和html）

$ cssclean clean --css cssclean/tests/testdata/1 --html cssclean/tests/testdata/1
Sheet style.css has 124 rules.
Sheet style.css filtered down to 43 rules.
1 files written:
  style.css => /home/vanessa/Desktop/Code/unused-css/cssclean/tests/testdata/1/style.clean.css

如您所见，默认情况下，它会在旧文件旁边写入更新后的CSS文件，但文件名中添加了“.clean”。请注意，您可以为--css和--html分别提供单个文件，一次一个。

$ cssclean clean --css cssclean/tests/testdata/1 --html cssclean/tests/testdata/1/home.html --html cssclean/tests/testdata/1/table.html

试运行

您还可以进行试运行，将过滤后的样式打印到屏幕上

$ cssclean clean --css cssclean/tests/testdata/1 --html cssclean/tests/testdata/1 --dry-run
...
.card.yellow {
  background-color: var(--color-yellow);
}
tr {
  background-color: white;
}

SCSS

我们支持清理SCSS文件，这意味着您将从潜在输入目录生成最终的清理CSS文件。例如，我们可以使用测试数据下的层次结构，其中主样式文件是包含所有其他文件的style.scss

$ cssclean clean --css cssclean/tests/testdata/3/style.scss --html cssclean/tests/testdata/3/index.html

Sheet style.css has 638 rules.
Sheet style.css filtered down to 298 rules.
1 files written:
  style.css => cssclean/tests/testdata/3/style.clean.css

所有导入都必须存在，因为我们实际上在库中将SASS渲染为CSS。

压缩

您还可以请求相同的预览，但压缩后的

$ cssclean clean --css cssclean/tests/testdata/1 --html cssclean/tests/testdata/1 --dry-run --minify

或非预览压缩

$ cssclean clean --css cssclean/tests/testdata/1 --html cssclean/tests/testdata/1 --outdir ./out --minify

Sheet style.css has 124 rules.
Sheet style.css filtered down to 43 rules.
1 files written:
  style.css => ./out/style.clean.min.css

请注意，“min”被添加到保存的文件名中，并且请注意，这是一个实验性的功能 - 我需要做更多的测试和阅读，才能弄清楚这个过程的具体情况。

输出目录

您还可以请求自定义输出目录

$ mkdir out
$ cssclean clean --css cssclean/tests/testdata/1 --html cssclean/tests/testdata/1 --outdir ./out

Sheet style.css has 124 rules.
Sheet style.css filtered down to 43 rules.
1 files written:
  style.css => ./out/style.clean.css

示例

例如，我对usrse网站进行了测试。我们可以将网站渲染到_site

$ bundle exec jekyll build

然后就地运行清理。以下是原始样式文件

$ ls -l style.css 
-rw-rw-r-- 1 dinosaur dinosaur 263390 Jun  4 20:57 style.css

然后我们可以就地运行清理

$ cssclean clean --css assets/css/style.css --html _site/ --in-place
Sheet style.css has 4080 rules.
Sheet style.css filtered down to 1380 rules.
1 files written:
  style.css => assets/css/style.css

新的大小是多少？

$ ls -l style.css 
-rw-rw-r-- 1 dinosaur dinosaur 201347 Jun  5 15:11 style.css

所以，当我们第一次移除未使用的内容时，大小减少了很大（-62043字节）！为了总结

• 原始：约263KB
• 清理后：约201KB

并且更重要的是，网站看起来一样！

所以，我个人对压缩和清理之间的尺寸差异没有问题 - 我的偏好是不进行压缩，这样我就可以轻松阅读它，但我也可以想象一个工作流程，其中您只为生产网站进行压缩，而开发版本只是清理。这完全取决于您！

GitHub Action

您可以将此工具用作GitHub action！以下是方法。

  - name: Test CSS Clean
    uses: vsoch/cssclean/action/clean@main
    with:
      css: cssclean/tests/testdata/1/style.css
      html: cssclean/tests/testdata/1/table.html cssclean/tests/testdata/1/home.html
      in_place: true

查看action文件夹中的action.yml文件，了解更多参数和描述。

贡献者

我们使用all-contributors工具生成下面的贡献者图形。

Vanessasaurus 💻

谢谢！

没有这些其他出色的库，这个库是不可能的！

• libsass-python
• tinycss2
• BeautifulSoup4

待办事项

• 为不同情况添加测试
• 创建GitHub action以检测（如果未使用则失败）
• 自动发布
• 某种类型的摘要命令，显示已使用/未使用样式或计数
• 我们可以使用asp来确定使用规则吗？

许可证

此代码根据MPL 2.0许可LICENSE。