Sass sorting by mixins

[fantomtracks]

Hello,
I post new issue requested by @AiBoy on #356. I use csscomb v.4.2.0.
I can't sort mixins in the order I want. For exemple, I have this scss file :

body {
  display: block;
  @include clearfix();
  @include font-size(12px);
}

And I have this sort-order configuration in my .csscomb.json :

"sort-order": [
    [
      "$include clearfix",
      "display",
      "$include size"
    ]
  ]

So what I want is have @include clearfix(); before display:block propriety, and @include font-size(12px); after display:block propriety.

But when I run csscomb, my scss file look like this :

body {
  display: block;

  @include clearfix();
  @include font-size(12px);
}

All @ include proprieties are group toghter at the end of the file. It's not that I want :/
There is a way to sort order mixin by name with csscomb ?

Thank for your time :)

[Tralgar]

That's a great idea, i need it too !
Btw, you could implement the difference between @include and @extend for example.
If i want a scss like this :

    &_bar {
      @extend .foo;
      color: red;
      width: 100%;
      @include breakpoint(medium) {
           width: 90%;
       }
       @include breakpoint(large) {
           width: 80%;
       }
    }

And if possible, i would sort the includes by type (small, medium and large).
I think that's not really tricky to do no ? 😄

Thanks !

[obenjiro]

@Tralgar dunno how hard it would be to add type (small,medium,large) so I can't promise anything here right now, but we will add mixins support for sure

[FRITS-Kh]

I have the same problem.
My config:

"sort-order": [
            "$variable",
            "$extend",
            "$include",
            "$include media",
            "display"
]

scss:

.logo-wrap {
  @include no-text;
  @include media(">desktop") {
    float: left;
    margin: 14px 0 10px 34px;
  }
  @include media(">widescreen") {
    margin-left: 44px;
  }
  display: inline-block;
  margin-top: 13px;
  img {
    @include media(">desktop") {
      max-width: none;
    }
    max-width: 153px;
    height: auto;
  }
}

result:

.logo-wrap {
  @include no-text;

@include media(">desktop") {
    float: left;
    margin: 14px 0 10px 34px;
  }

@include media(">widescreen") {
    margin-left: 44px;
  }

display: inline-block;
  margin-top: 13px;
  img {
    @include media(">desktop") {
      max-width: none;
    }

max-width: 153px;
    height: auto;
  }
}

[gcosgreave]

Is there any traction with this? I would like my .scss to look like:
`

@mixin button-secondary {

@include button;

background: $white;

border: 1px solid $mine-shaft;

color: $black;
@include breakpoint(fromMedium) {

display: block;

}
}

`

Is there any chance of this getting added?

[obenjiro]

@gcosgreave Working on it right now. I will try to fix this asap.

[robsonsobral]

@AiBoy , hi!

Do you have plans to allow us to put all @include with @content in the end, instead of have to set their order by name?

Thank you!

[kuuak]

I plus1 this feature as I like to order includes at the top and media queries includes at the end of the block.

before

.my-rule {
	display: flex;
	padding-right: 20px;
	padding-left: 20px;
	flex-flow: row wrap;
	@include background-image('/img/my-image.jpg');
	@include media($laptop-breakpoint) {
		padding-right: 0;
		padding-left: 0;
	}
}

config

[...]
"sort-order": [
		"$variable",
		"$extend",
		"$include",

		"display",
		"position",

		"$include media"
	]
[...]

Expected

.my-rule {
	@include background-image('/img/my-image.jpg');

	display: flex;
	flex-flow: row wrap;
	padding-left: 20px;
	padding-right: 20px;

	@include media($laptop-breakpoint) {
		padding-right: 0;
		padding-left: 0;
	}
}

Result

.my-rule {
	@include background-image('/img/my-image.jpg');
	@include media($laptop-breakpoint) {
		padding-right: 0;
		padding-left: 0;
	}

	display: flex;
	flex-flow: row wrap;
	padding-left: 20px;
	padding-right: 20px;
}

Thanks

[jdalton]

Hi All!

I'm closing this because unless a PR is created it won't likely be addressed.
If you feel strongly about this request I encourage you to dig in and submit a PR 😸