hudochenkov / postcss-sorting

PostCSS plugin to keep rules and at-rules content in order.
MIT License
517 stars 31 forks source link

@if @else #53

Closed davidmondok closed 7 years ago

davidmondok commented 7 years ago

Hi,

is there a way to keep @else in the same line as the closing bracket of the @if statement? I want to avoid following behavior.

Before (should stay like this and not turn into what is shown in After):

.foo {
  @if $bar == 'white' {
    color: white;
  } @else {
    color: black;
  }
}

After:

.foo {
  @if $bar == 'white' {
    color: white;
  }

 @else {
    color: black;
  }
}

My settings:

{
  "at-rule-nested-empty-line-before": [true, {
    "except": ["blockless-after-same-name-blockless", "first-nested"],
    "ignore": ["after-comment", "blockless-after-same-name-blockless"]
  }],
  "clean-empty-lines": true,
  "comment-empty-line-before": [true, {
    "except": ["first-nested"],
    "ignore": ["after-comment", "stylelint-command"]
  }],
  "custom-property-empty-line-before": [true, {
    "except": ["after-comment", "after-custom-property", "first-nested"],
    "ignore": ["after-comment", "inside-single-line-block"]
  }],
  "declaration-empty-line-before": [true, {
    "except": ["after-comment", "after-declaration", "first-nested"],
    "ignore": ["after-comment", "after-declaration", "inside-single-line-block"]
  }],
  "dollar-variable-empty-line-before": [true, {
    "except": ["after-comment", "after-dollar-variable", "first-nested"],
    "ignore": ["after-comment", "inside-single-line-block"]
  }],
  "rule-nested-empty-line-before": ["always-multi-line", {
    "except": ["first-nested"],
    "ignore": ["after-comment"]
  }],
  "order": [
    "custom-properties",
    "dollar-variables",
    {
      "type": "at-rule",
      "name": "extend"
    },
    {
      "type": "at-rule",
      "name": "include"
    },
    {
      "type": "at-rule",
      "name": "include",
      "hasBlock": true
    },
    {
      "type": "at-rule",
      "hasBlock": true
    },
    {
      "type": "at-rule"
    },
    "at-rules",
    "declarations",
    "rules",
    {
      "type": "at-rule",
      "name": "media"
    },
    {
      "type": "at-rule",
      "name": "include",
      "parameter" : "breakpoint"
    }
  ]
}
hudochenkov commented 7 years ago

Sure, use ignoreAtRules option:

{
  "at-rule-nested-empty-line-before": [true, {
    "except": ["blockless-after-same-name-blockless", "first-nested"],
    "ignore": ["after-comment", "blockless-after-same-name-blockless"],
    "ignoreAtRules": ["else"]
  }]
}
davidmondok commented 7 years ago

Thx, worked like a charm ;-)

ghost commented 7 years ago

Hello @hudochenkov:

I'm going crazy, almost on the point of crying. I have this configuration in the sublime text plugin:

{
  "sort-on-save": true,
  "clean-empty-lines": true,
  "at-rule-nested-empty-line-before": [true, {
    "except": ["blockless-after-same-name-blockless", "first-nested"],
    "ignore": ["after-comment", "blockless-after-same-name-blockless"],
    "ignoreAtRules": ["else"]
  }],
  "comment-empty-line-before": [true, {
    "except": ["first-nested"],
    "ignore": ["after-comment", "stylelint-command"]
  }],
  "custom-property-empty-line-before": [true, {
    "except": ["after-comment", "after-custom-property", "first-nested"],
    "ignore": ["after-comment", "inside-single-line-block"]
  }],
  "declaration-empty-line-before": [true, {
    "except": ["after-comment", "after-declaration", "first-nested"],
    "ignore": ["after-comment", "after-declaration", "inside-single-line-block"]
  }],
  "dollar-variable-empty-line-before": [true, {
    "except": ["after-comment", "after-dollar-variable", "first-nested"],
    "ignore": ["after-comment", "inside-single-line-block"]
  }],
  "rule-nested-empty-line-before": ["always-multi-line", {
    "except": ["first-nested"],
    "ignore": ["after-comment"]
  }],
  "order": [
    "custom-properties",
    "dollar-variables",
    { "type": "at-rule", "name": "extend" },
    { "type": "at-rule", "name": "include" },
    { "type": "at-rule", "name": "include", "hasBlock": true },
    { "type": "at-rule", "hasBlock": true },
    { "type": "at-rule" },
    "at-rules",
    "declarations",
    "rules",
    { "type": "at-rule", "name": "media" },
    { "type": "at-rule", "name": "include", "parameter" : "media-breakpoint-up" },
    { "type": "at-rule", "name": "include", "parameter" : "media-breakpoint-down" },
    { "type": "at-rule", "name": "include", "parameter" : "media-breakpoint-only" },
    { "type": "at-rule", "name": "include", "parameter" : "media-breakpoint-between" }
  ]
}

But insert an empty line before "else". What am I doing wrong? The result is:

@if test == true {
  padding: 1rem;
}

@else {
  padding: 0;
}
hudochenkov commented 7 years ago

@lucascono I've tried your config and it works like expected. No new line created before @else in this code:

a {
    @if test == true {
      padding: 1rem;
    } @else {
      padding: 0;
    }
}