Is there a way to sort declarations before nestings?

[misund]

It would be nice to have a config parameter to output declarations before nestings.

Example

Before:

.foo {
  .bar {
    display: block;
  }

  display: block;
}

After:

.foo {
  display: block;

  .bar {
    display: block;
  }
}

[Siilwyn]

That could nice to have yes. Currently there is no way of doing this, I'm not fully convinced though as this also means moving the selector .bar instead of only declarations... 🤔

At the moment the selector in the middle will 'split' the sorting keeping the declarations at their original position compared to the selector while still being sorted.

Example

Before:

.foo {
  display: block;

  .bar {
    display: block;
  }
  display: block;
  animation: none;
}

After:

.foo {
  display: block;

  .bar {
    display: block;
  }
  animation: none;
  display: block;
}

[misund]

This is what I am experiencing (using the atom package, with the command css-declaration-sorter:sort-smacss):

Before

.foo {
  display: block;

  .bar {
    display: block;
  }
  display: block;
  animation: none;
}

After

.foo {

  .bar {
    display: block;
  }
  display: block;
  display: block;
  animation: none;
}

[misund]

For alphabetical sorting, it seems to work as expected

[Siilwyn]

Oh interesting find! It shouldn't modify the order like that... I will split this issue.

[misund]

Moving declarations to the bottom was/is a blocker for me to actually use the plugin. If it's fixed by moving declarations to the top, it might be a blocker for others. If it's fixed by moving declarations anywhere (top or bottom), I think it should be configurable.

For my needs, fixing #29 would be sufficient.

[Siilwyn]

After asking around in the PostCSS gitter room, Twitter and #web room on freenode I have eight people all putting the declarations on the top. So this looks like sane standard behaviour.