Adds Stylelint for sass linting (#2346)

belcherj · web-flow · commit 318f1b56a622 · 2020-10-02T14:36:39.000-04:00
This PR adds stylelint and prettier standard configs with some exceptions for sass.
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;
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
diff --git a/scss/_general.scss b/scss/_general.scss
diff --git a/scss/_mixins.scss b/scss/_mixins.scss
diff --git a/scss/_normalize.scss b/scss/_normalize.scss
diff --git a/scss/buttons.scss b/scss/buttons.scss
diff --git a/scss/print.scss b/scss/print.scss
diff --git a/scss/theme.scss b/scss/theme.scss

Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@`
`11`	`11`	`transition: width 0.2s ease-in-out, opacity 0.2s ease-in-out;`
`12`	`12`	`}`
`13`	`13`	`.app-layout__note-column {`
`14`		`- border-left-width: 0px;`
	`14`	`+ border-left-width: 0;`
`15`	`15`	`transition: border-left-width 0.2s;`
`16`	`16`	`}`
`17`	`17`
Original file line number	Diff line number	Diff line change
`@@ -7,12 +7,12 @@`
`7`	`7`	`display: flex;`
`8`	`8`	`justify-content: center;`
`9`	`9`	`align-items: center;`
`10`		`- background: rgba($studio-white, .75);`
	`10`	`+ background: rgba($studio-white, 0.75);`
`11`	`11`	`}`
`12`	`12`
`13`	`13`	`.theme-dark {`
`14`	`14`	`.dialog-renderer__overlay {`
`15`		`- background: rgba($studio-gray-100, .75);`
	`15`	`+ background: rgba($studio-gray-100, 0.75);`
`16`	`16`	`}`
`17`	`17`	`}`
`18`	`18`
Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,7 @@`
`15`	`15`	`}`
`16`	`16`
`17`	`17`	`.source-importer-executor__error {`
`18`		`- margin-bottom: .75em;`
	`18`	`+ margin-bottom: 0.75em;`
`19`	`19`	`color: $studio-red-40;`
`20`	`20`	`line-height: 1.3;`
`21`	`21`	`}`
Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,7 @@`
`5`	`5`	`}`
`6`	`6`
`7`	`7`	`.dialog-content {`
`8`		`- padding: 10px 20px 20px 20px;`
	`8`	`+ padding: 10px 20px 20px;`
`9`	`9`	`}`
`10`	`10`
`11`	`11`	`ul {`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`.settings {`
`2`	`2`	`max-width: 630px;`
`3`	`3`
`4`		`- input[type="radio"] {`
	`4`	`+ input[type='radio'] {`
`5`	`5`	`cursor: pointer;`
`6`	`6`	`}`
`7`	`7`
Original file line number	Diff line number	Diff line change
`@@ -99,14 +99,11 @@`
`99`	`99`	`}`
`100`	`100`
`101`	`101`	`.note-list-item-pinner {`
	`102`	`+ color: transparent;`
`102`	`103`	`height: 16px;`
`103`	`104`	`width: 16px;`
`104`	`105`	`}`
`105`	`106`
`106`		`- .note-list-item-pinner {`
`107`		`- color: transparent;`
`108`		`- }`
`109`		`-`
`110`	`107`	`.note-list-item-pinner:hover,`
`111`	`108`	`.note-list-item-pinner.note-list-item-pinned {`
`112`	`109`	`color: $studio-simplenote-blue-50;`