upgrade stylelint, config, fix issues

folio-org · Jan 22, 2024 · 51a1aae · 51a1aae
1 parent 811f7a4
commit 51a1aae
Show file tree

Hide file tree

Showing 19 changed files with 79 additions and 73 deletions.
diff --git a/.stylelintrc b/.stylelintrc
@@ -1,15 +1,25 @@
 {
   "extends": "stylelint-config-standard",
-
   "rules": {
-    "alpha-value-notation": null,
-    "color-function-notation": null,
-    "declaration-block-no-redundant-longhand-properties": null,
-    "function-no-unknown": null,
-    "import-notation": null,
-    "media-feature-range-notation": null,
-    "no-descending-specificity": null,
+    "import-notation": "string",
+    "value-keyword-case": ["lower", {
+      "ignoreProperties": ["composes"]
+    }],
+    "keyframes-name-pattern": null,
     "selector-class-pattern": null,
-    "value-keyword-case": null
+    "selector-pseudo-class-no-unknown": [true, {
+      "ignorePseudoClasses": [
+        "export",
+        "import",
+        "global",
+        "local"
+      ]
+    }],
+    "property-no-unknown": [ true, {
+      "ignoreProperties": [
+        "composes",
+        "compose-with"
+      ]
+    }]
   }
 }
diff --git a/package.json b/package.json
@@ -63,9 +63,9 @@
     "react-redux": "^8.0.5",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
-    "stylelint": "^15.10.3",
-    "stylelint-config-standard": "^34.0.0",
-    "stylelint-junit-formatter": "^0.2.1"
+    "stylelint": "^16.2.0",
+    "stylelint-config-standard": "^36.0.0",
+    "stylelint-junit-formatter": "^0.2.2"
   },
   "dependencies": {
     "@apollo/client": "^3.2.1",

diff --git a/src/components/AppIcon/AppIcon.css b/src/components/AppIcon/AppIcon.css
@@ -42,11 +42,8 @@
   &::after {
     content: "";
     position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
+    inset: 0;
+    box-shadow: inset 0 0 0 1px rgba(0 0 0 / 20%);
     border-radius: 25%;
   }
 

diff --git a/src/components/BadRequestScreen/BadRequestScreen.css b/src/components/BadRequestScreen/BadRequestScreen.css
@@ -22,7 +22,7 @@ h3.title {
   text-align: center;
 }
 
-@media screen and (max-width: 900px) {
+@media screen and (width <= 900px) {
   h1.title {
     font-size: var(--font-size-large);
   }

diff --git a/src/components/CreateResetPassword/CreateResetPassword.css b/src/components/CreateResetPassword/CreateResetPassword.css
@@ -126,13 +126,13 @@ button.submitButton {
   }
 }
 
-@media only screen and (min-width: 1450px) {
+@media only screen and (width >= 1450px) {
   .container {
     margin: 12vh 2rem 0;
   }
 }
 
-@media (max-height: 440px) {
+@media (height <= 440px) {
   .container {
     min-height: 330px;
   }

diff --git a/src/components/ForgotPassword/ForgotPasswordForm.css b/src/components/ForgotPassword/ForgotPasswordForm.css
@@ -22,14 +22,14 @@
   text-align: center;
 }
 
-.form .formGroup:last-child {
-  margin-bottom: 0;
-}
-
 .formGroup {
   margin-bottom: 10px;
 }
 
+.form .formGroup:last-child {
+  margin-bottom: 0;
+}
+
 .authErrorsWrapper {
   margin-top: 10px;
 }
@@ -46,13 +46,13 @@ button.submitButton {
   font-size: var(--font-size-large);
 }
 
-@media (max-height: 440px) {
+@media (height <= 440px) {
   .centered {
     min-height: 330px;
   }
 }
 
-@media (max-width: 640px) {
+@media (width <= 640px) {
   .centered {
     min-height: 330px;
   }

diff --git a/src/components/ForgotUserName/ForgotUserNameForm.css b/src/components/ForgotUserName/ForgotUserNameForm.css
@@ -22,14 +22,14 @@
   text-align: center;
 }
 
-.form .formGroup:last-child {
-  margin-bottom: 0;
-}
-
 .formGroup {
   margin-bottom: 10px;
 }
 
+.form .formGroup:last-child {
+  margin-bottom: 0;
+}
+
 .authErrorsWrapper {
   margin-top: 10px;
 }
@@ -46,13 +46,13 @@ button.submitButton {
   font-size: var(--font-size-large);
 }
 
-@media (max-height: 440px) {
+@media (height <= 440px) {
   .centered {
     min-height: 330px;
   }
 }
 
-@media (max-width: 640px) {
+@media (width <= 640px) {
   .centered {
     min-height: 330px;
   }

diff --git a/src/components/Front.css b/src/components/Front.css
@@ -18,7 +18,7 @@ h1.frontTitle {
   line-height: 125%;
 }
 
-@media screen and (max-width: 900px) {
+@media screen and (width <= 900px) {
   h1.frontTitle {
     font-size: var(--font-size-large);
   }

diff --git a/src/components/Login/Login.css b/src/components/Login/Login.css
@@ -84,7 +84,7 @@ button.submitButton {
   }
 }
 
-@media (max-height: 440px) {
+@media (height <= 440px) {
   .container {
     min-height: 330px;
   }

diff --git a/src/components/MainNav/MainNav.css b/src/components/MainNav/MainNav.css
@@ -3,8 +3,8 @@
 :root {
   --main-nav-min-height-desktop: 56px;
   --main-nav-min-height-mobile: 48px;
-  --main-nav-border-bottom-color: rgba(0, 0, 0, 0.9);
-  --main-nav-background-color: rgba(0, 0, 0, 0.8);
+  --main-nav-border-bottom-color: rgba(0 0 0 / 90%);
+  --main-nav-background-color: rgba(0 0 0 / 80%);
   --main-nav-text-color: #fff;
 }
 
@@ -13,8 +13,7 @@
   border-bottom: 1px solid var(--main-nav-border-bottom-color);
   color: var(--main-nav-text-color);
   display: flex;
-  justify-content: space-between;
-  align-content: stretch;
+  place-content: stretch space-between;
   align-items: center;
   width: 100%;
   flex: 0 0 auto;

diff --git a/src/components/MainNav/NavButton/NavButton.css b/src/components/MainNav/NavButton/NavButton.css
@@ -8,6 +8,24 @@
   --main-nav-button-color: #fff;
 }
 
+.navButton,
+.inner {
+  display: flex;
+  align-items: center;
+  position: relative;
+  flex-shrink: 0;
+}
+
+.inner {
+  position: relative;
+  padding: var(--main-nav-button-padding) 0;
+}
+
+.navButton .inner::before {
+  left: calc(var(--main-nav-button-padding) * -1);
+  right: calc(var(--main-nav-button-padding) * -1);
+}
+
 .navButton {
   composes: interactionStylesControl from "~@folio/stripes-components/lib/sharedStyles/interactionStyles.css";  /* stylelint-disable-line */
   padding: 0 var(--gutter-static-one-third);
@@ -48,7 +66,7 @@ button.navButton {
   display: flex;
 
   & svg {
-    fill: currentColor;
+    fill: currentcolor;
   }
 }
 
@@ -58,14 +76,6 @@ button.navButton {
   z-index: 4;
 }
 
-.navButton,
-.inner {
-  display: flex;
-  align-items: center;
-  position: relative;
-  flex-shrink: 0;
-}
-
 .label {
   font-weight: var(--text-weight-bold);
   display: flex;
@@ -80,16 +90,6 @@ button.navButton {
   margin-right: var(--main-nav-button-label-spacing);
 }
 
-.inner {
-  position: relative;
-  padding: var(--main-nav-button-padding) 0;
-}
-
-.navButton .inner::before {
-  left: calc(var(--main-nav-button-padding) * -1);
-  right: calc(var(--main-nav-button-padding) * -1);
-}
-
 /**
  * Badge
  */
@@ -105,7 +105,7 @@ button.navButton {
  * AppIcon
  */
 .appIcon > span::after {
-  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
+  box-shadow: inset 0 0 0 1px rgba(255 255 255 / 10%);
 }
 
 /**

diff --git a/src/components/MainNav/NavDivider/NavDivider.css b/src/components/MainNav/NavDivider/NavDivider.css
@@ -1,7 +1,7 @@
 @import '@folio/stripes-components/lib/variables.css';
 
 .navDivider {
-  border-left: 1px solid rgba(255, 255, 255, 0.2);
+  border-left: 1px solid rgba(255 255 255 / 20%);
   height: 24px;
   margin: 0 5px;
 }

diff --git a/src/components/MainNav/NavDropdownMenu/NavDropdownMenu.css b/src/components/MainNav/NavDropdownMenu/NavDropdownMenu.css
@@ -9,7 +9,7 @@
   background-color: #fff;
   background-clip: padding-box;
   border: 1px solid #ccc;
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+  box-shadow: 0 6px 12px rgba(0 0 0 / 17.5%);
   pointer-events: all;
 
   & ul {

diff --git a/src/components/MainNav/ProfileDropdown/ProfileDropdown.css b/src/components/MainNav/ProfileDropdown/ProfileDropdown.css
@@ -11,15 +11,15 @@
 
 /* Divider */
 .divider {
-  border: 1px solid rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(0 0 0 / 10%);
   border-width: 0 0 1px;
 }
 
 /* Avatar */
 .button .avatar {
   border: 0;
-  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
-  background-color: rgba(255, 255, 255, 0.4);
+  box-shadow: inset 0 0 0 1px rgba(255 255 255 / 10%);
+  background-color: rgba(255 255 255 / 40%);
 }
 
 .button__label {

diff --git a/src/components/NoPermissionScreen/NoPermissionScreen.css b/src/components/NoPermissionScreen/NoPermissionScreen.css
@@ -15,7 +15,7 @@ h2.title {
   text-align: center;
 }
 
-@media screen and (max-width: 900px) {
+@media screen and (width <= 900px) {
   h2.title {
     font-size: var(--font-size-small);
   }

diff --git a/src/components/Notification/Toast.css b/src/components/Notification/Toast.css
@@ -39,13 +39,13 @@
   position: relative;
   transition: all 0.2s ease;
   display: flex;
-  box-shadow: 0 4px 19px 0 rgba(0, 0, 0, 0.39);
+  box-shadow: 0 4px 19px 0 rgba(0 0 0 / 39%);
 
   &.error {
     background-color: oklch(from var(--error) calc(l + 0.13) calc(c - 0.03) h);
     border-color: var(--error);
     color: #fff;
-    box-shadow: 0 4px 19px 0 rgba(153, 0, 0, 0.39);
+    box-shadow: 0 4px 19px 0 rgba(153 0 0 / 39%);
 
     /* stylelint-disable */
     & :global .stripes__icon {
@@ -58,7 +58,7 @@
     background-color: oklch(from var(--success) calc(l + 0.13) calc(c - 0.03) h);
     border-color: var(--success);
     color: #fff;
-    box-shadow: 0 4px 19px 0 rgba(0, 112, 0, 0.39);
+    box-shadow: 0 4px 19px 0 rgba(0 112 0 / 39%);
 
     /* stylelint-disable */
     & :global .stripes__icon {

diff --git a/src/components/OrganizationLogo/OrganizationLogo.css b/src/components/OrganizationLogo/OrganizationLogo.css
@@ -12,7 +12,7 @@
   }
 }
 
-@media (max-height: 440px) {
+@media (height <= 440px) {
   .logo {
     margin-top: 0;
   }
@@ -38,7 +38,7 @@
   }
 }
 
-@media only screen and (min-width: 1300px) {
+@media only screen and (width >= 1300px) {
   .logo {
     margin-bottom: 20px;
   }

diff --git a/src/components/ResetPasswordNotAvailableScreen/ResetPasswordNotAvailableScreen.css b/src/components/ResetPasswordNotAvailableScreen/ResetPasswordNotAvailableScreen.css
@@ -22,7 +22,7 @@ h3.title {
   text-align: center;
 }
 
-@media screen and (max-width: 900px) {
+@media screen and (width <= 900px) {
   h1.title {
     font-size: var(--font-size-large);
   }

diff --git a/src/components/SystemSkeleton/SystemSkeleton.css b/src/components/SystemSkeleton/SystemSkeleton.css
@@ -5,7 +5,7 @@
 @import "@folio/stripes-components/lib/variables";
 
 :root {
-  --skeleton-bg: rgba(255, 255, 255, 0.08);
+  --skeleton-bg: rgba(255 255 255 / 8%);
 }
 
 .skeleton {
@@ -65,8 +65,8 @@
 .skeletonHeader {
   padding: 0 8px;
   height: 56px;
-  background-color: rgba(0, 0, 0, 0.8);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.9);
+  background-color: rgba(0 0 0 / 80%);
+  border-bottom: 1px solid rgba(0 0 0 / 90%);
   justify-content: space-between;
 }