Add Stylelint (#3040)

.github/workflows/lint.yml

@@ -40,4 +40,26 @@ jobs:
         run: yarn install --frozen-lockfile
 
       - name: Run ESLint
-        run: yarn lint
+        run: yarn eslint js
+
+  stylelint:
+    name: Stylelint
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: web
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          cache: yarn
+          cache-dependency-path: web/yarn.lock
+
+      - name: Install Node packages
+        run: yarn install --frozen-lockfile
+
+      - name: Run Stylelint
+        run: yarn stylelint css/src/themes/*.css

web/.stylelintrc.json

@@ -0,0 +1,13 @@
+{
+  "extends": "stylelint-config-standard",
+  "rules": {
+    "selector-class-pattern": null,
+    "no-descending-specificity": null,
+    "block-no-empty": null,
+
+    "property-no-vendor-prefix": null,
+    "max-line-length": null,
+    "declaration-block-no-shorthand-property-overrides": null,
+    "selector-id-pattern": null
+  }
+}

web/css/src/themes/dark.css

@@ -126,8 +126,8 @@ strong {
   background-color: #ff3478;
 }
 
-.notification-container .unseen .notification-title a,
-.notification-container .unseen .notification-title {
+.notification-container .unseen .notification-title,
+.notification-container .unseen .notification-title a {
   color: #fff !important;
 }
 
@@ -607,14 +607,6 @@ div.l-content > div.l-separator:nth-of-type(4) {
   box-shadow: 0 1px 4px rgb(0 0 0 / 35%);
 }
 
-textarea::input-placeholder {
-  color: #bbb !important;
-}
-
-textarea:focus::input-placeholder {
-  color: #909090 !important;
-}
-
 textarea::placeholder {
   color: #bbb !important;
 }
@@ -797,9 +789,7 @@ td.hint {
 .additional-control:active {}
 
 .additional-control.delete:hover,
-
 .additional-control.delete:active,
-
 .additional-control.add:hover {}
 
 .additional-control.add:active {}

web/css/src/themes/default.css

@@ -5,111 +5,131 @@
 
 /* exo-300 - latin-ext_latin */
 @font-face {
-  font-family: 'Exo';
+  font-family: Exo;
   font-style: normal;
   font-weight: 300;
-  src: local('Exo Light'), local('Exo-Light'),
-     url('/webfonts/exo-v8-latin-ext_latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-     url('/webfonts/exo-v8-latin-ext_latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  src:
+    local("Exo Light"),
+    local("Exo-Light"),
+    url("/webfonts/exo-v8-latin-ext_latin-300.woff2") format("woff2"),
+    url("/webfonts/exo-v8-latin-ext_latin-300.woff") format("woff");
   font-display: swap;
 }
 
 /* exo-300italic - latin-ext_latin */
 @font-face {
-  font-family: 'Exo';
+  font-family: Exo;
   font-style: italic;
   font-weight: 300;
-  src: local('Exo Light Italic'), local('Exo-LightItalic'),
-     url('/webfonts/exo-v8-latin-ext_latin-300italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-     url('/webfonts/exo-v8-latin-ext_latin-300italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  src:
+    local("Exo Light Italic"),
+    local("Exo-LightItalic"),
+    url("/webfonts/exo-v8-latin-ext_latin-300italic.woff2") format("woff2"),
+    url("/webfonts/exo-v8-latin-ext_latin-300italic.woff") format("woff");
   font-display: swap;
 }
 
 /* exo-regular - latin-ext_latin */
 @font-face {
-  font-family: 'Exo';
+  font-family: Exo;
   font-style: normal;
   font-weight: 400;
-  src: local('Exo Regular'), local('Exo-Regular'),
-     url('/webfonts/exo-v8-latin-ext_latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-     url('/webfonts/exo-v8-latin-ext_latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  src:
+    local("Exo Regular"),
+    local("Exo-Regular"),
+    url("/webfonts/exo-v8-latin-ext_latin-regular.woff2") format("woff2"),
+    url("/webfonts/exo-v8-latin-ext_latin-regular.woff") format("woff");
   font-display: swap;
 }
 
 /* exo-italic - latin-ext_latin */
 @font-face {
-  font-family: 'Exo';
+  font-family: Exo;
   font-style: italic;
   font-weight: 400;
-  src: local('Exo Italic'), local('Exo-Italic'),
-     url('/webfonts/exo-v8-latin-ext_latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-     url('/webfonts/exo-v8-latin-ext_latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  src:
+    local("Exo Italic"),
+    local("Exo-Italic"),
+    url("/webfonts/exo-v8-latin-ext_latin-italic.woff2") format("woff2"),
+    url("/webfonts/exo-v8-latin-ext_latin-italic.woff") format("woff");
   font-display: swap;
 }
 
 /* exo-500 - latin-ext_latin */
 @font-face {
-  font-family: 'Exo';
+  font-family: Exo;
   font-style: normal;
   font-weight: 500;
-  src: local('Exo Medium'), local('Exo-Medium'),
-     url('/webfonts/exo-v8-latin-ext_latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-     url('/webfonts/exo-v8-latin-ext_latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  src:
+    local("Exo Medium"),
+    local("Exo-Medium"),
+    url("/webfonts/exo-v8-latin-ext_latin-500.woff2") format("woff2"),
+    url("/webfonts/exo-v8-latin-ext_latin-500.woff") format("woff");
   font-display: swap;
 }
 
 /* exo-500italic - latin-ext_latin */
 @font-face {
-  font-family: 'Exo';
+  font-family: Exo;
   font-style: italic;
   font-weight: 500;
-  src: local('Exo Medium Italic'), local('Exo-MediumItalic'),
-     url('/webfonts/exo-v8-latin-ext_latin-500italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-     url('/webfonts/exo-v8-latin-ext_latin-500italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  src:
+    local("Exo Medium Italic"),
+    local("Exo-MediumItalic"),
+    url("/webfonts/exo-v8-latin-ext_latin-500italic.woff2") format("woff2"),
+    url("/webfonts/exo-v8-latin-ext_latin-500italic.woff") format("woff");
   font-display: swap;
 }
 
 /* exo-600 - latin-ext_latin */
 @font-face {
-  font-family: 'Exo';
+  font-family: Exo;
   font-style: normal;
   font-weight: 600;
-  src: local('Exo SemiBold'), local('Exo-SemiBold'),
-     url('/webfonts/exo-v8-latin-ext_latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-     url('/webfonts/exo-v8-latin-ext_latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  src:
+    local("Exo SemiBold"),
+    local("Exo-SemiBold"),
+    url("/webfonts/exo-v8-latin-ext_latin-600.woff2") format("woff2"),
+    url("/webfonts/exo-v8-latin-ext_latin-600.woff") format("woff");
   font-display: swap;
 }
 
 /* exo-600italic - latin-ext_latin */
 @font-face {
-  font-family: 'Exo';
+  font-family: Exo;
   font-style: italic;
   font-weight: 600;
-  src: local('Exo SemiBold Italic'), local('Exo-SemiBoldItalic'),
-     url('/webfonts/exo-v8-latin-ext_latin-600italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-     url('/webfonts/exo-v8-latin-ext_latin-600italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  src:
+    local("Exo SemiBold Italic"),
+    local("Exo-SemiBoldItalic"),
+    url("/webfonts/exo-v8-latin-ext_latin-600italic.woff2") format("woff2"),
+    url("/webfonts/exo-v8-latin-ext_latin-600italic.woff") format("woff");
   font-display: swap;
 }
 
 /* exo-700 - latin-ext_latin */
 @font-face {
-  font-family: 'Exo';
+  font-family: Exo;
   font-style: normal;
   font-weight: 700;
-  src: local('Exo Bold'), local('Exo-Bold'),
-     url('/webfonts/exo-v8-latin-ext_latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-     url('/webfonts/exo-v8-latin-ext_latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  src:
+    local("Exo Bold"),
+    local("Exo-Bold"),
+    url("/webfonts/exo-v8-latin-ext_latin-700.woff2") format("woff2"),
+    url("/webfonts/exo-v8-latin-ext_latin-700.woff") format("woff");
   font-display: swap;
 }
 
 /* exo-700italic - latin-ext_latin */
 @font-face {
-  font-family: 'Exo';
+  font-family: Exo;
   font-style: italic;
   font-weight: 700;
-  src: local('Exo Bold Italic'), local('Exo-BoldItalic'),
-     url('/webfonts/exo-v8-latin-ext_latin-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-     url('/webfonts/exo-v8-latin-ext_latin-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  src:
+    local("Exo Bold Italic"),
+    local("Exo-BoldItalic"),
+    url("/webfonts/exo-v8-latin-ext_latin-700italic.woff2") format("woff2"),
+    url("/webfonts/exo-v8-latin-ext_latin-700italic.woff") format("woff");
   font-display: swap;
 }
 
@@ -120,10 +140,12 @@
 
 /* Inconsolata-bold - latin */
 @font-face {
-  font-family: 'Inconsolata';
-  src: local('Inconsolata Bold'), local('Inconsolata-Bold'),
-    url('/webfonts/Inconsolata-Bold.woff2') format('woff2'),
-    url('/webfonts/Inconsolata-Bold.woff') format('woff');
+  font-family: Inconsolata;
+  src:
+    local("Inconsolata Bold"),
+    local("Inconsolata-Bold"),
+    url("/webfonts/Inconsolata-Bold.woff2") format("woff2"),
+    url("/webfonts/Inconsolata-Bold.woff") format("woff");
   font-weight: bold;
   font-style: normal;
   font-display: swap;
@@ -131,10 +153,12 @@
 
 /* Inconsolata - latin */
 @font-face {
-  font-family: 'Inconsolata';
-  src: local('Inconsolata Regular'), local('Inconsolata-Regular'),
-    url('/webfonts/Inconsolata-Regular.woff2') format('woff2'),
-    url('/webfonts/Inconsolata-Regular.woff') format('woff');
+  font-family: Inconsolata;
+  src:
+    local("Inconsolata Regular"),
+    local("Inconsolata-Regular"),
+    url("/webfonts/Inconsolata-Regular.woff2") format("woff2"),
+    url("/webfonts/Inconsolata-Regular.woff") format("woff");
   font-weight: normal;
   font-style: normal;
   font-display: swap;
@@ -427,16 +451,13 @@ table {
 }
 
 .notification-container .empty {
+  color: #54a6e5;
   text-align: center;
   font-size: 1.2rem;
   font-weight: normal;
   padding: 4rem;
 }
 
-.notification-container .empty {
-  color: #54a6e5;
-}
-
 .notification-container .unseen {
   color: #6f6f6f;
 }
@@ -967,10 +988,6 @@ div.l-content > div.l-separator:nth-of-type(4) {
   color: #3b9de8;
 }
 
-.l-sort-toolbar .l-select {
-  float: left;
-}
-
 .l-sort-toolbar td {
   vertical-align: middle;
 }
@@ -1112,10 +1129,6 @@ div.l-content > div.l-separator:nth-of-type(4) {
   max-width: 125px;
 }
 
-.body-firewall.lang-ru .l-select {
-  max-width: 125px;
-}
-
 .body-firewall.lang-es .l-select {
   max-width: 135px;
 }
@@ -1148,7 +1161,7 @@ div.l-content > div.l-separator:nth-of-type(4) {
   height: 28px;
   min-width: 175px;
   padding-left: 10px;
-  background-image: url(/images/arrow.svg);
+  background-image: url("/images/arrow.svg");
   background-repeat: no-repeat;
   background-size: 14px auto;
   background-position: right 7px center;
@@ -1199,10 +1212,7 @@ div.l-content > div.l-separator:nth-of-type(4) {
   border-top: 1px solid #d0d0d0 !important;
   text-shadow: 0 1px rgb(255 255 255 / 100%);
   box-shadow: inset 0 1px 1px rgb(255 255 255 / 100%), inset 0 0 1px rgb(255 255 255 / 100%), inset 0 0 4px rgb(255 255 255 / 80%), 0 1px 4px rgb(140 140 140 / 35%) !important;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-  border-bottom-left-radius: 6px;
-  border-bottom-right-radius: 6px;
+  border-radius: 0 0 6px 6px;
   min-height: 28px;
   color: #707070;
   padding: 0 0 0 14px;
@@ -1321,11 +1331,6 @@ div.l-content > div.l-separator:nth-of-type(4) {
   color: #adadad;
 }
 
-.l-unit--suspended.selected .l-unit__name,
-.l-unit--suspended.selected .l-unit__name span {
-  color: #777;
-}
-
 .l-unit--suspended.selected {
   background-color: #f2eab8 !important;
   color: #b2ac87 !important;
@@ -1337,7 +1342,6 @@ div.l-content > div.l-separator:nth-of-type(4) {
   text-shadow: none !important;
 }
 
-.l-unit--suspended.selected .l-unit__name,
 .l-unit--suspended.selected b,
 .l-unit--outdated.selected .l-unit__name,
 .l-unit--outdated.selected b,
@@ -2067,7 +2071,7 @@ body.mobile .l-unit-toolbar__col--right {
   border: 1px solid #ccc;
   color: #4e4e4e;
   appearance: none;
-  background-image: url(/images/arrow.svg);
+  background-image: url("/images/arrow.svg");
   background-size: 16px auto;
   background-repeat: no-repeat;
   background-position: right 9px center;
@@ -2476,7 +2480,6 @@ body.mobile .l-unit-toolbar__col--right {
 }
 
 @media screen and (min-width: 768px) {
-
   .login {
     display: flex;
     align-items: flex-end;
@@ -2848,11 +2851,6 @@ form#vstobjects.suspended {
   text-shadow: 1px 1px rgb(255 255 255 / 30%);
 }
 
-.status-icon.dim {
-  color: #ddd;
-  text-shadow: 1px 1px rgb(255 255 255 / 30%);
-}
-
 .l-unit--suspended .status-icon.dim {
   color: #c0c0c0 !important;
   text-shadow: 0 !important;
@@ -2919,9 +2917,6 @@ form#vstobjects.suspended {
 
 .footer-banner a:hover {
   color: #fff;
-}
-
-.footer-banner a:hover {
   text-decoration: underline;
 }
 
@@ -2980,7 +2975,7 @@ form#vstobjects.suspended {
 }
 
 .ui-dialog .ui-dialog-buttonpane button {
-  margin: .5em .5em .5em 0;
+  margin: 0.5em 0.5em 0.5em 0;
   box-shadow:
     0 1px 4px rgb(0 0 0 / 20%),
     inset 0 0 1px #fff,
@@ -3028,7 +3023,6 @@ form#vstobjects.suspended {
 .shortcuts-inner {}
 
 @media screen and (min-width: 768px) {
-
   .shortcuts-inner {
     display: flex;
   }
@@ -3186,12 +3180,6 @@ li[aria-expanded="true"] a {
   filter: none;
 }
 
-.server-info-output {
-  color: #c36;
-  padding: 10px 0 20px 20px;
-  background: #fff;
-}
-
 .server-info-data {
   margin-left: 100px;
   margin-top: -20px;
@@ -3328,7 +3316,7 @@ li[aria-expanded="true"] a {
 .collapse-header::after {
   content: "";
   display: block;
-  background-image: url(/images/arrow.svg);
+  background-image: url("/images/arrow.svg");
   background-size: 22px auto;
   background-repeat: no-repeat;
   background-position: center;

web/css/src/themes/vestia.css

@@ -21,6 +21,8 @@ strong {
   box-shadow: none !important;
   background: #fafafa !important;
   line-height: 1.2rem !important;
+  border-bottom-left-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
 }
 
 .l-header {
@@ -33,11 +35,6 @@ strong {
   background-color: #fff;
 }
 
-.l-menu__item.l-menu__item--active a {
-  background: none;
-  box-shadow: none !important;
-}
-
 .l-menu__item a {
   line-height: 38px !important;
 }
@@ -95,6 +92,7 @@ strong {
 }
 
 .l-stat__col-title {
+  font-weight: 700;
   font-size: 14px !important;
 }
 
@@ -188,10 +186,6 @@ strong {
   box-shadow: none;
 }
 
-.badge {
-  box-shadow: none;
-}
-
 .notification-container {
   border: 1px solid #ccc;
   background: #fff;
@@ -207,6 +201,7 @@ strong {
 .context-menu.sort-order {
   box-shadow: none;
   border: 1px solid #ccc;
+  font-size: 0.75rem !important;
   background: #fff !important;
 }
 
@@ -238,6 +233,8 @@ strong {
 
 .l-menu__item.l-menu__item--active a {
   color: #ff6701;
+  background: none;
+  box-shadow: none !important;
 }
 
 .l-stat__col a:hover {
@@ -283,10 +280,6 @@ strong {
   border: 1px solid #e95e00;
 }
 
-.l-stat__col-title {
-  font-weight: 700;
-}
-
 .l-stat {
   text-align: left;
 }
@@ -298,6 +291,7 @@ strong {
 
 .l-sort-toolbar__filter-apply {
   background-color: #cacaca !important;
+  border-radius: 0 !important;
   color: #fff;
   text-shadow: 0 1px 2px rgb(0 0 0 / 35%) !important;
 }
@@ -353,19 +347,10 @@ strong {
   font-size: 0.75rem !important;
 }
 
-.table-header {
-  border-bottom-left-radius: 0 !important;
-  border-bottom-right-radius: 0 !important;
-}
-
 .search-input {
   border-radius: 0 !important;
 }
 
-.l-sort-toolbar__filter-apply {
-  border-radius: 0 !important;
-}
-
 .l-sort-toolbar .l-select {
   border-radius: 0 !important;
 }
@@ -418,10 +403,6 @@ strong {
   color: #444 !important;
 }
 
-.context-menu.sort-order {
-  font-size: 0.75rem !important;
-}
-
 .context-menu.sort-order span:hover {
   color: #ff6701 !important;
   background: none !important;

web/package.json

@@ -5,9 +5,11 @@
   "repository": "https://github.com/hestiacp/hestiacp",
   "license": "GPL-3.0-or-later",
   "scripts": {
-    "lint": "eslint --ext .js js"
+    "lint": "eslint js --fix && stylelint css/src/themes/*.css --fix"
   },
   "devDependencies": {
-    "eslint": "^8.27.0"
+    "eslint": "^8.27.0",
+    "stylelint": "^14.14.1",
+    "stylelint-config-standard": "^29.0.0"
   }
 }