block-closing-brace-newline-after

[kevinblackdesk]

Saw no issues on this repository so I'm posting this here.

VSCode: 1.52.1
SCSS Formatter: v2.1.0

@each $breakpoint, $container-max-width in $container-max-widths {
    @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
      @if $breakpoint==lg {
        &__inner {
          max-width: $container-max-width / 2;
        }
      }
      @else if $breakpoint==xl {
        &__inner {
          max-width: $container-max-width / 2;
        }
      }
      @else if $breakpoint==xxl {
        &__inner {
          max-width: $container-max-width / 2;
        }
      }
    }
  }

gets formatted to

@each $breakpoint, $container-max-width in $container-max-widths {
  @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
    @if $breakpoint==lg {
      &__inner {
        max-width: $container-max-width / 2;
      }
    } @else if $breakpoint==xl {
      &__inner {
        max-width: $container-max-width / 2;
      }
    } @else if $breakpoint==xxl {
      &__inner {
        max-width: $container-max-width / 2;
      }
    }
  }
}

However.. when I run stylelint "resources/assets/**/*.scss" I get the following error's:

38:8  ✖  Expected newline after "}"   block-closing-brace-newline-after
42:8  ✖  Expected newline after "}"   block-closing-brace-newline-after

Howcome?

[sibiraj-s]

Saw no issues on this repository so I'm posting this here.

The extension uses prettier under the hood to format code. Any formatting issue could be an issue with prettier, hence I disabled the issues section.

And the output is how prettier formats the code. You can try the code here. https://prettier.io/playground/.

You might want to install/use this plugin https://github.com/prettier/stylelint-prettier to fix the errors or manually add the rule block-closing-brace-newline-after to your stylelint config.

[kevinblackdesk]

Without https://github.com/prettier/stylelint-prettier

With https://github.com/prettier/stylelint-prettier

Using .stylelintrc:

{
  "plugins": ["stylelint-prettier"],
  "rules": {
    "prettier/prettier": true,
    "block-closing-brace-newline-after": "always"
  }
}

Now the linter gives an error, but: this formatter still removes the newline.

Also, isn't there a way to configure this globally? Having to do all of this in all of my projects is such a hassle.

[sibiraj-s]

Have you tried this? as given in the docs?

{
  "extends": ["stylelint-prettier/recommended"]
}

This should disable all conflicting rules

https://github.com/prettier/stylelint-prettier#recommended-configuration.

If your editor respects the stylelint config. then it won't show errors.

this formatter still removes the newline.

it will, because that is what prettier does. we don't have a choice there.

[sibiraj-s]

@kevinblackdesk still facing the issue?

[kevinblackdesk]

@kevinblackdesk still facing the issue?

yep. even with "extends": ["stylelint-prettier/recommended"] which gives an error also:

[sibiraj-s]

The error in the screenshot is not related to this extension.