Updated lint errors, updated Stylelint library to latest version

Re-added stylelint/order plugin, updated options to match new syntax .

Fixed stylelint error

.stylelintrc

@@ -9,7 +9,7 @@
 
   "rules": {
     "declaration-block-no-duplicate-properties": true,
-    "order/declaration-block-properties-alphabetical-order": true,
+    "order/properties-alphabetical-order": true,
     "property-no-unknown": [
       true, {
         ignoreProperties:

package.json

@@ -22,9 +22,9 @@
     "nyc": "^15.0.0",
     "sinon": "^7.5.0",
     "sinon-chai": "^3.3.0",
-    "stylelint": "^7.9.0",
-    "stylelint-config-standard": "^16.0.0",
-    "stylelint-order": "^0.3.0",
+    "stylelint-order": "^4.0.0",
+    "stylelint": "^13.5.0",
+    "stylelint-config-standard": "^20.0.0",
     "web-ext": "^2.9.3",
     "webextensions-jsdom": "^1.2.1"
   },

src/css/options.css

@@ -21,6 +21,7 @@ label {
     background: #202023;
     color: #fff;
   }
+
   p,
   label {
     color: rgb(177, 177, 179);

src/css/popup.css

@@ -18,9 +18,18 @@ html {
 }
 
 body {
+  color: #000;
   font-family: Roboto, Noto, "San Francisco", Ubuntu, "Segoe UI", "Fira Sans", message-box, Arial, sans-serif;
+  font-size: 13px;
   inline-size: calc(var(--overflow-size) + 299px);
+
+  /* inline-size: 320px; */
+  letter-spacing: -0.1px;
   max-inline-size: calc(var(--overflow-size) + 299px);
+
+  --highlight-blue: #1296f8;
+  --hr-grey: #e3e3e3;
+  --text-grey: #737373;
 }
 
 html,
@@ -46,7 +55,6 @@ body {
   --inline-start-size: 1.66rem; /* 20px */
   --inline-button-size: 5.833rem; /* 70px */
   --icon-size: 1.166rem; /* 14px */
-
   --small-text-size: 0.833rem; /* 10px */
   --small-radius: 3px;
   --icon-button-size: calc(calc(var(--block-line-separation-size) * 2) + 1.66rem); /* 20px */
@@ -107,26 +115,26 @@ table {
 
 /* Effect borrowed from tabs in Firefox, ensure that the element flexes to the full width */
 .truncate-text {
-  position: relative;
   inline-size: 100%;
   overflow: hidden;
+  position: relative;
   white-space: nowrap;
 }
 
 .truncate-text::after {
-  position: absolute;
-  mask-image: linear-gradient(to right, transparent, white 70%);
-  content: " ";
-  inline-size: 50px;
-  height: 100%;
-  inset-inline-end: 0;
   background: white;
+  content: " ";
+  height: 100%;
+  inline-size: 50px;
+  inset-inline-end: 0;
+  mask-image: linear-gradient(to right, transparent, white 70%);
+  position: absolute;
 }
 
 .hover-highlight:hover .truncate-text::after,
 .hover-highlight:focus .truncate-text::after {
-  mask-image: linear-gradient(to right, transparent, var(--highlight-blue) 50%);
   background: var(--highlight-blue);
+  mask-image: linear-gradient(to right, transparent, var(--highlight-blue) 50%);
 }
 
 /* Color and icon helpers */
@@ -379,6 +387,13 @@ manage things like container crud */
   text-decoration: none;
 }
 
+.userContext-wrapper {
+  align-items: center;
+  display: flex;
+  flex: 1 1;
+  transition: background-color 75ms;
+}
+
 .edit-containers-panel .userContext-wrapper {
   max-inline-size: calc(var(--overflow-size) + 203px);
 }
@@ -388,13 +403,6 @@ manage things like container crud */
   pointer-events: none;
 }
 
-.userContext-wrapper {
-  align-items: center;
-  display: flex;
-  flex: 1 1;
-  transition: background-color 75ms;
-}
-
 .userContext-icon-wrapper {
   block-size: var(--icon-button-size);
   flex: 0 0 var(--icon-button-size);
@@ -655,18 +663,6 @@ manage things like container crud */
   background: #0f1126;
 }
 
-body {
-  color: #000;
-  font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-  font-size: 13px;
-  inline-size: 320px;
-  letter-spacing: -0.1px;
-
-  --highlight-blue: #1296f8;
-  --hr-grey: #e3e3e3;
-  --text-grey: #737373;
-}
-
 h3.title {
   block-size: 40px;
   color: #000;
@@ -709,8 +705,8 @@ h3.title {
 
 .menu-text {
   inline-size: calc(100% - 40px);
-  max-inline-size: 260px;
   line-height: 24px;
+  max-inline-size: 260px;
 }
 
 .menu-icon {