No option to not sort certain properties and leave them alone?

[octoxan]

There doesn't appear to be an option to disable the sorting of rules (not properties)? I don't want csscomb to put my includes/breakpoints above normal rules as this would obviously break things.

My csscomb in Atom is pretty much useless.

Edit: This appears to only happen when nested inside another element

Example:

body.form-pages {
    .some-selement {
        display: none;
    }

    @include bp(min-width, $bp-small+1) {
        .some-element {
            display: inline;
        }
    }

    @include bp(min-width, $bp-medium+1) {
        .some-element {
            display: block;
        }
    }
}

running csscomb turns my file into...

body.form-pages {
    @include bp(min-width, $bp-small+1) {
        .some-element {
            display: inline;
        }
    }
    @include bp(min-width, $bp-medium+1) {
        .some-element {
            display: block;
        }
    }
    .some-selement {
        display: none;
    }
}

Which obviously is very bad, since now the properties that apply would be very different from what I intended. Is there some way to tell CSSComb to ignore @include and other properties and leave them be? I saw theres a rule for leftovers.. but I don't want the leftovers moved at all, can the leftovers be set to ignore?

I'm thinking we need a way specify that we want to sort "around" a property... not sure how impossible that would be. I'm dying to use CSSComb but it doesn't seem to agree with sass if you're using @includes to do things like breakpoints and things.

In Magento and some other platforms a lot of the sass is modularized by nesting it all underneath one tag that the body has. So any @include or @extends inside of the nest get moved around, breaking everything.

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/35923294-no-option-to-not-sort-certain-properties-and-leave-them-alone?utm_campaign=plugin&utm_content=tracker%2F214563&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F214563&utm_medium=issues&utm_source=github).

[tonyganch]

Can you give me a link to plugin repo please?

[octoxan]

https://github.com/jchouse/csscomb-atom

I know it's using my .csscomb.json file at least, but for some reason its aggressively sorting actual rules. Wasn't sure if that's an inherit csscomb thing or not.

Ah, it appears to only happen when my rules are nested inside of another one. So maybe I just need to figure out a way to not sort "@includes" and leave them be. Editing first post with new code..

[kiwimind]

It seems that the main issue here is that it's usually preferably to have @includes first within a selector.

What's happening here, and what I've found on my build, is that it would be useful to be able to exclude or reorder certain things that are being included, like breakpoint mixins, as they're likely to want to come last.

The only way I can think of to tackle this would be to allow a more specific selector in the sort-order that allows expansion of "$include" to include the mixin name. No idea how to though, sorry.

[t-fritsch]

hello, any news on this ? I'm facing the exact same problem (media-queries mixin are put at the start of declaration, the rules in it get overriden by default values)

[basvanlunteren]

Hi, any news on this ? media-queries mixin get reordered, overriding styles. It makes csscomb unusable!

[kiwimind]

There is a way to combat this:

    [
      "$include",
      "$extend",
      "$variable"
    ],
    [
      "position",
      "z-index",
<<< SNIP >>>
      "line-height",
      "fill"
    ],
    [
      "$include breakpoint"
    ],

This allows all non-specified includes to be at the top, where they really belong, followed by all specified rules, followed by specified includes, such as breakpoints, which belong at the end of the declaration.

Hope this helps. We've been using it successfully for some time now.

I realise that it doesn't tackle the "ignore" nature of this question, but it does go some way towards helping solve the issue.

[basvanlunteren]

Thank you, I will try that.

I do not know why the 'ignore' rule does not exist, in my mind it could be because it is too hard to develop or the idea might be with the dev team that there is no wish for it??

so therefor I'll try and explain my reasoning for the need... I am not a great front-end developer or anything so I might be totally out of my depth here, and please do tell me if so ;)

I do think that surely there is a need for a for an 'ignore/leave as is' marker... not sure if that should me in the .json settings file or a comment style wrapping the declaration

But without the 'ignore' option I now have to set the order of e.g. @include and @media (all containing media queries)

And there might be reasons for having a particular order: @include media-breakpoint-down(xs) <<< SNIP >>> @include media-breakpoint-down(xl)

@include media-breakpoint-up(xs) <<< SNIP >>> @include media-breakpoint-up(xl)

@media all and (min-width: 480px) @media all and (max-width: 480px) @media screen and (min-width: 480px) @media print and (min-width: 480px) @media speech

etc. the ultimate solution would (in my mind) be that I could group the specific '@includes' and '@media queries' and give them a position (bottom) but as a group... and leave the order as they were initially. and off course ;) the styling properties within should not be ignored

All that... ;)

I do appreciate all the effort that goes into developing csscomb, thank you! But sadly I cannot use it at the moment, because of this issue.

I appreciate any thoughts Bas

[kiwimind]

I can't take any credit for this project, I'm only an end user trying to help out where I can. :)

I guess that part of the reason to not have an ignore might be what to do with it alongside other rules. What would happen if some rules were set and others weren't (the ignored rules)? Effectively the ignored rules would come last, which is kind of what we're doing here. Perhaps the devs could pitch in with the difficulties of this.

With regards your example above, you would more than likely be passing the breakpoint values (e.g. xl, l, s) to the breakpoint mixin in the code, so wouldn't need to include them all in the comb file. You may need to put media-breakpoint-down and media-breakpoint-up in a specific order, however I can't see how this might be a blocker, as you're likely to be using them in such a way that it doesn't matter.

I hope this is enough for you to be able to move forward with your project. Combed CSS is beautiful CSS. :D

Cheers, Glenn