Upgrade stylelint to 14

Author: shepmaster

ui/frontend/.stylelintrc.json

@@ -6,6 +6,10 @@
     "stylelint-config-prettier"
   ],
   "rules": {
+    "selector-class-pattern": [
+      "^[a-z-][a-zA-Z0-9]+$", {
+        "message": "Expected class selector to be lowerCamelCase"
+      }],
     "value-keyword-case": ["lower", {
       "ignoreProperties": [
         "composes"

ui/frontend/ConfigElement.module.css

@@ -48,7 +48,7 @@
     }
 
     &:hover {
-      background: hsla(208, 100%, 43%, 0.1);
+      background: hsl(208deg 100% 43% / 10%);
     }
   }
 

ui/frontend/HelpExample.module.css

@@ -7,7 +7,7 @@
   top: 0;
   right: 0;
   border: none;
-  background: rgba(255, 255, 255, 0.8);
+  background: rgb(255 255 255 / 80%);
   border-bottom-left-radius: 0.5em;
   cursor: pointer;
   opacity: 0;

ui/frontend/MenuAside.module.css

@@ -1,4 +1,4 @@
 .aside {
-  margin: 0.25em 0 0 0;
+  margin: 0.25em 0 0;
   color: #888;
 }

ui/frontend/MenuGroup.module.css

@@ -1,6 +1,6 @@
 .container {
   width: 27em;
-  padding: 0.75em 1em 0 1em;
+  padding: 0.75em 1em 0;
   line-height: normal;
 
   &:last-child {

ui/frontend/PopButton.module.css

@@ -35,6 +35,6 @@ $vertical-border-color: #cacaca;
   margin: $arrow-size;
   background: $bg-color;
   border-radius: var(--header-border-radius);
-  box-shadow: 0 1px 4px -2px rgba(0, 0, 0, 0.6), inset 0 1px 0 white;
+  box-shadow: 0 1px 4px -2px rgb(0 0 0 / 60%), inset 0 1px 0 white;
   color: $fg-color;
 }

ui/frontend/SegmentedButton.module.css

@@ -5,7 +5,7 @@ $bg-dark: #f9f9f9;
   display: flex;
   align-items: center;
   border-radius: var(--header-border-radius);
-  box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.4), inset 0 1px 0 white;
+  box-shadow: 0 2px 4px -2px rgb(0 0 0 / 40%), inset 0 1px 0 white;
 }
 
 .button {
@@ -42,13 +42,13 @@ $bg-dark: #f9f9f9;
     border-top-color: #bababa;
     border-bottom-color: #d6d6d6;
     background: linear-gradient($bg-dark, #ededed);
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
+    box-shadow: inset 0 1px 1px rgb(0 0 0 / 20%);
   }
 }
 
 .buttonBuild {
   composes: button;
-  border-color: hsl(15, 66.7%, 32%);
+  border-color: hsl(15deg 66.7% 32%);
   background: var(--rust);
   color: white;
 

ui/frontend/index.module.css

@@ -36,6 +36,7 @@ body {
   font-family: var(--primary-font);
 }
 
+/* stylelint-disable-next-line selector-class-pattern */
 :global(.language-rust_errors) {
   & :global(.warning) {
     color: #f79a06;

ui/frontend/package.json

@@ -67,11 +67,11 @@
     "postcss-nesting": "^10.1.1",
     "postcss-simple-vars": "^6.0.3",
     "prettier": "^2.2.1",
-    "stylelint": "^13.12.0",
+    "stylelint": "^14.2.0",
     "stylelint-config-css-modules": "^2.2.0",
     "stylelint-config-idiomatic-order": "^8.1.0",
     "stylelint-config-prettier": "^9.0.3",
-    "stylelint-config-standard": "^22.0.0",
+    "stylelint-config-standard": "^24.0.0",
     "ts-essentials": "^9.0.0",
     "ts-jest": "^27.0.0",
     "ts-loader": "^9.2.3",