cssdiff 0.1

添加检测

我们有两份文件。

• 仅限x.css
• all.css

css只包含大约x个元素，all.css包含大约x和y。

$ cat data/x-only.css
x {
  color: black;
  display: none;}
$ cat data/all.css
x {
  color: black;
  display: none;}

y {
  color: white;
  display: none;}

所以，cssdiff回答，关于y的加法。

$ cssdiff data/x-only.css data/all.css
y {
+  color: white;
+  display: none;}

变化检测

如果x的颜色改变了，cssdiff告诉我x的颜色改变了。

$ cat data/x-color-changed.css
x {
  color: white;
  display: none;}

y {
  color: white;
  display: none;}

$ cssdiff data/all.css data/x-color-changed.css
x {
-  color: black;
+  color: white;}

语义差异

下面的文件与all.css的含义相同。所以，没有区别。

$ cat data/all-separated.css
x {
  color: black;}

y {
  color: white;}

x {
  display: none;}

y {
  display: none;}
$ cssdiff data/all.css data/all-separated.css

$ cat data/all-squashed.css
x,
y{
  display: none;}

x {
  color: black;}

y {
  color: white;}
$ cssdiff data/all.css data/all-separated.css

$ cat data/all-conflicted.css
x {
  color: white;
  display: none;}

y {
  color: white;
  display: none;}

x {
  color: black;
  display: none;}

y {
  color: white;
  display: none;}
$ cssdiff data/all.css data/all-conflicted.css

附录

extra.css有额外的信息。所以，cssdiff通知它。

$ cat data/extra.css
x,
y,
a > b,
a + b{
  display: none;}

x {
  color: black;}

y {
  color: white;}
$ cssdiff data/all.css data/extra.css
a + b {
+  display: none;}

a > b {
+  display: none;}