如何将多个 CSS 声明合并为 shorthand

Question

我正在使用 AngleSharp 解析一些 CSS 文件，比较它们的结构并从中构建输出文件。该工具使所有声明明确，即如果源规则是：

.recent-work-wrap .overlay {
    padding: 15px;
}

我从 AngleSharp 得到以下输出：

.recent-work-wrap .overlay {
    padding-top: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
    padding-left: 15px;
}

这对于比较规则和检测变化很有用，但问题是，如何将此规则组合成上面的 shorthand？

那么再举一个例子，如何从中得到：

    .sample-rule {
        margin-right: auto;
        margin-left: auto;
        margin-top: 30px;
        margin-bottom: 30px;
    }

至此

    .sample-rule {
        margin: 30px auto;
    }

CSS3 声明的情况变得更糟，因为它们真的可以有很多参数...我检查了一些 CSS minifier/uglifier 工具，但它们大多使用 RegEx删除空格和较小的优化。是否有已知的 way/tool/library 可以从多个声明中编写最佳 shorthands？

Answer 1

你如何得到这个输出？您是否尝试查看 Style 属性的 shorthand 声明（例如 Margin）？

在内部，AngleSharp 仅使用普通声明，因此输出尽可能冗长。然而，AngleSharp 知道大多数 shorthands 并且应该能够将这些长手语重新组合成它们的 shorthand 形式。

我不知道这是否对您有所帮助。如果没有，那么请 post 一些代码（MWE），我会尝试完善这个答案。

How to combine multiple CSS declarations to shorthand