Use the stylelint-config-wordpress\scss stylelint config

[ntwb]

Description

Via @gziolo in #17060 (comment)

The current stylelint config uses CSS rather than the SCSS config included in stylelint-config-wordpress

The stylelint-config-wordpress\scss config extends stylelint-config-wordpress so the changes will allow for improved linting of SCSS files.

How has this been tested?

• Checkout this PR locally
• Run npm install
• Run npm run lint-css

Screenshots

Types of changes

Build tool change

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.

Results

The following are the results of running npm run lint-css and the SCSS files should be updated also as part of this PR.

assets/stylesheets/_mixins.scss
 367:3  ✖  Expected single space after "}" of @if statement     scss/at-if-closing-brace-space-after    
 367:3  ✖  Unexpected newline after "}" of @if statement        scss/at-if-closing-brace-newline-after  
 369:2  ✖  Unexpected empty line before @else                   scss/at-else-empty-line-before          
 373:3  ✖  Expected single space after "}" of @else statement   scss/at-else-closing-brace-space-after  
 373:3  ✖  Unexpected newline after "}" of @else statement      scss/at-else-closing-brace-newline-after
 375:2  ✖  Unexpected empty line before @else                   scss/at-else-empty-line-before          

packages/block-library/src/classic/editor.scss
 117:3  ✖  Unnecessary nesting selector (&)   scss/selector-no-redundant-nesting-selector

packages/block-library/src/code/editor.scss
 42:2  ✖  Unnecessary nesting selector (&)   scss/selector-no-redundant-nesting-selector

packages/block-library/src/gallery/style.scss
 85:2  ✖  Unnecessary nesting selector (&)   scss/selector-no-redundant-nesting-selector
 86:2  ✖  Unnecessary nesting selector (&)   scss/selector-no-redundant-nesting-selector

packages/block-library/src/navigation-menu-item/editor.scss
 63:2  ✖  Unnecessary nesting selector (&)   scss/selector-no-redundant-nesting-selector
 67:2  ✖  Unnecessary nesting selector (&)   scss/selector-no-redundant-nesting-selector

packages/block-library/src/pullquote/editor.scss
  4:3  ✖  Unnecessary nesting selector (&)   scss/selector-no-redundant-nesting-selector
 11:2  ✖  Unnecessary nesting selector (&)   scss/selector-no-redundant-nesting-selector
 21:2  ✖  Unnecessary nesting selector (&)   scss/selector-no-redundant-nesting-selector

packages/components/src/button-group/style.scss
 8:3  ✖  Unnecessary nesting selector (&)   scss/selector-no-redundant-nesting-selector

packages/components/src/circular-option-picker/style.scss
 30:2  ✖  Unnecessary nesting selector (&)   scss/selector-no-redundant-nesting-selector
 69:3  ✖  Unnecessary nesting selector (&)   scss/selector-no-redundant-nesting-selector

packages/components/src/toolbar/style.scss
 10:2  ✖  Unnecessary nesting selector (&)   scss/selector-no-redundant-nesting-selector
 20:2  ✖  Unnecessary nesting selector (&)   scss/selector-no-redundant-nesting-selector

packages/components/src/toolbar-button/style.scss
 27:2  ✖  Unnecessary nesting selector (&)   scss/selector-no-redundant-nesting-selector

packages/block-editor/src/components/block-navigation/style.scss
 47:2  ✖  Unnecessary nesting selector (&)   scss/selector-no-redundant-nesting-selector

packages/edit-post/src/components/visual-editor/style.scss
 5:2  ✖  Unnecessary nesting selector (&)   scss/selector-no-redundant-nesting-selector

[gziolo]

The following are the results of running npm run lint-css and the SCSS files should be updated also as part of this PR.

Let's do it 😄

[ntwb]

SCSS is not my strong suit, so I'm not sure what's required to fix these issues:

packages/block-library/src/classic/editor.scss
 117:3  ✖  Unnecessary nesting selector (&)   scss/selector-no-redundant-nesting-selector

Maybe this is something you could look at and help with please @jasmussen ?

[jasmussen]

Thanks for the ping.

If I'm not mistaken, this is the SCSS in question:

	/* Image captions */
	dl.wp-caption {
		margin: 0; /* dl browser reset */
		max-width: 100%;

		a,
		img {
			display: block;
		}

		&,
		& * {
			-webkit-user-drag: none;
		}

		.wp-caption-dd {
			padding-top: 0.5em;
			margin: 0; /* browser dd reset */
		}
	}

I totally see why it was written this way, but if it makes the linter unhappy, I believe it can be written this way too:

	/* Image captions */
	dl.wp-caption {
		margin: 0; /* dl browser reset */
		max-width: 100%;
		-webkit-user-drag: none;

		* {
			-webkit-user-drag: none;
		}

		a,
		img {
			display: block;
		}

		.wp-caption-dd {
			padding-top: 0.5em;
			margin: 0; /* browser dd reset */
		}
	}

[ntwb]

Related: #22777

[ntwb]

@gziolo What's the best way to update this branch?

[gziolo]

@ntwb, do you want to land #22777 first before you rebase this one?

[paaljoachim]

Can we get a status update on where this PR is at?
What are the next steps?

[paaljoachim]

I do not think this PR needs design feedback. It seems more like that it needs technical feedback.
So I am removing the needs design feedback label from it. If I am mistaken then please add it back in again.

[gziolo]

It should use @wordpress/stylelint-config with #27810 landed.