Is there a tool to alphabetize CSS definitions in Visual Studio?

Question

Eric Meyer's advice to keep individual rules alphabetized in a CSS style definition makes sense - there's no "natural" way to order rules, and this makes it easy in a complex definition to make sure you don't define the same thing twice.

div.Foo
{
    background:Green;
    border:1px solid Khaki;
    display:none;
    left:225px;
    max-height:300px;
    overflow-x:hidden;
    overflow-y:auto;
    position:absolute;
    top:0;
    width:230px;
    z-index:99;
}

So my question: Is there a plugin or some other easy way to select a list of rules in Visual Studio and alphabetize them? (Better yet, to apply this throughout a stylesheet in one fell swoop.)

Update

@Geoff suggests CleanCSS, which is very cool and will do the above-requested alphabetization all at once, in addition to a lot of other nice clean-up (e.g. merging definitions with the same selector). Unfortunately it collapses multiple selectors in a definition into a single line. For example

div.Foo,
div.Foo p,
div.Foo li
{
   color:Green;
}

becomes

div.Foo,div.Foo p,div.Foo li
{
   color:Green;
}

which is much harder to read and kind of a deal-breaker. This is with the lowest compression setting, and I don't see a way to override it.

Answer 1

Ben's answer is correct but is error prone but lead me to this plugin: https://github.com/mrmlnc/vscode-postcss-sorting Simply add this to your settings.json after installing,

"postcssSorting.config": {
  "properties-order": "alphabetical"
}

Then in the vscode command panel (cmd+shift+p) choose PostCSS Sorting: Run

There's lot of other great config options too including how to handle comments.

Answer 2

I don't know of anything in visual studio, but there online tools to clean up and format css. I've used CleanCSS with success

Update:

Try this one Format CSS Online. It seems to output the lines more like you want