fix(scripts): Use the SCSS shared stylelint-config-wordpress config

[ntwb]

Description

When using the lint-style wp-scripts command the SCSS rules from stylelint-config-wordpress are not used, this results in lint errors being displayed when linting SCSS files.

"lint:css": "wp-scripts lint-style",

By updating the config to use the stylelint-config-wordpress/scss shared config then both CSS and SCSS files are linted correctly.

How has this been tested?

Download a valid SCSS file, e.g. scss-valid.scss and run the lint-style script against the scss-valid.scss file:

./node_modules/.bin/wp-scripts lint-style 'scss-valid.scss'

If successful there should be no errors displayed.

If unsuccessful the following errors will be displayed:

scss-valid.scss
  3:1  ✖  Unexpected unknown at-rule "@function"   at-rule-no-unknown               
  5:2  ✖  Unexpected unknown at-rule "@return"     at-rule-no-unknown               
  8:1  ✖  Unexpected unknown at-rule "@mixin"      at-rule-no-unknown               
 19:1  ✖  Unexpected unknown at-rule "@if"         at-rule-no-unknown               
 21:2  ✖  Expected newline after "}"               block-closing-brace-newline-after
 21:3  ✖  Expected empty line before at-rule       at-rule-empty-line-before        
 21:3  ✖  Unexpected unknown at-rule "@else"       at-rule-no-unknown               
 30:2  ✖  Unexpected unknown at-rule "@include"    at-rule-no-unknown               
 31:2  ✖  Unexpected unknown at-rule "@include"    at-rule-no-unknown

Screenshots

Types of changes

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.

[jorgefilipecosta]

Hi @ntwb thank you for looking into this problem,
When I execute ./node_modules/.bin/wp-scripts lint-style 'scss-valid.scss'
I get the following error:

 21:2  ✖  Expected newline after "}"   block-closing-brace-newline-after

I get exactly the same error in master. Is that expected? I'm doing something wrong?

[ntwb]

@jorgefilipecosta That's correct, its also the current behaviour which this PR is aiming to fix.

The reason you're getting this error still is because the old stylelint config is still being used, you'd need to remove the node_modules from both the repo root and /packages/wp-scripts and then npm install after checking out this branch in both of those same folders.

[gziolo]

Shouldn't we apply it to the config file in the root of the Gutenberg project? I mirrored it in @wordpress/scripts and that's why it looks like it is now.

[gziolo]

Hi @ntwb thank you for looking into this problem,
When I execute ./node_modules/.bin/wp-scripts lint-style 'scss-valid.scss'
I get the following error:

 21:2  ✖  Expected newline after "}"   block-closing-brace-newline-after

I get exactly the same error in master. Is that expected? I'm doing something wrong?

I see the same issue unless I update

gutenberg/.stylelintrc.json

Line 2 in 2e45a8b

"extends": "stylelint-config-wordpress",

to use scss config as well. However, it uncovers a few lint violations for the existing SCSS files:

> wp-scripts lint-style '**/*.scss'


assets/stylesheets/_mixins.scss
 367:3  ✖  Unexpected newline after "}" of @if statement        scss/at-if-closing-brace-newline-after  
 367:3  ✖  Expected single space after "}" of @if statement     scss/at-if-closing-brace-space-after    
 369:2  ✖  Unxpected empty line before @else                    scss/at-else-empty-line-before          
 373:3  ✖  Unexpected newline after "}" of @else statement      scss/at-else-closing-brace-newline-after
 373:3  ✖  Expected single space after "}" of @else statement   scss/at-else-closing-brace-space-after  
 375:2  ✖  Unxpected 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
 82:2  ✖  Unnecessary nesting selector (&)   scss/selector-no-redundant-nesting-selector
 83:2  ✖  Unnecessary nesting selector (&)   scss/selector-no-redundant-nesting-selector

packages/block-library/src/navigation-menu-item/editor.scss
 65:2  ✖  Unnecessary nesting selector (&)   scss/selector-no-redundant-nesting-selector
 69: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/color-palette/style.scss
 30:2  ✖  Unnecessary nesting selector (&)   scss/selector-no-redundant-nesting-selector
 54: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]

We can land it as is, but we will need a follow-up for the Gutenberg itself.