question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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.

<bountysource-plugin> --- 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). </bountysource-plugin>

Issue Analytics

  • State:open
  • Created 7 years ago
  • Reactions:2
  • Comments:8 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
kiwimindcommented, Dec 10, 2018

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.

1reaction
kiwimindcommented, Jun 23, 2017

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How do I change the default sort order on Windows Explorer ...
Click on Date to sort by most recent; Select View - Options; Select View tab, Apply to all folders. This will always sort...
Read more >
How to Sort in Excel Rows or Columns Avoid Sort Problems
At the top of the Sort dialog box, click the Options button. In the Sort Options dialog box, under Orientation, select Sort Left...
Read more >
Sort data in a range or table - Microsoft Support
In the Custom Sort dialog box, click Options. Under Row, in the 'Sort by' drop down, select the row that you want to...
Read more >
How to sort without first row in Excel? - ExtendOffice
Get it Now​​ Select the column range you will sort without the first row, and then click the Enterprise > Advanced Sort. In...
Read more >
page-break - Properties - CSS-Tricks
But, for some devices, it's not possible to avoid the break. Would it be possible, in that case use some sort of decoration...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found