Sass/Scss nested rules not sorted by leftovers selector

Hello,

The problem

I found no way to configure position of nested rules when working with scss syntax (not tested on less/sass). I thought that nested rules would be catched by the leftovers selector ("...") but that’s not the case : every nested rules always gets at the end

current behavior

with this config :

"sort-order": [
	[ "color", "font-weight" ],
	[ "..." ],
	[ "$include" ]
]

and this main.scss

.container {
    & > p {
        font-weight: bold;
    }
    @include mediaDestkop {
        color: blue;
    }
    color: red;
}

We get this result (note that & > p is at the end) :

.container {
    color: red;
    @include mediaDestkop {
        color: blue;
    }
    & > p {
        font-weight: bold;
    }
}

Expected :

I would expect that nested rules get catched by the leftovers selector and sorted accordingly :

.container {
    color: red;
    & > p {
        font-weight: bold;
    }
    @include mediaDestkop {
        color: blue;
    }
}

Alternative

Another option could be to add a new identifier to support nested rules in the same way $include, $extend, etc. does. A deleted user mentioned in https://github.com/csscomb/csscomb.js/issues/462#issuecomment-246597260 to add a new "$selector" keyword (not sure the term is ideal, but the idea is interesting).

Help ?

I would be glad to help but after looking at the code at https://github.com/csscomb/csscomb.js/blob/dev/src/options/sort-order.js I could not find where nested declarations are treated. @tonyganch if you could point me to a direction, I could try to do a PR. 😃

NB: I created this issue event if there is a discussion that started in #462 comments, since the original issue isn’t exactly the same.

[jdalton]

Hi @tfritsch-km!

After forking the repo, cloning the repo, and npm i’ing you can explore the package.json for the various scripts to run (e.g. npm run build and npm test). Start with modifying sort-order option. Possibly the _sortLeftovers method. Then adding a test to test/options/sort-order/process/test.js. The files used in the tests come from the fixture folders of css, less, sass, and scss.

[jdalton]

Awesome! Please open a PR and we can work through the issues together 🤝