Add stylelint for SCSS linting #8647

noisysocks · 2018-08-07T07:40:48Z

Supersedes #1151. Closes #8618.

Adds the npm run lint-css and npm run lint-css:fix commands for SCSS linting, and configures npm run lint to automatically run npm run lint-css.

Linting is performed by stylelint. I've configured stylelint to extend stylelint-config-wordpress which enforces the WordPress CSS coding standards.

To save time and reduce merge conflicts, I've disabled every rule that isn't totally trivial to fix (e.g. with a find and replace). We can work towards re-enabling these rules one by one over the medium term.

To test:

npm run lint-css
Open the demo post and check for visual regressions
Check the diff and make sure stylelint --fix or one of my regular expressions didn't completely backfire

noisysocks · 2018-08-07T07:42:47Z

core-blocks/button/editor.scss

@@ -1,9 +1,11 @@
 .editor-block-list__block[data-type="core/button"] {
+


Weird... why does it want empty lines here, @ntwb?

A few reasons:

• Due to the number of permutations and combinations of where and where not new empty lines should occur, I've an issue to audit all of these at WordPress-Coding-Standards/stylelint-config-wordpress#65

• The lack off SCSS used currently in WordPress leading to not having an official "WordPress SCSS Coding Standards"

Solution/Workaround:

Update the config used here to override the appropriate rules here in this PR and then follow up by updating stylelint-config-wordpress, either or both the CSS and SCSS configs and releasing a new version of stylelint-config-wordpress.

ntwb

Awesome work @noisysocks 💯

ntwb · 2018-08-07T08:00:47Z

packages/components/src/button/style.scss

+				color(theme(primary) shade(30%)) 72%,
+				theme(primary) 72%
+			) !important;
+			/* stylelint-enable */


Note to self: Investigate supporting this in stylelint core

ntwb · 2018-08-07T08:03:50Z

edit-post/components/meta-boxes/meta-boxes-area/style.scss

-	#poststuff h2.hndle { /* WordPress selectors yolo */
+	#poststuff h2.hndle {
+
+		/* WordPress selectors yolo */


This is not ideal, it's an idiosyncratic stylelint issue that requires fixing 😞

ntwb · 2018-08-07T08:07:42Z

Reviewing the diff without whitespace changes is helpful 👌

gziolo · 2018-08-07T08:18:33Z

Any idea why one of the unit tests failed on Travis?

ntwb · 2018-08-07T08:22:32Z

A snapshot failure: https://travis-ci.org/WordPress/gutenberg/jobs/412993016#L5006

in file packages/editor/src/components/default-block-appender/test/index.js:47:21

A e2e test failure: https://travis-ci.org/WordPress/gutenberg/jobs/412993019#L1286

FAIL test/e2e/specs/meta-boxes.test.js
Error: Navigation Timeout Exceeded: 30000ms exceeded

tofumatt

All of those weird new empty newlines aren't ideal, but I prefer automated, written rules I don't like over unwritten, unautomated ones I do like.

I'd be cool to fix all those newlines (eg https://github.com/WordPress/gutenberg/pull/8647/files#diff-44e5de5ab7a2465d8a970cbd777c427eR2). But hey, rules are cool!

noisysocks · 2018-08-08T04:58:12Z

Thanks all! I disabled comment-empty-line-before, rule-empty-line-before, and at-rule-empty-line-before as quick fix for the weird whitespace that was being added. Better to have the bare minimum than nothing at all 🙂

noisysocks · 2018-08-08T05:05:39Z

That ain't right... 😅

edit: Fixed thanks to #8660

Adds stylelint and configures it to lint SCSS files with a very conservative rule set.

gziolo · 2018-08-08T07:29:21Z

package.json

@@ -161,11 +163,13 @@
 		"fixtures:server-registered": "docker-compose run -w /var/www/html/wp-content/plugins/gutenberg --rm wordpress ./bin/get-server-blocks.php > core-blocks/test/server-registered.json",
 		"fixtures:generate": "npm run fixtures:server-registered && cross-env GENERATE_MISSING_FIXTURES=y npm run test-unit",
 		"fixtures:regenerate": "npm run fixtures:clean && npm run fixtures:generate",
-		"lint": "npm run lint-js && npm run lint-pkg-json",
+		"lint": "npm run lint-js && npm run lint-pkg-json && npm run lint-css",


Can we run it concurrently?

👍 b977145

gziolo

Awesome one 👏

I ❤️ npm run lint-css:fix the most!

ntwb · 2018-08-08T07:46:31Z

❤️

aduth · 2018-08-08T14:56:49Z

In case anyone is like me and was looking for editor integration for Sublime Text, here's the plugin for use with SublimeLinter:

https://github.com/SublimeLinter/SublimeLinter-stylelint

youknowriad · 2018-08-08T14:57:52Z

Who uses sublime nowadays ?

tofumatt · 2018-08-08T15:05:11Z

It's way faster than Atom! And it never leads to wq in my commit messages.

youknowriad · 2018-08-08T15:08:34Z

@tofumatt I fully deserve this one :P

noisysocks requested review from tofumatt, ntwb and a team August 7, 2018 07:40

noisysocks commented Aug 7, 2018

View reviewed changes

noisysocks force-pushed the add/stylelint branch from 6b19783 to df96cf5 Compare August 7, 2018 07:47

noisysocks added the [Type] Code Quality Issues or PRs that relate to code quality label Aug 7, 2018

ntwb approved these changes Aug 7, 2018

View reviewed changes

tofumatt approved these changes Aug 7, 2018

View reviewed changes

ntwb mentioned this pull request Aug 7, 2018

Use ::before (pseudo elements) instead of :before (pseudo classes) #8618

Closed

noisysocks force-pushed the add/stylelint branch 8 times, most recently from 352cf0a to d37b072 Compare August 8, 2018 04:57

noisysocks force-pushed the add/stylelint branch 3 times, most recently from 4d71a48 to 061cc48 Compare August 8, 2018 07:17

Add stylelint

8c72aab

Adds stylelint and configures it to lint SCSS files with a very conservative rule set.

noisysocks force-pushed the add/stylelint branch from 061cc48 to 8c72aab Compare August 8, 2018 07:18

Make "npm run lint" run its tasks concurrently

b977145

gziolo reviewed Aug 8, 2018

View reviewed changes

gziolo approved these changes Aug 8, 2018

View reviewed changes

noisysocks merged commit 8cbc988 into master Aug 8, 2018

noisysocks deleted the add/stylelint branch August 8, 2018 07:39

dcalhoun mentioned this pull request Feb 23, 2021

Try: Ignore stylelint "selector-class-pattern" rule on mobile SCSS files #28988

Closed

7 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add stylelint for SCSS linting #8647

Add stylelint for SCSS linting #8647

noisysocks commented Aug 7, 2018 •

edited

Loading

noisysocks Aug 7, 2018 •

edited

Loading

ntwb Aug 7, 2018

ntwb left a comment

ntwb Aug 7, 2018

ntwb Aug 7, 2018

ntwb commented Aug 7, 2018

gziolo commented Aug 7, 2018

ntwb commented Aug 7, 2018

tofumatt left a comment

noisysocks commented Aug 8, 2018

noisysocks commented Aug 8, 2018 •

edited

Loading

gziolo Aug 8, 2018

noisysocks Aug 8, 2018

gziolo left a comment

ntwb commented Aug 8, 2018

aduth commented Aug 8, 2018

youknowriad commented Aug 8, 2018

tofumatt commented Aug 8, 2018 •

edited

Loading

youknowriad commented Aug 8, 2018

		@@ -1,9 +1,11 @@
		.editor-block-list__block[data-type="core/button"] {

Add stylelint for SCSS linting #8647

Add stylelint for SCSS linting #8647

Conversation

noisysocks commented Aug 7, 2018 • edited Loading

noisysocks Aug 7, 2018 • edited Loading

Choose a reason for hiding this comment

ntwb Aug 7, 2018

Choose a reason for hiding this comment

ntwb left a comment

Choose a reason for hiding this comment

ntwb Aug 7, 2018

Choose a reason for hiding this comment

ntwb Aug 7, 2018

Choose a reason for hiding this comment

ntwb commented Aug 7, 2018

gziolo commented Aug 7, 2018

ntwb commented Aug 7, 2018

tofumatt left a comment

Choose a reason for hiding this comment

noisysocks commented Aug 8, 2018

noisysocks commented Aug 8, 2018 • edited Loading

gziolo Aug 8, 2018

Choose a reason for hiding this comment

noisysocks Aug 8, 2018

Choose a reason for hiding this comment

gziolo left a comment

Choose a reason for hiding this comment

ntwb commented Aug 8, 2018

aduth commented Aug 8, 2018

youknowriad commented Aug 8, 2018

tofumatt commented Aug 8, 2018 • edited Loading

youknowriad commented Aug 8, 2018

noisysocks commented Aug 7, 2018 •

edited

Loading

noisysocks Aug 7, 2018 •

edited

Loading

noisysocks commented Aug 8, 2018 •

edited

Loading

tofumatt commented Aug 8, 2018 •

edited

Loading