Skip to content

SCSS linting errors for @if and other "@"-prefixed SCSS commands like @warn #48992

Open

Description

What problem does this address?

The current stylelint default SCSS rules contain this configuration:

'at-rule-empty-line-before': [
	'always',
	{
		except: [ 'blockless-after-blockless' ],
		ignore: [ 'after-comment' ],
		ignoreAtRules: [ 'else' ],
	},
],

That triggers linting errors for code like this which I believe should be valid:

@mixin breakpoint-up($breakpoint) {
	@if map.has-key($breakpoints, $breakpoint) { // This line is in violation
             // Logic here
         } @else {
		@warn "Custom error message"; // This line is in violation
	}
}

What is your proposed solution?

I believe that the rule should be updated to this:

'at-rule-empty-line-before': [
	'always',
	{
		except: [ 'blockless-after-blockless', 'after-same-name' ],
		ignore: [ 'after-comment', 'first-nested' ],
		ignoreAtRules: [ 'else' ],
	},
],

Explanation:

  • adding first-nested to the ignore property will make the example above valid
  • adding after-same-name to the except property will allow code like this:
@if (condition1) {
     // Logic
}
@if (condition2) {
    // Logic
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions