🚨 Add linter rule for CSS

.prettierrc.json

@@ -1,4 +1,5 @@
 {
   "arrowParens": "avoid",
-  "endOfLine": "auto"
+  "endOfLine": "auto",
+  "order": "smacss"
 }

package-lock.json

@@ -15,7 +15,9 @@
         "@parcel/config-webextension": "^2.8.0",
         "@types/webextension-polyfill": "^0.9.1",
         "parcel": "^2.8.0",
+        "postcss": "^8.4.19",
         "prettier": "^2.8.0",
+        "prettier-plugin-css-order": "^1.3.0",
         "prettier-plugin-organize-imports": "^3.2.1",
         "typescript": "^4.9.3",
         "webextension-polyfill": "^0.10.0"
@@ -1715,6 +1717,18 @@
         "node": ">=10"
       }
     },
+    "node_modules/css-declaration-sorter": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.3.1.tgz",
+      "integrity": "sha512-fBffmak0bPAnyqc/HO8C3n2sHrp9wcqQz6ES9koRF2/mLOVAx9zIQ3Y7R29sYCteTPqMCwns4WYQoCX91Xl3+w==",
+      "dev": true,
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.9"
+      }
+    },
     "node_modules/css-select": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.3.0.tgz",
@@ -2339,6 +2353,18 @@
         "@msgpackr-extract/msgpackr-extract-win32-x64": "2.2.0"
       }
     },
+    "node_modules/nanoid": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
+      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
+      "dev": true,
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
     "node_modules/netmask": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/netmask/-/netmask-2.0.2.tgz",
@@ -2482,6 +2508,64 @@
       "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
       "dev": true
     },
+    "node_modules/postcss": {
+      "version": "8.4.19",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.19.tgz",
+      "integrity": "sha512-h+pbPsyhlYj6N2ozBmHhHrs9DzGmbaarbLvWipMRO7RLS+v4onj26MPFXA5OBYFxyqYhUJK456SwDcY9H2/zsA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        }
+      ],
+      "dependencies": {
+        "nanoid": "^3.3.4",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/postcss-less": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-less/-/postcss-less-6.0.0.tgz",
+      "integrity": "sha512-FPX16mQLyEjLzEuuJtxA8X3ejDLNGGEG503d2YGZR5Ask1SpDN8KmZUMpzCvyalWRywAn1n1VOA5dcqfCLo5rg==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "postcss": "^8.3.5"
+      }
+    },
+    "node_modules/postcss-scss": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-4.0.5.tgz",
+      "integrity": "sha512-F7xpB6TrXyqUh3GKdyB4Gkp3QL3DDW1+uI+gxx/oJnUt/qXI4trj5OGlp9rOKdoABGULuqtqeG+3HEVQk4DjmA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss-scss"
+        }
+      ],
+      "engines": {
+        "node": ">=12.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.3.3"
+      }
+    },
     "node_modules/postcss-value-parser": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
@@ -2552,6 +2636,24 @@
         "url": "https://github.com/prettier/prettier?sponsor=1"
       }
     },
+    "node_modules/prettier-plugin-css-order": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-css-order/-/prettier-plugin-css-order-1.3.0.tgz",
+      "integrity": "sha512-wOS4qlbUARCoiiuOG0TiB/j751soC3+gUnMMva5HVWKvHJdLNYqh+jXK3MvvixR6xkJVPxHSF7rIIhkHIuHTFg==",
+      "dev": true,
+      "dependencies": {
+        "css-declaration-sorter": "^6.2.2",
+        "postcss-less": "^6.0.0",
+        "postcss-scss": "^4.0.3",
+        "sync-threads": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "prettier": "2.x"
+      }
+    },
     "node_modules/prettier-plugin-organize-imports": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/prettier-plugin-organize-imports/-/prettier-plugin-organize-imports-3.2.1.tgz",
@@ -2651,6 +2753,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/source-map-js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map-support": {
       "version": "0.5.21",
       "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
@@ -2701,6 +2812,12 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/sync-threads": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/sync-threads/-/sync-threads-1.0.1.tgz",
+      "integrity": "sha512-hIdwt/c/e1ONnr2RJmfBxEAj/J6KQQWKdToF3Qw8ZNRsTNNteGkOe63rQy9I7J5UNlr8Yl0wkzIr9wgLY94x0Q==",
+      "dev": true
+    },
     "node_modules/term-size": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/term-size/-/term-size-2.2.1.tgz",
@@ -3945,6 +4062,12 @@
         "yaml": "^1.10.0"
       }
     },
+    "css-declaration-sorter": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.3.1.tgz",
+      "integrity": "sha512-fBffmak0bPAnyqc/HO8C3n2sHrp9wcqQz6ES9koRF2/mLOVAx9zIQ3Y7R29sYCteTPqMCwns4WYQoCX91Xl3+w==",
+      "dev": true
+    },
     "css-select": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.3.0.tgz",
@@ -4318,6 +4441,12 @@
         "node-gyp-build-optional-packages": "5.0.3"
       }
     },
+    "nanoid": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
+      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
+      "dev": true
+    },
     "netmask": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/netmask/-/netmask-2.0.2.tgz",
@@ -4423,6 +4552,29 @@
       "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
       "dev": true
     },
+    "postcss": {
+      "version": "8.4.19",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.19.tgz",
+      "integrity": "sha512-h+pbPsyhlYj6N2ozBmHhHrs9DzGmbaarbLvWipMRO7RLS+v4onj26MPFXA5OBYFxyqYhUJK456SwDcY9H2/zsA==",
+      "dev": true,
+      "requires": {
+        "nanoid": "^3.3.4",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      }
+    },
+    "postcss-less": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-less/-/postcss-less-6.0.0.tgz",
+      "integrity": "sha512-FPX16mQLyEjLzEuuJtxA8X3ejDLNGGEG503d2YGZR5Ask1SpDN8KmZUMpzCvyalWRywAn1n1VOA5dcqfCLo5rg==",
+      "dev": true
+    },
+    "postcss-scss": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-4.0.5.tgz",
+      "integrity": "sha512-F7xpB6TrXyqUh3GKdyB4Gkp3QL3DDW1+uI+gxx/oJnUt/qXI4trj5OGlp9rOKdoABGULuqtqeG+3HEVQk4DjmA==",
+      "dev": true
+    },
     "postcss-value-parser": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
@@ -4474,6 +4626,18 @@
       "integrity": "sha512-9Lmg8hTFZKG0Asr/kW9Bp8tJjRVluO8EJQVfY2T7FMw9T5jy4I/Uvx0Rca/XWf50QQ1/SS48+6IJWnrb+2yemA==",
       "dev": true
     },
+    "prettier-plugin-css-order": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-css-order/-/prettier-plugin-css-order-1.3.0.tgz",
+      "integrity": "sha512-wOS4qlbUARCoiiuOG0TiB/j751soC3+gUnMMva5HVWKvHJdLNYqh+jXK3MvvixR6xkJVPxHSF7rIIhkHIuHTFg==",
+      "dev": true,
+      "requires": {
+        "css-declaration-sorter": "^6.2.2",
+        "postcss-less": "^6.0.0",
+        "postcss-scss": "^4.0.3",
+        "sync-threads": "^1.0.1"
+      }
+    },
     "prettier-plugin-organize-imports": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/prettier-plugin-organize-imports/-/prettier-plugin-organize-imports-3.2.1.tgz",
@@ -4533,6 +4697,12 @@
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
       "dev": true
     },
+    "source-map-js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "dev": true
+    },
     "source-map-support": {
       "version": "0.5.21",
       "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
@@ -4573,6 +4743,12 @@
         "stable": "^0.1.8"
       }
     },
+    "sync-threads": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/sync-threads/-/sync-threads-1.0.1.tgz",
+      "integrity": "sha512-hIdwt/c/e1ONnr2RJmfBxEAj/J6KQQWKdToF3Qw8ZNRsTNNteGkOe63rQy9I7J5UNlr8Yl0wkzIr9wgLY94x0Q==",
+      "dev": true
+    },
     "term-size": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/term-size/-/term-size-2.2.1.tgz",

package.json

@@ -40,7 +40,9 @@
     "@parcel/config-webextension": "^2.8.0",
     "@types/webextension-polyfill": "^0.9.1",
     "parcel": "^2.8.0",
+    "postcss": "^8.4.19",
     "prettier": "^2.8.0",
+    "prettier-plugin-css-order": "^1.3.0",
     "prettier-plugin-organize-imports": "^3.2.1",
     "typescript": "^4.9.3",
     "webextension-polyfill": "^0.10.0"

src/options/style.css

@@ -15,12 +15,12 @@
 }
 
 body {
-  accent-color: var(--brand-color);
+  margin: 1.5rem;
   background-color: var(--ui-background-color);
   color: var(--text-primary);
-  font-family: var(--font-primary);
+  accent-color: var(--brand-color);
-  margin: 1.5rem;
   font-size: 100%;
+  font-family: var(--font-primary);
 }
 
 ::-moz-selection,
@@ -31,12 +31,12 @@ body {
 
 input[type="text"],
 select {
-  background-color: var(--input-background-color);
-  color: var(--input-text-primary);
-  border: 1px solid var(--input-border-color);
-  border-radius: 6px;
   height: 30px;
   padding: 0 0.65rem;
+  border: 1px solid var(--input-border-color);
+  border-radius: 6px;
+  background-color: var(--input-background-color);
+  color: var(--input-text-primary);
   vertical-align: middle;
 }
 
@@ -65,14 +65,14 @@ section > h2 {
 }
 
 .tag {
+  margin-left: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
   background-color: var(--input-border-color);
   color: var(--input-text-primary);
-  border-radius: 4px;
-  font-size: 0.65rem;
   font-weight: 600;
+  font-size: 0.65rem;
   text-transform: uppercase;
-  padding: 0.25rem 0.5rem;
-  margin-left: 0.25rem;
 }
 
 small {
@@ -81,8 +81,8 @@ small {
 }
 
 #whitelisted-channels-list > li > input {
-  margin-bottom: 0.25rem;
   min-width: 300px;
+  margin-bottom: 0.25rem;
 }
 
 .options-list {

src/popup/style.css

@@ -1,27 +1,27 @@
 html {
+  -webkit-font-smoothing: antialiased;
   background: #151619;
   color: #c9cbcd;
   font-family: "Open Sans", "Segoe UI", sans-serif;
-  -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
 }
 
 body {
-  font-size: 100%;
-  margin-left: auto;
-  margin-right: auto;
   width: 300px;
+  margin-right: auto;
+  margin-left: auto;
+  font-size: 100%;
 }
 
 .container {
-  text-align: center;
   padding-bottom: 10px;
+  text-align: center;
 }
 
 .logo-wrapper {
-  background-color: #202127;
-  border-radius: 8px;
   margin: 30px 30px 15px 30px;
+  border-radius: 8px;
+  background-color: #202127;
 }
 
 .button-group {
@@ -31,10 +31,10 @@ body {
 }
 
 .button {
+  padding: 10px 20px;
   border-radius: 6px;
   color: #c3c4ca;
   font-weight: bold;
-  padding: 10px 20px;
   text-decoration: none;
   transition: all 150ms ease-in-out;
 }
@@ -45,15 +45,15 @@ body {
   margin-left: 15px;
 }
 .discord {
-  overflow: visible;
-  margin-right: 3px;
   display: inline-block;
+  margin-right: 3px;
+  overflow: visible;
 }
 .button-arrow .arrow-icon {
-  overflow: visible;
-  margin-left: 3px;
-  margin-bottom: -2px;
   width: 8px;
+  margin-bottom: -2px;
+  margin-left: 3px;
+  overflow: visible;
 }
 .icon {
   margin-bottom: -3px;
@@ -66,28 +66,28 @@ body {
   transition: transform 150ms ease-in-out;
 }
 .button-arrow .arrow-body {
-  opacity: 0;
   transform: scaleX(1);
+  opacity: 0;
   transition: transform 150ms ease-in-out, opacity 150ms ease-in-out;
 }
 .button-arrow:hover .arrow-head {
   transform: translateX(3px);
 }
 .button-arrow:hover .arrow-body {
-  opacity: 1;
   transform: scaleX(2);
+  opacity: 1;
 }
 
 #stream-status {
-  background-color: #202127;
-  border-bottom: 1px solid hsl(210, 4%, 25%);
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-  border-radius: 8px;
   display: none;
-  gap: 7px;
   margin: 0 30px;
   padding: 15px;
+  gap: 7px;
+  border-bottom: 1px solid hsl(210, 4%, 25%);
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+  border-radius: 8px;
+  background-color: #202127;
   text-align: start;
 }
 #stream-status #redirected.success {
@@ -105,21 +105,21 @@ body {
 }
 #stream-status #proxy-country {
   display: inline-block;
-  font-size: 7pt;
   margin-top: 5px;
+  font-size: 7pt;
   opacity: 0.6;
 }
 
 #whitelist-toggle-wrapper {
-  background-color: #202127;
-  border-radius: 8px;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
   display: none;
   margin-top: 0;
+  margin-right: 30px;
   margin-bottom: 0;
   margin-left: 30px;
-  margin-right: 30px;
+  border-radius: 8px;
+  border-top-right-radius: 0;
+  border-top-left-radius: 0;
+  background-color: #202127;
   transition: background-color 150ms ease-in-out;
 }
 #whitelist-toggle-wrapper:hover {
@@ -132,10 +132,10 @@ body {
   color: #baaadb;
 }
 #whitelist-toggle-label {
-  cursor: pointer;
   display: block;
-  font-size: 11pt;
-  font-weight: bold;
   margin: 0;
   padding: 10px 15px;
+  font-weight: bold;
+  font-size: 11pt;
+  cursor: pointer;
 }