Remember the original layout rules of the CSS when converting

[karlcow]

Someone has an old CSS with thousand of lines.
Then fix it, but then the diff is giant because the full CSS had a syntax change. Two suggestions:

• [HARD] keep the original layout
• [EASY] reformat the original css with the same type of formatting rules than the fixed one. So a diff is easier to make.

[hallvors]

You mean if the original was all-on-one-line minimised stuff? That would be hard..

[karlcow]

In this case (mixi) the CSS had properties on each line but not with the same indentation. Just communicating the message of the dev.

[hallvors]

Right.. It's a bit complicated because there's a parser involved. I'm not sure what the best way to do this would be.

[karlcow]

It's why I was proposing the second solution.
by parsing the first time just for having the same layout.
Then fixing
Then making a diff. We provide a way for someone to identify where the changes are happening.

[hallvors]

So the "fix" is a search/replace on the original source, then we diff?

Hm.. know any good diff implementations in JS? Seems like there should be some. No time to look right now.

[karlcow]

ok let's see. I was more thinking of

solution A

1. parse original source style.css
2. create a beautified, unminified, version of it (one property by line, indented) beautified-orig-style.css
3. create the fixed css (your current code). fixed-style.css
4. diff beautified-orig-style.css fixed-style.css > style.patch

In this way it minimizes the diff file to only what has been changed instead of the full file. (diff is not good with layout)

solution B

1. Parse original source property by property and fix them on the fly in place.
   But that's a lot harder IMHO.

We can ask @chipple to chime in to know what could be the good compromise in between something helpful and not too hard to do.

[hallvors]

Hm.. would that "diff" apply cleanly to the original source? Probably not, right? So it's just about creating a plain text human-readable minimal overview of the changes?

[hallvors]

BTW some diff implementations that seem interesting:
http://ejohn.org/files/jsdiff.js
http://cemerick.github.io/jsdifflib/demo.html
http://prettydiff.com/

[karlcow]

So it's just about creating a plain text human-readable minimal overview of the changes?

yes :) ⚡

[chipple]

Hi! Sorry for the delay, and thanks for creating such a nice tool!

Regarding the output format, would it be possible to do a few settings, perhaps through options?
It would be very helpful to us if the following output options could be considered:

• No indentation
• Insert blank line after }
• No space after : (property-value separator)
• When there are several selectors, separate them with a line-break instead of a space

[hallvors]

@chipple Like the new "compact mode" checkbox here?
http://hallvord.com/temp/moz/cssfixme.htm
Added in
8ab434c

[hallvors]

(Naturally there will be a few different "whitespace dialects" out there.. I'd rather avoid making the UI more complex than required so I'm only adding a single checkbox for now)