Work in Progress

Closes: #48992

What?

Stylelint: Relax at-rule-empty-line-before rule for SCSS syntax

Why?

In Gutenberg, the at-rule-empty-line-before rule is set to null in the root .stylelintrc.js configuration file, effectively disabling it. However, the @wordpress/stylelint-config package enforces a stricter version of this rule, causing numerous linting errors for projects that use the package without Gutenberg's overrides.

This discrepancy creates issues when working with SCSS files that use common directives like @if, @include, and @media without empty lines before them.

How?

This PR updates the at-rule-empty-line-before rule specifically in the SCSS configuration file (packages/stylelint-config/scss.js), adding more SCSS-specific at-rules to the ignoreAtRules list and improving the except and ignore options. The change is targeted only to the SCSS preset, ensuring it doesn't affect the base configuration or other presets.

Testing Instructions

The ideal way to test this is in a fresh project since in Gutenberg itself, the root .stylelintrc.js file already overrides this rule by setting it to null.

Testing within Gutenberg itself wouldn't demonstrate the actual impact of this change because Gutenberg's root configuration already disables the rule completely. Any modifications to the rule in the package would be overshadowed by Gutenberg's override.

By testing in a fresh project that uses the @wordpress/stylelint-config package directly without Gutenberg's overrides, we can properly verify that our changes resolve the issues that other developers would experience.

In a fresh project:

1. Create a new project and install @wordpress/stylelint-config
2. Set up a basic .stylelintrc.js file with the below configurations.

module.exports = { extends: ['@wordpress/stylelint-config/scss-stylistic'] };

5. Create an SCSS file with nested at-rules (like the example above)
6. Observe the linting errors
7. Update your config to include the relaxed rule settings

/** @type {import('stylelint').Config} */
module.exports = {
  extends: '@wordpress/stylelint-config/scss-stylistic',
  rules: {
    'at-rule-empty-line-before': [
      'always',
      {
        except: ['blockless-after-blockless', 'after-same-name'],
        ignore: ['after-comment', 'first-nested'],
        ignoreAtRules: [
          'else', 'if', 'include', 'mixin', 'extend', 'media',
          'warn', 'for', 'each', 'content',
        ],
      },
    ],
  },
};

8. Verify that the errors are resolved

This change ensures that the @wordpress/stylelint-config package provides a more SCSS-friendly configuration by default, aligning better with how Gutenberg itself handles these rules.

Screenshots or screencast

Before:

After