Merge pull request #644 from acelaya-forks/feature/new-css-style

Feature/new css style

.stylelintrc

@@ -1,11 +1,29 @@
 {
   "extends": [
-    "stylelint-config-adidas",
+    "stylelint-config-standard",
-    "stylelint-config-adidas-bem",
     "stylelint-config-recommended-scss"
   ],
   "syntax": "scss",
   "plugins": [
-    "stylelint-scss"
+    "stylelint-scss",
-  ]
+    "stylelint-selector-bem-pattern"
+  ],
+  "rules": {
+    "string-quotes": "single",
+    "number-leading-zero": "never",
+    "selector-pseudo-element-colon-notation": null,
+    "alpha-value-notation": null,
+    "scss/at-import-partial-extension": null,
+    "color-hex-length": null,
+    "selector-class-pattern": null,
+    "scss/no-global-function-names": null,
+    "plugin/selector-bem-pattern": {
+      "componentName": "[A-Z]+",
+      "componentSelectors": {
+        "initial": "^\\.{componentName}(?:-[a-z]+)?$",
+        "combined": "^\\.combined-{componentName}-[a-z]+$"
+      },
+      "utilitySelectors": "^\\.util-[a-z]+$"
+    }
+  }
 }

CHANGELOG.md

@@ -14,6 +14,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 * [#594](https://github.com/shlinkio/shlink-web-client/pull/594) Updated to a new coding standard.
 * [#627](https://github.com/shlinkio/shlink-web-client/pull/627) Updated to Jest 28.
 * [#603](https://github.com/shlinkio/shlink-web-client/pull/603) Migrated to new and maintained dependencies to parse CSV<->JSON.
+* [#610](https://github.com/shlinkio/shlink-web-client/pull/610) Migrated to a maintained coding style for CSS.
 * [#619](https://github.com/shlinkio/shlink-web-client/pull/619) Introduced react testing library, to progressively replace enzyme.
 
 ### Deprecated

package.json

@@ -102,11 +102,11 @@
     "sass": "^1.49.9",
     "serve": "^13.0.2",
     "stryker-cli": "^1.0.2",
-    "stylelint": "^13.7.2",
+    "stylelint": "^14.8.2",
-    "stylelint-config-adidas": "^1.3.0",
+    "stylelint-config-recommended-scss": "^6.0.0",
-    "stylelint-config-adidas-bem": "^1.2.0",
+    "stylelint-config-standard": "^25.0.0",
-    "stylelint-config-recommended-scss": "^4.2.0",
+    "stylelint-scss": "^4.2.0",
-    "stylelint-scss": "^3.18.0",
+    "stylelint-selector-bem-pattern": "^2.1.1",
     "ts-mockery": "^1.2.0",
     "typescript": "^4.6.2",
     "webpack": "^5.70.0"

src/common/AsideMenu.scss

@@ -4,7 +4,7 @@
 .aside-menu {
   width: $asideMenuWidth;
   background-color: var(--primary-color);
-  box-shadow: rgba(0, 0, 0, .05) 0 8px 15px;
+  box-shadow: rgb(0 0 0 / .05) 0 8px 15px;
   position: fixed !important;
   padding-top: 13px;
   padding-bottom: 10px;
@@ -23,7 +23,7 @@
   @media (max-width: $smMax) {
     transition: left 300ms;
     top: $headerHeight - 3px;
-    box-shadow: -10px 0 50px 11px rgba(0, 0, 0, .55);
+    box-shadow: -10px 0 50px 11px rgb(0 0 0 / .55);
   }
 }
 

src/common/MenuLayout.scss

@@ -16,7 +16,7 @@
   z-index: 1035;
   font-size: 1.5rem;
   cursor: pointer;
-  color: rgba(255, 255, 255, .5);
+  color: rgb(255 255 255 / .5);
 
   @media (max-width: $smMax) {
     display: inline-block;

src/common/react-tag-autocomplete.scss

@@ -113,7 +113,7 @@
   background: var(--primary-color);
   border: 1px solid var(--border-color);
   border-radius: .25rem;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
+  box-shadow: 0 2px 6px rgb(0 0 0 / .2);
 }
 
 .react-tags__suggestions li {

src/index.scss

@@ -49,7 +49,7 @@ a:not(.nav-link):not(.navbar-brand):not(.page-link):not(.highlight-card):not(.bt
 }
 
 .card {
-  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
+  box-shadow: 0 .125rem .25rem rgb(0 0 0 / .075);
   background-color: var(--primary-color);
   border-color: var(--border-color);
 }

src/servers/ServersListGroup.scss

@@ -8,7 +8,7 @@
 
 .servers-list__list-group:not(.servers-list__list-group--embedded) {
   max-width: 400px;
-  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
+  box-shadow: 0 .125rem .25rem rgb(0 0 0 / .075);
 }
 
 .servers-list__server-item.servers-list__server-item {

src/theme/theme.scss

@@ -5,22 +5,22 @@ $lightPrimaryColor: #ffffff;
 $lightPrimaryColorAlfa: rgba($lightPrimaryColor, .5);
 $lightSecondaryColor: $lightColor;
 $lightTextColor: #232323;
-$lightBorderColor: rgba(0, 0, 0, .125);
+$lightBorderColor: rgb(0 0 0 / .125);
 $lightTableBorderColor: $mediumGrey;
 $lightActiveColor: $lightGrey;
 $lightBrandColor: $mainColor;
 $lightInputColor: $lightPrimaryColor;
 $lightInputTextColor: #495057;
 $lightDisabledInputColor: $lightColor;
-$lightBorderInputColor: rgba(0, 0, 0, .19);
+$lightBorderInputColor: rgb(0 0 0 / .19);
-$lightTableHighlightColor: rgba(0, 0, 0, .075);
+$lightTableHighlightColor: rgb(0 0 0 / .075);
 
 // Dark theme colors
 $darkPrimaryColor: #161b22;
 $darkPrimaryColorAlfa: rgba($darkPrimaryColor, .8);
 $darkSecondaryColor: #0f131a;
-$darkTextColor: rgb(201, 209, 217);
+$darkTextColor: rgb(201 209 217);
-$darkBorderColor: rgba(255, 255, 255, .15);
+$darkBorderColor: rgb(255 255 255 / .15);
 $darkTableBorderColor: #393d43;
 $darkActiveColor: $darkSecondaryColor;
 $darkBrandColor: #0b2d4e;