Adds Stylelint for sass linting (#2346)

This PR adds stylelint and prettier standard configs with some exceptions for sass.
Automattic · Oct 2, 2020 · 318f1b5 · 318f1b5
1 parent e805fd6
commit 318f1b5
Show file tree

Hide file tree

Showing 28 changed files with 1,590 additions and 202 deletions.
diff --git a/.stylelintrc b/.stylelintrc
@@ -0,0 +1,10 @@
+{
+  "extends": ["stylelint-config-standard", "stylelint-config-prettier"],
+  "plugins": ["stylelint-prettier", "stylelint-scss"],
+  "rules": {
+    "prettier/prettier": true,
+    "at-rule-no-unknown": null,
+    "scss/at-rule-no-unknown": true,
+    "no-descending-specificity": null
+  }
+}
diff --git a/Makefile b/Makefile
@@ -164,5 +164,12 @@ format:
 	@npx prettier --ignore-path .gitignore --write "**/*.{js,jsx,json,sass,ts,tsx}"
 
 .PHONY: lint
-lint:
+lint: lint-js lint-scss
+
+.PHONY: lint-scss
+lint-scss:
+	@npx stylelint --ignore-path .gitignore "**/*.scss" --syntax scss
+
+.PHONY: lint-js
+lint-js:
 	@npx eslint --ignore-path .gitignore "**/*.{js,jsx,ts,tsx}"
diff --git a/lib/app-layout/style.scss b/lib/app-layout/style.scss
@@ -11,7 +11,7 @@
       transition: width 0.2s ease-in-out, opacity 0.2s ease-in-out;
     }
     .app-layout__note-column {
-      border-left-width: 0px;
+      border-left-width: 0;
       transition: border-left-width 0.2s;
     }
 

diff --git a/lib/auth/style.scss b/lib/auth/style.scss
@@ -67,7 +67,7 @@
     color: $studio-white;
     font-weight: 500;
     margin: 16px auto 8px;
-    padding: 0px 15px 2px;
+    padding: 0 15px 2px;
   }
 
   a.login__forgot {
@@ -126,7 +126,7 @@
     font-size: 16px;
     font-weight: 500;
     height: 40px;
-    padding: 0px 15px 2px;
+    padding: 0 15px 2px;
     margin: 50px auto 10px;
     max-width: 320px;
     text-align: center;

diff --git a/lib/components/dev-badge/style.scss b/lib/components/dev-badge/style.scss
@@ -1,12 +1,12 @@
 .dev-badge {
   position: absolute;
-  opacity: .8;
+  opacity: 0.8;
   z-index: 1;
   right: 12px;
   bottom: 12px;
   padding: 2px 4px;
   background: $studio-gray-5;
   color: $studio-gray-80;
-  font-size: .75rem;
+  font-size: 0.75rem;
   line-height: 1;
 }
diff --git a/lib/components/tab-panels/style.scss b/lib/components/tab-panels/style.scss
@@ -11,7 +11,7 @@
     margin: 0 0.5em;
     border-top: 2px solid transparent;
     border-bottom: 2px solid transparent;
-    padding: 0.75em 0.75em;
+    padding: 0.75em;
     color: $studio-gray-80;
     text-transform: capitalize;
     border-radius: 0;

diff --git a/lib/components/tag-chip/style.scss b/lib/components/tag-chip/style.scss
@@ -2,7 +2,7 @@
   cursor: pointer;
   flex: none;
   margin: 2px 8px 6px 0;
-  padding: 1px 14px 3px 14px;
+  padding: 1px 14px 3px;
   border-radius: 14px;
   line-height: 1.25em;
   white-space: nowrap;

diff --git a/lib/controls/checkbox/style.scss b/lib/controls/checkbox/style.scss
@@ -1,6 +1,5 @@
 .checkbox-control {
   -webkit-touch-callout: none;
-
   width: 16px;
   height: 16px;
   position: relative;

diff --git a/lib/controls/toggle/style.scss b/lib/controls/toggle/style.scss
@@ -6,7 +6,6 @@ $toggle-control-knob-size: $toggle-control-height - $toggle-control-knob-margin
 
 .toggle-control {
   -webkit-touch-callout: none;
-
   position: relative;
   display: inline-block;
   width: $toggle-control-width;

diff --git a/lib/dialog-renderer/style.scss b/lib/dialog-renderer/style.scss
@@ -7,12 +7,12 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  background: rgba($studio-white, .75);
+  background: rgba($studio-white, 0.75);
 }
 
 .theme-dark {
   .dialog-renderer__overlay {
-    background: rgba($studio-gray-100, .75);
+    background: rgba($studio-gray-100, 0.75);
   }
 }
 

diff --git a/lib/dialogs/about/style.scss b/lib/dialogs/about/style.scss
@@ -5,6 +5,7 @@
 
     // For overriding theme settings.
     // TODO: Improve theme management so this isn't necessary
+
     background: $studio-simplenote-blue-50 !important;
     color: $studio-white !important;
     a {

diff --git a/lib/dialogs/import/source-importer/executor/style.scss b/lib/dialogs/import/source-importer/executor/style.scss
@@ -15,7 +15,7 @@
 }
 
 .source-importer-executor__error {
-  margin-bottom: .75em;
+  margin-bottom: 0.75em;
   color: $studio-red-40;
   line-height: 1.3;
 }

diff --git a/lib/dialogs/keybindings/style.scss b/lib/dialogs/keybindings/style.scss
@@ -5,7 +5,7 @@
   }
 
   .dialog-content {
-    padding: 10px 20px 20px 20px;
+    padding: 10px 20px 20px;
   }
 
   ul {

diff --git a/lib/dialogs/settings/style.scss b/lib/dialogs/settings/style.scss
@@ -1,7 +1,7 @@
 .settings {
   max-width: 630px;
 
-  input[type="radio"] {
+  input[type='radio'] {
     cursor: pointer;
   }
 

diff --git a/lib/navigation-bar/style.scss b/lib/navigation-bar/style.scss
@@ -46,7 +46,7 @@
   flex: none;
   justify-content: flex-start;
   align-items: center;
-  padding: 0 20px 20px 20px;
+  padding: 0 20px 20px;
   color: $studio-gray-80;
 }
 
@@ -55,7 +55,7 @@
   flex: none;
   justify-content: flex-start;
   align-items: center;
-  padding: 0 20px 0 20px;
+  padding: 0 20px;
   color: $studio-gray-80;
 }
 

diff --git a/lib/note-detail/style.scss b/lib/note-detail/style.scss
@@ -82,6 +82,8 @@
 }
 
 .note-detail-markdown {
+  @import '../node_modules/highlight.js/scss/solarized-light.scss';
+
   overflow: visible;
   -webkit-overflow-scrolling: touch;
 
@@ -95,6 +97,7 @@
   }
 
   a {
+    cursor: pointer;
     overflow-wrap: break-word;
     word-wrap: break-word;
   }
@@ -103,10 +106,6 @@
     max-width: 100%;
     height: auto;
   }
-}
-
-.note-detail-markdown {
-  @import '../node_modules/highlight.js/scss/solarized-light.scss';
 
   h1,
   h2,
@@ -131,10 +130,6 @@
     border-top: 1px solid $studio-gray-5;
   }
 
-  a {
-    cursor: pointer;
-  }
-
   blockquote {
     font-style: italic;
     border-left: 4px solid $studio-gray-5;

diff --git a/lib/note-list/style.scss b/lib/note-list/style.scss
@@ -99,14 +99,11 @@
   }
 
   .note-list-item-pinner {
+    color: transparent;
     height: 16px;
     width: 16px;
   }
 
-  .note-list-item-pinner {
-    color: transparent;
-  }
-
   .note-list-item-pinner:hover,
   .note-list-item-pinner.note-list-item-pinned {
     color: $studio-simplenote-blue-50;

diff --git a/lib/note-toolbar/style.scss b/lib/note-toolbar/style.scss
@@ -43,6 +43,21 @@
 }
 
 .note-toolbar-trashed {
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  justify-content: flex-end;
+  width: 100%;
+
+  .note-toolbar__button {
+    margin: 0 0 0 16px;
+  }
+
+  .basic-button,
+  .button-primary {
+    border-width: 2px;
+  }
+
   .note-toolbar__column-left {
     display: none;
 
@@ -90,23 +105,6 @@
   }
 }
 
-.note-toolbar-trashed {
-  display: flex;
-  align-items: center;
-  padding: 0 16px;
-  justify-content: flex-end;
-  width: 100%;
-
-  .note-toolbar__button {
-    margin: 0 0 0 16px;
-  }
-
-  .basic-button,
-  .button-primary {
-    border-width: 2px;
-  }
-}
-
 .note-toolbar-placeholder {
   display: block;
   height: $toolbar-height;

diff --git a/lib/revision-selector/style.scss b/lib/revision-selector/style.scss
@@ -1,6 +1,6 @@
 .revision-selector {
   background: $studio-simplenote-blue-50;
-  padding: 10px 20px 20px 20px;
+  padding: 10px 20px 20px;
   color: $studio-white;
   z-index: 1000;
   height: 114px;

diff --git a/lib/tag-list/style.scss b/lib/tag-list/style.scss
@@ -56,8 +56,6 @@
   padding-bottom: 0;
   overflow-y: auto;
   margin: 0;
-  padding-top: 0;
-  padding-bottom: 0;
 
   svg {
     cursor: pointer;