mixi-inc/css-semdiff

Semantic diff tool for CSS

CSS Semantic Diff

Install

$ npm install -g css-semdiff

Usage

Comparing by Abstract Syntax Tree

Comparing files

$ css-astdiff a.css b.css

Comparing streams

$ css-astdiff <(cat a.css) <(cat b.css)

Options

• --verbose: Display verbose output

Output

$ css-astdiff a.css b.css
2 extra rules and 2 missing rules

$ css-astdiff a.css b.css --verbose
extra:
  .extra-1 {
    border: none;
  }

extra:
  .extra-2 {
    border: none;
  }

missing:
  .missing-1 {
    border: none;
  }

missing:
  .missing-2 {
    border: none;
  }

---------------------------------
2 extra rules and 2 missing rules

Comparing by Rule Order

Comparing files

$ css-orderdiff a.css b.css

Comparing streams

$ css-orderdiff <(cat a.css) <(cat b.css)

Options

• --verbose: Display verbose output

Output

$ css-orderdiff a.css b.css
3 selectors changed

$ css-orderdiff a.css b.css --verbose
order changed: a
    become to be lower than:
      b
      i

order changed: b
    become to be higher than:
      a

order changed: i
    become to be higher than:
      a

-------------------
3 selectors changed

License

MIT