the options at http://procssor.com/ pretty much capture the most common style differences between authors.
having those present would be awesome.

Publish it via npm so that people can use the library and the command-line tool.

Why not do it for grunt plugin, i think many people need it.

When installing the module, since minimatch is a dependency, there's this warning:
"Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue"

Would it be possible to support re-ordering CSS declarations to be in alphabetical order? E.g.:

body {
  font-family: Georgia;
  color: blue;
  text-decoration: underline;
}

Would become:

body {
  color: blue;
  font-family: Georgia;
  text-decoration: underline;
}

Consider the following two blocks, already formatted with CSS Beautify:

body {
    margin: 10px;
}

p {
    font-style: italic;
}

These rules do not end in a semicolon after the right curly bracket.

Now consider the same rules as the block of an at-rule:

@media print {
    body {
        margin: 10px;
    }

    p {
        font-style: italic;
    };
}

An extra semicolon is added after the last rule of the block, even though one is not necessary here (and was not part of the original source).

@-moz-document domain(foo.com){ 
@media (min-width:30em){x{foo:bar}
}
}

beautifies to

@-moz-document domain(foo.com) {
 @    media (min-width:30em) {
        x{foo: bar;
    }
}
}

and other nested @-rules have the same issue (separation of the "@" and loss of one level of indentation).

I'm reporting this because @-rules such as @media, @Keyframes, and @font-face are fairly common inside @-moz-document in user styles at userstyles.org

Bugzilla thread/post with links to documentation of nested @-rules

This is my first post on github - I hope I didn't do anything wrong. Please let me know if I did.

Hi,
lib working great, exept for theses: I have noticed that cssbeautify will not create a new line for comments in the CSS:
/* My comment here */ .a-selector {etc..

Also, same thing happens with slectors starting by #:

a-unique-id span { etc...

a#googleplus:hover,a#googleplus:active {
  background:transparent url(img/googleplus_a.png) no-repeat
}

/* Fixed layout for home page - don't*/
#home-top {
  height:336px;
  margin-bottom:100px
}

Test at http://www.senchalabs.org/cssbeautify/ and you'll see the CSS below the comments does not get changed. It's the apostrophe in "don't" that's doing it.

        @media  (max-width: 480px)
        {
        
                /* ... (more blocks of CSS) ... */
        
            .map, .footer-columns
            {
                width: 99.8%;
            };
        }
        
        @media (max-width: 960px)
        {
                /* ... (more blocks of CSS) ... */
        
            .footer-content li
            {
                display: inline-block;
            };
        }

Using http://jigsaw.w3.org/css-validator/validator, it states it's a Parse Error }; and isn't valid.

Duplicate of #35, apologies

This is not really an issue, just a suggestion.
I think it'd be cool to offer the option to group CSS properties, i.e.:

.class {
    width: 10px; height: 10px;
    margin: 0; padding: 0;
    top: 108px; left: 231px;
}

@page is formatted with extra spaces like "@ page"
while trying to beautify the following code the
img {
max-width: 100%!important;
}@page {
margin: .5cm;
}

was formatted as

img {
max-width: 100%!important;
}@ page {
margin: .5cm;
}

With this CSS as input:

button,input,select,textarea{font-family:"museo-sans-rounded","Arial Rounded",sans-serif}

This is the output we currently get:

button,input,select,textarea {
    font-family: "museo-sans-rounded","Arial Rounded",sans-serif;
}

I would prefer to have a space or newline (perhaps toggleable) after each comma:

button, input, select, textarea {
    font-family: "museo-sans-rounded", "Arial Rounded", sans-serif;
}

Just be careful in your implementation of this to not 'fix' what shouldn't be fixed:

li:after {
    content: ",";
}

(don't add a space after the comma in the last example rule.)

Given the string b{font-family:"a";src:url("b";)}@font-face{font-family:"a";src:url("b";)}

Expected output is:

b {
    font-family: "a";
    src: url("b";);
}

@font-face {
    font-family:"a";
    src:url("b");
}

Actual output:

b {
    font-family: "a";
    src: url("b";);
}

@font-face {
    font-family:"a";src:url("b");
}

The src property should wrap. Oddly it does work if @font-face is first.

It would be nice to be able to run this as a Node module without needing to modify the source.

Is it possible to add support for this? Especially the scss nesting should not result in invalid css after running through cssbeautify. Im not sure if its interesting for others and worth the time implementing it.

Currently:

.item{
  width: 185px;
  cursor:pointer;

  &:active{
    border: 1px solid #6692BB;  
  }
}

results in:

.item {
    width: 185px;
    cursor: pointer;
    &: active{
    border: 1px solid #6692BB;
}
}

The code automatically breaks new lines on semicolons

if (str.charAt(str.length - 1) === '}' ||
        str.charAt(str.length - 1) === ';') {
formatted = str + '\n\n';

This means that inline base64 is broken upon beautification, since it contains a semicolon after the data type

body: { background-image:url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)'}

becomes

body: {
    background-image: url(data:image/gif;
    base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)'
}

some how I can't install it on Ubuntu. Any clue?

You should definitely add an option, which lets you convert all colors either to RGB or to HEX.
That would help me a lot! =)

Odd number of quotes in a comment fail the formatting of the CSS afterwards.

(same thing happens for double quotes.)

This issue is exposed in the original sample code. The comment should be placed after the semicolon:

Should add a space between rule and !important declaration.

STR

p{margin:1em!important}

Actual

p {
  margin: 1em!important;
}

Expected

p {
  margin: 1em !important;
}

menu{} 

gets converted into when automatic semicolon is enabled

menu {;
}

Options to force a quote type, either single or double, or undefined/auto to keep existing.

Usecase:

I use an existing CSS snippet which uses double-quote, but I prefer single.

Since GitHub changed its IP addresses for custom domains, cssbeautify.com is no longer reachable.

Also, would be nice if the gh-pages would be updated ;)

I found two bugs

Don't formatted this code:
*{margin:0;padding:0;}

and not correct this:
div[xx*="{"]{color:red!important;}

With this input:

html{height:100%} [type="search"]{-webkit-appearance:none}

...we get this output:

html {
    height: 100%;
} [type="search"] {
    -webkit-appearance: none;
}

I am using CSS beautify as part of this package for Sublime Text 3.
I have this code in a SASS file of mine.

.subnav-list {
    &:not(:first-of-type) {
        ...
    }
}

after prettifying it becomes this, which is invalid (note the extra space before first-of-type).

.subnav-list {
    &:not(: first-of-type) {
        ...
    }
}

Seems that the current 'bin/cssbeautify' does not accept any options to be used.
Please add command line options to it, making it equal to the version used via script.

The beautifier adds a semicolon inside the media query at the end. According to w3 css-validator, this is an error. Example:

@media (max-width: 767px) {
  h1 {
    font-size: 32px;
  }
}

Your beautifier will give:

@media (max-width: 767px) {
  h1 {
    font-size: 32px;
  };    /* The semicolon here will give an error. */
}

It would be nice to be able to clean a file in place without needing to pipe and rename.

As you can see from the screenshot, only the first property gets indented correctly. If I remove the '@', from '@font-face', all the properties get indented correctly.

Like, -w 4 would mean 4 spaces.

(or, better yet, just default to 4 space indent)

on line 55

Not a problem. though)