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
WordPress · Aug 8, 2018 · 8cbc988 · 8cbc988
1 parent ea64a0f
commit 8cbc988
Show file tree

Hide file tree

Showing 97 changed files with 1,633 additions and 633 deletions.
diff --git a/.stylelintrc.json b/.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
+	}
+}
diff --git a/core-blocks/button/editor.scss b/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;
 	}
 

diff --git a/core-blocks/button/style.scss b/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 {

diff --git a/core-blocks/code/editor.scss b/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;

diff --git a/core-blocks/code/theme.scss b/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;
 }
diff --git a/core-blocks/cover-image/editor.scss b/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;
 	}
 }
diff --git a/core-blocks/cover-image/style.scss b/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);
 		}
 	}
 

diff --git a/core-blocks/file/style.scss b/core-blocks/file/style.scss
@@ -26,7 +26,7 @@
 		&:active {
 			box-shadow: none;
 			color: $white;
-			opacity: .85;
+			opacity: 0.85;
 			text-decoration: none;
 		}
 	}

diff --git a/core-blocks/freeform/editor.scss b/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;

diff --git a/core-blocks/gallery/editor.scss b/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%;
 	}
-}
+}
diff --git a/core-blocks/gallery/style.scss b/core-blocks/gallery/style.scss
@@ -2,7 +2,7 @@
 	display: flex;
 	flex-wrap: wrap;
 	list-style-type: none;
-	padding: 0px;
+	padding: 0;
 	// allow gallery items to go edge to edge
 	margin: 0 -8px 0 -8px;
 
@@ -37,8 +37,8 @@
 			color: $white;
 			text-align: center;
 			font-size: $default-font-size;
-			background: linear-gradient( 0deg, rgba( $color: $black, $alpha: 0.7 ) 0, rgba($color: $black, $alpha: 0.3) 60%, transparent );
-	
+			background: linear-gradient(0deg, rgba($color: $black, $alpha: 0.7) 0, rgba($color: $black, $alpha: 0.3) 60%, transparent);
+
 			img {
 				display: inline;
 			}
@@ -61,7 +61,7 @@
 	// Responsive fallback value, 2 columns
 	& .blocks-gallery-image,
 	& .blocks-gallery-item {
-		width: calc( 100% / 2 - 16px );
+		width: calc(100% / 2 - 16px);
 	}
 
 	&.columns-1 .blocks-gallery-image,
@@ -73,7 +73,7 @@
 		@for $i from 3 through 8 {
 			&.columns-#{ $i } .blocks-gallery-image,
 			&.columns-#{ $i } .blocks-gallery-item {
-				width: calc(100% / #{ $i } - 16px );
+				width: calc(100% / #{ $i } - 16px);
 			}
 		}
 	}

diff --git a/core-blocks/image/editor.scss b/core-blocks/image/editor.scss
@@ -29,11 +29,11 @@
 	width: 16px !important;
 	height: 16px !important;
 	position: absolute;
-	background: theme( primary );
+	background: theme(primary);
 
 	.wp-block-image.is-focused & {
 		display: block;
-		z-index: z-index( '.wp-block-image__resize-handlers' );
+		z-index: z-index(".wp-block-image__resize-handlers");
 	}
 }
 

diff --git a/core-blocks/latest-posts/style.scss b/core-blocks/latest-posts/style.scss
@@ -20,7 +20,7 @@
 	@include break-small {
 		@for $i from 2 through 6 {
 			&.columns-#{ $i } li {
-				width: calc( ( 100% / #{ $i } ) - 16px );
+				width: calc((100% / #{ $i }) - 16px);
 			}
 		}
 	}

diff --git a/core-blocks/more/editor.scss b/core-blocks/more/editor.scss
@@ -9,7 +9,7 @@
 	white-space: nowrap;
 
 	// Label
-	input[type=text] {
+	input[type="text"] {
 		font-size: $default-font-size;
 		text-transform: uppercase;
 		font-weight: 600;
@@ -32,12 +32,12 @@
 
 	// Dashed line
 	&::before {
-		content: '';
+		content: "";
 		position: absolute;
-		top: calc( 50% );
+		top: calc(50%);
 		left: 0;
 		right: 0;
 		border-top: 3px dashed $light-gray-700;
-		z-index: z-index( '.editor-block-list__block .wp-block-more::before' );
+		z-index: z-index(".editor-block-list__block .wp-block-more::before");
 	}
 }
diff --git a/core-blocks/nextpage/editor.scss b/core-blocks/nextpage/editor.scss
@@ -24,12 +24,12 @@
 
 	// Dashed line
 	&::before {
-		content: '';
+		content: "";
 		position: absolute;
-		top: calc( 50% );
+		top: calc(50%);
 		left: 0;
 		right: 0;
 		border-top: 3px dashed $light-gray-700;
-		z-index: z-index( '.editor-block-list__block .wp-block-more::before' );
+		z-index: z-index(".editor-block-list__block .wp-block-more::before");
 	}
 }
diff --git a/core-blocks/paragraph/style.scss b/core-blocks/paragraph/style.scss
@@ -19,12 +19,12 @@ p {
 	// number of bugs in combination with `contenteditable` fields. The caret
 	// cannot be set around it, caret position calculation fails in Chrome, and
 	// typing at the end of the paragraph doesn't work.
-	&.has-drop-cap:not( :focus ):first-letter {
+	&.has-drop-cap:not(:focus)::first-letter {
 		float: left;
 		font-size: 8.4em;
 		line-height: 0.68;
 		font-weight: 100;
-		margin: .05em .1em 0 0;
+		margin: 0.05em 0.1em 0 0;
 		text-transform: uppercase;
 		font-style: normal;
 	}

diff --git a/core-blocks/pullquote/editor.scss b/core-blocks/pullquote/editor.scss
@@ -21,7 +21,7 @@
 	.editor-rich-text__tinymce[data-is-empty="true"]::before {
 		width: 100%;
 		left: 50%;
-		transform: translateX( -50% );
+		transform: translateX(-50%);
 	}
 
 	& > .core-blocks-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,

diff --git a/core-blocks/separator/style.scss b/core-blocks/separator/style.scss
@@ -15,7 +15,7 @@
 		height: auto;
 
 		&::before {
-			content: '\00b7 \00b7 \00b7';
+			content: "\00b7 \00b7 \00b7";
 			color: $dark-gray-700;
 			font-size: 20px;
 			letter-spacing: 2em;

diff --git a/core-blocks/separator/theme.scss b/core-blocks/separator/theme.scss
@@ -4,7 +4,7 @@
 	margin: 1.65em auto;
 
 	// Default, thin style
-	&:not( .is-style-wide ):not( .is-style-dots ) {
+	&:not(.is-style-wide):not(.is-style-dots) {
 		max-width: 100px;
 	}
-}
+}