Add stylelint for SCSS linting (#8647)

* Add stylelint

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

* Make "npm run lint" run its tasks concurrently

Author: noisysocks

.stylelintrc.json

@@ -0,0 +1,17 @@
+{
+	"extends": "stylelint-config-wordpress",
+	"rules": {
+		"at-rule-empty-line-before": null,
+		"at-rule-no-unknown": null,
+		"comment-empty-line-before": null,
+		"declaration-block-no-duplicate-properties": null,
+		"declaration-property-unit-whitelist": null,
+		"font-weight-notation": null,
+		"max-line-length": null,
+		"no-descending-specificity": null,
+		"no-duplicate-selectors": null,
+		"rule-empty-line-before": null,
+		"selector-class-pattern": null,
+		"value-keyword-case": null
+	}
+}

core-blocks/button/editor.scss

@@ -38,7 +38,7 @@
 
 	.editor-url-input__suggestions {
 		width: $blocks-button__link-input-width - $icon-button-size - $icon-button-size;
-		z-index: z-index( '.core-blocks-button__inline-link .editor-url-input__suggestions' );
+		z-index: z-index(".core-blocks-button__inline-link .editor-url-input__suggestions");
 	}
 
 	> .dashicon {
@@ -49,7 +49,7 @@
 		color: $dark-gray-100;
 	}
 
-	.editor-url-input input[type=text]::placeholder {
+	.editor-url-input input[type="text"]::placeholder {
 		color: $dark-gray-100;
 	}
 

core-blocks/button/style.scss

@@ -13,7 +13,7 @@ $blocks-button__line-height: $big-font-size + 6px;
 		font-size: $big-font-size;
 		line-height: $blocks-button__line-height;
 		margin: 0;
-		padding: ( $blocks-button__height - $blocks-button__line-height ) / 2 24px;
+		padding: ($blocks-button__height - $blocks-button__line-height) / 2 24px;
 		text-align: center;
 		text-decoration: none;
 		white-space: normal;
@@ -80,7 +80,7 @@ $blocks-button__line-height: $big-font-size + 6px;
 		}
 
 		&.has-very-light-gray-background-color {
-			border-color: #eeeeee;
+			border-color: #eee;
 		}
 
 		&.has-cyan-bluish-gray-background-color {

core-blocks/code/editor.scss

@@ -2,7 +2,7 @@
 	font-family: $editor-html-font;
 	font-size: $text-editor-font-size;
 	color: $dark-gray-800;
-	padding: .8em 1.6em;
+	padding: 0.8em 1.6em;
 	border: $border-width solid $light-gray-500;
 	border-radius: 4px;
 }
@@ -33,7 +33,7 @@
 		cursor: default;
 	}
 
-	&> span {
+	& > span {
 		border: $border-width solid transparent;
 		padding: 0 6px;
 		box-sizing: content-box;

core-blocks/code/theme.scss

@@ -2,7 +2,7 @@
 	font-family: $editor-html-font;
 	font-size: $text-editor-font-size;
 	color: $dark-gray-800;
-	padding: .8em 1.6em;
+	padding: 0.8em 1.6em;
 	border: 1px solid $light-gray-500;
 	border-radius: 4px;
 }

core-blocks/cover-image/editor.scss

@@ -10,7 +10,7 @@
 		margin: 0 -2px;
 		border-radius: 2px;
 		box-shadow: none;
-		background: rgba( 255, 255, 255, 0.3 );
+		background: rgba(255, 255, 255, 0.3);
 	}
 
 	.editor-rich-text strong {
@@ -25,7 +25,7 @@
 		justify-content: flex-start;
 	}
 
-	&.has-right-content .editor-rich-text__inline-toolbar{
+	&.has-right-content .editor-rich-text__inline-toolbar {
 		justify-content: flex-end;
 	}
 }

core-blocks/cover-image/style.scss

@@ -53,18 +53,18 @@
 	}
 
 	&.has-background-dim::before {
-		content: '';
+		content: "";
 		position: absolute;
 		top: 0;
 		left: 0;
 		bottom: 0;
 		right: 0;
-		background-color: rgba( $black, 0.5 );
+		background-color: rgba($black, 0.5);
 	}
 
 	@for $i from 1 through 10 {
 		&.has-background-dim.has-background-dim-#{ $i * 10 }::before {
-			background-color: rgba( $black, $i * 0.1 );
+			background-color: rgba($black, $i * 0.1);
 		}
 	}
 

core-blocks/file/style.scss

@@ -26,7 +26,7 @@
 		&:active {
 			box-shadow: none;
 			color: $white;
-			opacity: .85;
+			opacity: 0.85;
 			text-decoration: none;
 		}
 	}

core-blocks/freeform/editor.scss

@@ -110,7 +110,7 @@
 		margin: 15px auto;
 		outline: 0;
 		cursor: default;
-		border: 2px dashed rgb( 186, 186, 186 );
+		border: 2px dashed rgb(186, 186, 186);
 	}
 }
 
@@ -132,17 +132,17 @@
 
 
 div[data-type="core/freeform"] .editor-block-contextual-toolbar + div {
-    margin-top: 0;
-    padding-top: 0;
+	margin-top: 0;
+	padding-top: 0;
 }
 
 .freeform-toolbar {
 	width: auto;
 	margin: 0 #{ -$parent-block-padding };
 	position: sticky;
-	z-index: z-index( '.freeform-toolbar' );
+	z-index: z-index(".freeform-toolbar");
 	top: $block-padding;
-	transform: translateY( -$block-padding );
+	transform: translateY(-$block-padding);
 }
 
 .freeform-toolbar:empty {
@@ -153,7 +153,7 @@ div[data-type="core/freeform"] .editor-block-contextual-toolbar + div {
 	&::before {
 		font-family: $default-font;
 		font-size: $default-font-size;
-		content: attr( data-placeholder );
+		content: attr(data-placeholder);
 		color: #555d66;
 		line-height: 37px;
 		padding: $block-padding;

core-blocks/gallery/editor.scss

@@ -1,23 +1,23 @@
 .wp-block-gallery.components-placeholder {
-	margin: 0px;
+	margin: 0;
 }
 
 // Allow gallery items to go edge to edge.
-.gutenberg .wp-block-gallery:not( .components-placeholder ) {
+.gutenberg .wp-block-gallery:not(.components-placeholder) {
 	margin-left: -8px;
 	margin-right: -8px;
 }
 
 // Don't use negative margins when full-wide.
-.gutenberg [data-align="full"] .wp-block-gallery:not( .components-placeholder ) {
+.gutenberg [data-align="full"] .wp-block-gallery:not(.components-placeholder) {
 	margin-left: auto;
 	margin-right: auto;
 }
 
 .blocks-gallery-item {
 
 	.is-selected {
-		outline: 4px solid theme( primary );
+		outline: 4px solid theme(primary);
 		outline-offset: -4px;
 	}
 
@@ -32,13 +32,13 @@
 		overflow-y: auto;
 	}
 
-	.editor-rich-text figcaption:not( [data-is-placeholder-visible="true"] ) {
+	.editor-rich-text figcaption:not([data-is-placeholder-visible="true"]) {
 		position: relative;
 		overflow: hidden;
 	}
 
 	.is-selected .editor-rich-text {
-		width: calc( 100% - 8px );
+		width: calc(100% - 8px);
 		left: 4px;
 		margin-top: -4px;
 
@@ -84,9 +84,9 @@
 	position: absolute;
 	top: 0;
 	right: 0;
-	background-color: theme( primary );
+	background-color: theme(primary);
 	display: inline-flex;
-	z-index: z-index( '.core-blocks-gallery-item__inline-menu' );
+	z-index: z-index(".core-blocks-gallery-item__inline-menu");
 
 	.components-button {
 		color: $white;
@@ -105,16 +105,18 @@
 	position: absolute;
 	top: 50%;
 	left: 50%;
-	transform: translate( -50%, -50% );
+	transform: translate(-50%, -50%);
 }
 
 // IE11 doesn't support object-fit or flex very well, so we inline-block.
-@media all and ( -ms-high-contrast: none ) {
-	*::-ms-backdrop, .blocks-gallery-item {
+@media all and (-ms-high-contrast: none) {
+	*::-ms-backdrop,
+	.blocks-gallery-item {
 		display: inline-block;
 	}
 
-	*::-ms-backdrop, .blocks-gallery-item img {
+	*::-ms-backdrop,
+	.blocks-gallery-item img {
 		width: 100%;
 	}
-}
+}