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

.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%;
  }
-}
+}

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);
  }
  }
  }

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");
  }
 }
 

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);
  }
  }
  }

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");
  }
 }

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");
  }
 }

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;
  }

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,

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;

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;
  }
-}
+}