Upgrade to stylelint 15.2

shepmaster · shepmaster · commit a0f3e68ba38c · 2023-03-15T10:43:40.000-04:00
We no longer need to turn off style rules that prettier will check,
and we also allow prettier to enforce CSS property order, although
it's a bit different than our current sort order.
diff --git a/ui/frontend/.stylelintrc.json b/ui/frontend/.stylelintrc.json
@@ -1,9 +1,7 @@
 {
   "extends": [
     "stylelint-config-standard",
-    "stylelint-config-css-modules",
-    "stylelint-config-idiomatic-order",
-    "stylelint-config-prettier"
+    "stylelint-config-css-modules"
   ],
   "rules": {
     "selector-class-pattern": [
diff --git a/ui/frontend/BuildMenu.module.css b/ui/frontend/BuildMenu.module.css
@@ -1,4 +1,4 @@
 .code {
-  padding: 0 0.25em;
   background: #eee;
+  padding: 0 0.25em;
 }
diff --git a/ui/frontend/ConfigElement.module.css b/ui/frontend/ConfigElement.module.css
@@ -29,22 +29,22 @@
     $border: 1px solid #bbb;
 
     flex: 1;
-    padding: 0 1em;
+    cursor: pointer;
     border: $border;
     border-right-width: 0;
-    border-bottom-left-radius: var(--header-border-radius);
     border-top-left-radius: var(--header-border-radius);
+    border-bottom-left-radius: var(--header-border-radius);
+    padding: 0 1em;
     color: #777;
-    cursor: pointer;
-    font-size: 11px;
     font-weight: 600;
+    font-size: 11px;
     text-align: center;
     text-transform: uppercase;
 
     & ~ label {
-      border-radius: 0 var(--header-border-radius) var(--header-border-radius) 0;
-      border-right-width: 1px;
       border-left: $border;
+      border-right-width: 1px;
+      border-radius: 0 var(--header-border-radius) var(--header-border-radius) 0;
     }
 
     &:hover {
diff --git a/ui/frontend/HeaderButton.module.css b/ui/frontend/HeaderButton.module.css
@@ -1,8 +1,8 @@
 .container {
   display: flex;
-  height: 3em;
   align-items: center;
   padding: 0 1.25em;
+  height: 3em;
   font-weight: 600;
   text-decoration: none;
   text-transform: uppercase;
diff --git a/ui/frontend/Help.module.css b/ui/frontend/Help.module.css
@@ -1,14 +1,14 @@
 .container {
-  max-width: 800px;
-  padding: 1em;
   margin: 1em auto;
   background-color: #fff;
+  padding: 1em;
+  max-width: 800px;
   line-height: 1.5;
 }
 
 .code {
-  padding: 0 0.25em;
   background: #eee;
+  padding: 0 0.25em;
 }
 
 .logo {
diff --git a/ui/frontend/HelpExample.module.css b/ui/frontend/HelpExample.module.css
@@ -6,16 +6,16 @@
   position: absolute;
   top: 0;
   right: 0;
-  border: none;
-  background: rgb(255 255 255 / 80%);
-  border-bottom-left-radius: 0.5em;
-  cursor: pointer;
+  visibility: hidden;
   opacity: 0;
   transition: all 0.5s;
-  visibility: hidden;
+  cursor: pointer;
+  border: none;
+  border-bottom-left-radius: 0.5em;
+  background: rgb(255 255 255 / 80%);
 }
 
 .container:hover .loadExample {
-  opacity: 1;
   visibility: visible;
+  opacity: 1;
 }
diff --git a/ui/frontend/Icon.module.css b/ui/frontend/Icon.module.css
@@ -1,4 +1,4 @@
 .icon {
-  display: block;
   fill: currentcolor;
+  display: block;
 }
diff --git a/ui/frontend/Loader.module.css b/ui/frontend/Loader.module.css
@@ -9,9 +9,9 @@
 }
 
 .dot {
+  opacity: 0;
   animation: loader-fade 1s;
   animation-iteration-count: infinite;
-  opacity: 0;
 
   &:nth-child(2) {
     animation-delay: 0.2s;
diff --git a/ui/frontend/MenuGroup.module.css b/ui/frontend/MenuGroup.module.css
@@ -1,6 +1,6 @@
 .container {
-  width: 27em;
   padding: 0.75em 1em 0;
+  width: 27em;
   line-height: normal;
 
   &:last-child {
@@ -9,11 +9,11 @@
 }
 
 .title {
-  padding-bottom: 10px;
-  border-bottom: 1px solid var(--header-main-border);
   margin: 0;
-  font-size: 11px;
+  border-bottom: 1px solid var(--header-main-border);
+  padding-bottom: 10px;
   font-weight: 700;
+  font-size: 11px;
   text-transform: uppercase;
 }
 
diff --git a/ui/frontend/Notifications.module.css b/ui/frontend/Notifications.module.css
@@ -3,15 +3,15 @@ $space: 0.25em;
 
 .container {
   position: absolute;
-  z-index: 10;
   right: $buffer;
   bottom: $buffer;
   left: $buffer;
-  max-width: 50em;
-  border: 2px solid #428bca;
+  z-index: 10;
   margin-right: auto;
   margin-left: auto;
+  border: 2px solid #428bca;
   background: white;
+  max-width: 50em;
 }
 
 .notification {
@@ -24,7 +24,7 @@ $space: 0.25em;
 
 .close {
   composes: -buttonReset from './shared.module.css';
-  padding: $space;
-  background: #e1e1db;
   cursor: pointer;
+  background: #e1e1db;
+  padding: $space;
 }
diff --git a/ui/frontend/Output.module.css b/ui/frontend/Output.module.css
@@ -3,9 +3,9 @@ $background-tab: #fcfcfc; /* desaturate($current-tab, 100%); */
 
 .container {
   display: flex;
+  flex-direction: column;
   width: 100%;
   height: 100%;
-  flex-direction: column;
 }
 
 .tabs {
@@ -14,10 +14,10 @@ $background-tab: #fcfcfc; /* desaturate($current-tab, 100%); */
 
 .tab {
   flex: 1 1 auto;
+  cursor: pointer;
   border: var(--border);
   border-right: none;
   background-color: $background-tab;
-  cursor: pointer;
   line-height: 1.5em;
 
   &:last-of-type {
@@ -27,9 +27,9 @@ $background-tab: #fcfcfc; /* desaturate($current-tab, 100%); */
 
 .tabSelected {
   composes: tab;
+  cursor: default;
   border-bottom: none;
   background-color: $current-tab;
-  cursor: default;
 
   &:focus {
     outline: none;
@@ -42,10 +42,10 @@ $background-tab: #fcfcfc; /* desaturate($current-tab, 100%); */
 }
 
 .body {
-  overflow: scroll;
-  height: 100%;
-  padding: 0.5em;
   border: var(--border);
   border-top: none;
   background-color: $current-tab;
+  padding: 0.5em;
+  height: 100%;
+  overflow: scroll;
 }
diff --git a/ui/frontend/Output/Gist.module.css b/ui/frontend/Output/Gist.module.css
@@ -6,29 +6,29 @@ $copied-duration: 1s ease-in-out;
 
 .button {
   composes: -buttonReset from '../shared.module.css';
-  margin: 0 0.25em 0 0.5em;
-  cursor: pointer;
   transition: color $copied-duration;
+  cursor: pointer;
+  margin: 0 0.25em 0 0.5em;
 }
 
 .text {
+  visibility: hidden;
   opacity: 0;
   transition: visibility $copied-duration, opacity $copied-duration, color $copied-duration;
-  visibility: hidden;
 }
 
 .active {
   composes: container;
 
   & .button {
-    color: green;
     transition: color 0s;
+    color: green;
   }
 
   & .text {
-    color: green;
+    visibility: visible;
     opacity: 1;
     transition: visibility 0s, opacity 0s, color 0s;
-    visibility: visible;
+    color: green;
   }
 }
diff --git a/ui/frontend/Output/Header.module.css b/ui/frontend/Output/Header.module.css
@@ -6,8 +6,8 @@
   &::before,
   &::after {
     flex: 1 1 auto;
-    border-top: var(--border);
     margin: auto;
+    border-top: var(--border);
     content: '';
   }
 
diff --git a/ui/frontend/Playground.module.css b/ui/frontend/Playground.module.css
@@ -1,8 +1,8 @@
 .container {
   display: flex;
-  height: 100vh;
   flex-direction: column;
   padding-bottom: 1em;
+  height: 100vh;
 }
 
 .-resizeableArea {
@@ -32,8 +32,8 @@
 
 .-gutter {
   display: flex;
-  align-items: center;
   justify-content: center;
+  align-items: center;
 }
 
 .splitRowsGutter {
@@ -42,8 +42,8 @@
 }
 
 .splitRowsGutterHandle {
-  pointer-events: none;
   transform: rotate(90deg);
+  pointer-events: none;
 }
 
 .splitColumnsGutter {
diff --git a/ui/frontend/PopButton.module.css b/ui/frontend/PopButton.module.css
@@ -4,13 +4,12 @@ $arrow-size: 10px;
 $vertical-border-color: #cacaca;
 
 .container {
-  z-index: 10;
-
   /* Prevents the popper from shifting when adding it to the DOM
    * triggers showing the scrollbars.
    * https://github.com/FezVrasta/popper.js/issues/457#issuecomment-367692177
    */
   top: 0;
+  z-index: 10;
   font-size: 12px;
 
   & button:enabled {
@@ -23,18 +22,18 @@ $vertical-border-color: #cacaca;
 }
 
 .container[data-popper-placement^='bottom'] .arrow {
+  margin-top: 0;
   border-top-width: 0;
   border-bottom-color: $bg-color;
-  margin-top: 0;
 }
 
 .content {
-  border-radius: var(--header-border-radius);
+  margin: $arrow-size;
+  box-shadow: 0 1px 4px -2px rgb(0 0 0 / 60%), inset 0 1px 0 white;
   border-right: 1px solid $vertical-border-color;
   border-bottom: 1px solid var(--header-accent-border);
   border-left: 1px solid $vertical-border-color;
-  margin: $arrow-size;
+  border-radius: var(--header-border-radius);
   background: $bg-color;
-  box-shadow: 0 1px 4px -2px rgb(0 0 0 / 60%), inset 0 1px 0 white;
   color: $fg-color;
 }
diff --git a/ui/frontend/SegmentedButton.module.css b/ui/frontend/SegmentedButton.module.css
@@ -4,8 +4,8 @@ $bg-dark: #f9f9f9;
 .container {
   display: flex;
   align-items: center;
-  border-radius: var(--header-border-radius);
   box-shadow: 0 2px 4px -2px rgb(0 0 0 / 40%), inset 0 1px 0 white;
+  border-radius: var(--header-border-radius);
 }
 
 .button {
@@ -16,13 +16,13 @@ $bg-dark: #f9f9f9;
   color: #444;
 
   &:first-child {
-    border-bottom-left-radius: var(--header-border-radius);
     border-top-left-radius: var(--header-border-radius);
+    border-bottom-left-radius: var(--header-border-radius);
   }
 
   &:last-child {
-    border-bottom-right-radius: var(--header-border-radius);
     border-top-right-radius: var(--header-border-radius);
+    border-bottom-right-radius: var(--header-border-radius);
   }
 
   &:not(:first-child) {
@@ -39,10 +39,10 @@ $bg-dark: #f9f9f9;
   }
 
   &:active {
+    box-shadow: inset 0 1px 1px rgb(0 0 0 / 20%);
     border-top-color: #bababa;
     border-bottom-color: #d6d6d6;
     background: linear-gradient($bg-dark, #ededed);
-    box-shadow: inset 0 1px 1px rgb(0 0 0 / 20%);
   }
 }
 
diff --git a/ui/frontend/SelectableMenuItem.module.css b/ui/frontend/SelectableMenuItem.module.css
@@ -26,9 +26,9 @@
 }
 
 .checkmark {
-  margin-right: 0.5em;
   opacity: 0;
   transition: opacity 0.15s ease-in-out;
+  margin-right: 0.5em;
 }
 
 .selected .checkmark,
@@ -37,6 +37,6 @@
 }
 
 .container:hover .checkmark {
-  color: var(--header-tint);
   opacity: 0.5;
+  color: var(--header-tint);
 }
diff --git a/ui/frontend/index.module.css b/ui/frontend/index.module.css
@@ -32,8 +32,8 @@ html {
 }
 
 body {
-  padding: 0 1em;
   background-color: #e1e1db;
+  padding: 0 1em;
   font-family: var(--primary-font);
 }
 
diff --git a/ui/frontend/package.json b/ui/frontend/package.json
diff --git a/ui/frontend/shared.module.css b/ui/frontend/shared.module.css
diff --git a/ui/frontend/yarn.lock b/ui/frontend/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`	`1`	`.code {`
`2`		`- padding: 0 0.25em;`
`3`	`2`	`background: #eee;`
	`3`	`+ padding: 0 0.25em;`
`4`	`4`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`	`1`	`.icon {`
`2`		`- display: block;`
`3`	`2`	`fill: currentcolor;`
	`3`	`+ display: block;`
`4`	`4`	`}`
Original file line number	Diff line number	Diff line change
`@@ -9,9 +9,9 @@`
`9`	`9`	`}`
`10`	`10`
`11`	`11`	`.dot {`
	`12`	`+ opacity: 0;`
`12`	`13`	`animation: loader-fade 1s;`
`13`	`14`	`animation-iteration-count: infinite;`
`14`		`- opacity: 0;`
`15`	`15`
`16`	`16`	`&:nth-child(2) {`
`17`	`17`	`animation-delay: 0.2s;`