thewind1984/css-optimizator

接口接受CSS文件和文件夹/单个模板文件,然后将提供的CSS文件合并为一个,与提供的模板进行比较,删除未使用的选择器,并压缩最终文件

1.2.1 2020-05-05 21:45 UTC

This package is auto-updated.

Last update: 2024-09-06 07:38:10 UTC


README

接口接受CSS文件和文件夹/单个模板文件,然后将提供的CSS文件合并为一个,与提供的模板进行比较,删除未使用的选择器,并压缩最终文件。
它也支持twig模板,因为代码中的{% %}{{ }}{# #}将在检查之前被删除。

Latest Stable Version GitHub license

特性

  • >~的CSS选择器链
  • 伪类(带可选的子选择器)
  • 使用,(逗号)分隔的多个选择器

待办事项

  • 使用+分隔符解析CSS选择器链
    • .class + .subclass
  • 解析使用四个方括号实现的选择器
    • audio[controls]
    • [id*="xxx"][class^="yyy"][attr$="zzz"]
  • 将伪类的实现转换为xPath
    • nth-child
  • 合并重复的选择器
    • body {margin; 0;} body {color: #000;} => body {margin: 0; color: #000;}
  • 统一/优化选择器内的规则
    • margin: 0; margin-bottom: 10px; => margin: 0 0 10px;

通过Composer安装

composer require thewind1984/css-optimizator

使用

require_once './vendor/autoload.php';
$cssOptimizator = new \CssOptimizator\CssOptimize\CssOptimize();
$cssOptimizator->addCssFile('path/to/assets/file.css');
$cssOptimizator->addSourceFile('path/to/templates/page.html');
$cssOptimizator->optimize()->minify()->saveContent('path/to/assets/file.min.css');