STCOM-1087 Upgrade stylelint. (#2212)

* upgrade style lint, fix * replace removed commas in interactionStyles selectors. * resolve conflict * re-add commas to classnames in form.css * correct color function notation with slash separators * convert decimal alphas to percentages * remove leading 0s on percentages * remove distracting change * remove commas from stylelint config, remove comments from buttongroup
folio-org · Jan 26, 2024 · cd82224 · cd82224
1 parent 2eb2cac
commit cd82224
Show file tree

Hide file tree

Showing 29 changed files with 107 additions and 126 deletions.
diff --git a/.stylelintrc b/.stylelintrc
@@ -1,6 +1,12 @@
 {
   "extends": "stylelint-config-standard",
   "rules": {
+    "import-notation": "string",
+    "value-keyword-case": ["lower", {
+      "ignoreProperties": ["composes"]
+    }],
+    "keyframes-name-pattern": null,
+    "selector-class-pattern": null,
     "selector-pseudo-class-no-unknown": [true, {
       "ignorePseudoClasses": [
         "export",
@@ -13,7 +19,7 @@
       "ignoreProperties": [
         "composes",
         "compose-with"
-      ],
-    }],
+      ]
+    }]
   }
 }
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -17,6 +17,7 @@
 * Added support for clear icon in `<TextArea>`. Refs STCOM-1240.
 * Bug fix for Accordion content z-index rendering. Refs STCOM-1238.
 * Format aria attributes in `<Icon>`. Refs STCOM-1165.
+* Upgrade `stylelint` and fix errors. Refs STCOM-1087.
 
 ## [12.0.0](https://github.com/folio-org/stripes-components/tree/v12.0.0) (2023-10-11)
 [Full Changelog](https://github.com/folio-org/stripes-components/compare/v11.0.0...v12.0.0)

diff --git a/lib/Accordion/Accordion.css b/lib/Accordion/Accordion.css
@@ -96,7 +96,7 @@
 
 .content-region {
   opacity: 0;
-  margin: 0 0 1rem 0;
+  margin: 0 0 1rem;
   visibility: hidden; /* inputs within will not be focusable */
   transition: transform 0.1s ease 0.5s, opacity 0.1s linear 0.5s, visibility 0.2s linear 0.5s margin 0.1s linear 0.5s;
   height: 100%;

diff --git a/lib/Button/Button.css b/lib/Button/Button.css
@@ -11,7 +11,7 @@
   composes: interactionStyles from "../sharedStyles/interactionStyles.css";
   padding: 0 var(--gutter-static);
   text-align: center;
-  -webkit-appearance: none;
+  appearance: none;
   cursor: pointer;
   color: var(--color-text);
   border-radius: 999px;
@@ -67,9 +67,6 @@
     text-decoration-skip: objects;
     text-decoration-thickness: 2px;
   }
-  /**
-  * Colors
-  */
 
   /**
   * Button Style: Default

diff --git a/lib/ButtonGroup/ButtonGroup.css b/lib/ButtonGroup/ButtonGroup.css
@@ -28,8 +28,8 @@
     margin-left: -1px;
   }
 
-  & > :not(:first-child):not(:last-child),
-  & > :not(:first-child):not(:last-child)::before {
+  & > :not(:first-child, :last-child),
+  & > :not(:first-child, :last-child)::before {
     border-radius: 0;
   }
 }
@@ -38,18 +38,12 @@
   & .buttonGroup {
     & > :first-child,
     & > :first-child::before {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-      border-top-right-radius: var(--radius);
-      border-bottom-right-radius: var(--radius);
+      border-radius: 0 var(--radius) var(--radius) 0;
     }
 
     & > :last-child,
     & > :last-child::before {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-      border-top-left-radius: var(--radius);
-      border-bottom-left-radius: var(--radius);
+      border-radius: var(--radius) 0 0 var(--radius);
     }
 
     & > :not(:first-child) {

diff --git a/lib/Datepicker/Calendar.css b/lib/Datepicker/Calendar.css
@@ -116,13 +116,13 @@
 
 .monthSelect {
   border-style: dashed;
-  border-width: 0 0 1px 0;
+  border-width: 0 0 1px;
   padding: 4px;
 }
 
 .yearInput {
   border-style: dashed;
-  border-width: 0 0 1px 0;
+  border-width: 0 0 1px;
   min-width: 0;
   flex: 0 1 auto;
   padding: 4px;

diff --git a/lib/DropdownMenu/DropdownLayout.css b/lib/DropdownMenu/DropdownLayout.css
@@ -29,7 +29,7 @@
   }
 
   &.secondary {
-    background-color: rgba(0, 0, 0, 0.03);
+    background-color: rgba(0 0 0 / 3%);
   }
 
   &.fill {

diff --git a/lib/Editor/Editor.css b/lib/Editor/Editor.css
@@ -4,9 +4,7 @@
   position: relative;
   max-width: 100%;
   display: flex;
-  flex-direction: column;
-  flex-wrap: nowrap;
-  justify-content: flex-start;
+  flex-flow: column nowrap;
+  place-content: stretch flex-start;
   align-items: stretch;
-  align-content: stretch;
 }
diff --git a/lib/Icon/Icon.css b/lib/Icon/Icon.css
@@ -14,7 +14,7 @@
 
 :global .stripes__icon {
   flex-shrink: 0;
-  fill: currentColor;
+  fill: currentcolor;
   height: 1.1429em;
   width: 1.1429em;
 }

diff --git a/lib/Layer/Layer.css b/lib/Layer/Layer.css
@@ -68,5 +68,5 @@
   height: 100%;
   top: 0;
   left: 0;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: rgba(0 0 0 / 50%);
 }
diff --git a/lib/Loading/DotSpinner.css b/lib/Loading/DotSpinner.css
@@ -16,7 +16,7 @@
     width: 33%;
     height: 33%;
     margin: 0 8%;
-    background-color: rgba(0, 0, 0, 0.62);
+    background-color: rgba(0 0 0 / 62%);
     border-radius: 100%;
     display: inline-block;
     animation: sk-bouncedelay 1.4s infinite ease-in-out both;

diff --git a/lib/Modal/Modal.css b/lib/Modal/Modal.css
@@ -118,7 +118,7 @@
  * Move the modal further towards the top
  * when the browser window is a bit smaller in height
  */
-@media screen and (max-height: 850px) {
+@media screen and (height <= 850px) {
   .modal {
     top: var(--gutter-static);
     max-height: calc(100% - var(--gutter-static) * 2);
@@ -130,7 +130,7 @@
  */
 
 .entered {
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: rgba(0 0 0 / 20%);
 
   & .modal {
     transform: translateY(0);

diff --git a/lib/MultiColumnList/MCLRenderer.css b/lib/MultiColumnList/MCLRenderer.css
@@ -1,5 +1,7 @@
 @import '../variables.css';
 
+/* stylelint-disable no-descending-specificity */
+
 .mclContainer {
   display: flex;
   flex-direction: column;
@@ -129,7 +131,7 @@
     left: 0;
     top: 0;
     background-color: var(--bg);
-    box-shadow: 3px 0 4px rgba(0, 0, 0, 0.05);
+    box-shadow: 3px 0 4px rgba(0 0 0 / 5%);
     z-index: 3;
 
     &::before {
@@ -145,7 +147,7 @@
     &.mclStickyEnd {
       right: 0;
       left: initial;
-      box-shadow: -3px 0 4px rgba(0, 0, 0, 0.05);
+      box-shadow: -3px 0 4px rgba(0 0 0 / 5%);
     }
   }
 }
@@ -155,8 +157,6 @@
 
   /* Use monospaced numbers, aka Tabular Numerals (tnum) */
   font-feature-settings: 'tnum';
-  -webkit-font-feature-settings: 'tnum';
-  -moz-font-feature-settings: 'tnum';
 }
 
 .mclHeaderContainer {
@@ -220,7 +220,7 @@
     left: 0;
     background-color: var(--bg);
     z-index: 3;
-    box-shadow: 3px 0 4px rgba(0, 0, 0, 0.05);
+    box-shadow: 3px 0 4px rgba(0 0 0 / 5%);
     border-right: 1px solid var(--color-border-p2);
 
     &::before {
@@ -234,7 +234,7 @@
     &.mclStickyEnd {
       right: 0;
       left: initial;
-      box-shadow: -3px 0 4px rgba(0, 0, 0, 0.05);
+      box-shadow: -3px 0 4px rgba(0 0 0 / 5%);
       border-left: 1px solid var(--color-border-p2);
       border-right: 0;
     }
@@ -277,9 +277,7 @@
   display: flex;
   align-items: center;
   align-self: stretch;
-  flex-shrink: 0;
-  flex-grow: 0;
-  flex-basis: auto;
+  flex: 0 0 auto;
   overflow: hidden;
   text-align: left;
   word-break: break-word;
@@ -331,12 +329,11 @@
 
 .mclContentLoading {
   display: flex;
-  justify-content: center;
-  align-content: center;
+  place-content: center center;
   height: 1.5rem;
   width: 3rem;
   padding: 0.25rem 0.5rem 0 0;
-  background-color: rgba(255, 255, 255, 0.5);
+  background-color: rgba(255 255 255 / 50%);
 }
 
 .mclEmptyMessage {
@@ -397,21 +394,22 @@
   font-weight: bold;
   display: flex;
   align-items: center;
-  justify-content: center;
-  align-content: middle;
+  place-content: center center;
 }
 
 [dir="rtl"] .mclSticky {
   left: initial;
   right: 0;
-  box-shadow: -3px 0 4px rgba(0, 0, 0, 0.05);
+  box-shadow: -3px 0 4px rgba(0 0 0 / 5%);
   border-left: 1px solid var(--color-border-p2);
 
   &.mclStickyEnd {
     left: 0;
     right: initial;
-    box-shadow: 3px 0 4px rgba(0, 0, 0, 0.05);
+    box-shadow: 3px 0 4px rgba(0 0 0 / 5%);
     border-right: 1px solid var(--color-border-p2);
     border-left: 0;
   }
 }
+
+/* stylelint-enable no-descending-specificity */
diff --git a/lib/MultiSelection/MultiSelect.css b/lib/MultiSelection/MultiSelect.css
@@ -18,7 +18,7 @@
 
 .multiSelectFocused {
   border: 1px solid var(--primary);
-  box-shadow: inset 0 0 0 2px rgba(37, 118, 195, 0.3);
+  box-shadow: inset 0 0 0 2px rgba(37 118 195 / 30%);
 }
 
 .multiSelectControlGroup {
@@ -80,7 +80,7 @@
   margin-top: 4px;
   padding: 4px;
   background-color: #fff;
-  border: 1px solid rgba(0, 0, 0, 0.2);
+  border: 1px solid rgba(0 0 0 / 20%);
   pointer-events: all;
 
   &.untethered {
@@ -108,10 +108,7 @@
   &::before {
     content: "";
     position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
+    inset: 0;
     background: transparent;
     border-radius: var(--radius);
     z-index: -1;
@@ -149,7 +146,7 @@
 }
 
 .mobileBackdrop {
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: rgba(0 0 0 / 20%);
   width: 100vw;
   height: 100vh;
   position: absolute;

diff --git a/lib/PaneHeader/PaneHeader.css b/lib/PaneHeader/PaneHeader.css
@@ -110,7 +110,7 @@ button.actionMenuToggle {
 
 /* Pull first pane icon button to the left/start */
 .paneHeaderButtonsArea.first .paneHeaderIconButton:first-child,
-[dir=rtl] .paneHeaderButtonsArea.last .paneHeaderIconButton:last-child {
+[dir="rtl"] .paneHeaderButtonsArea.last .paneHeaderIconButton:last-child {
   margin-left: calc(var(--gutter-static-two-thirds) * -1);
   margin-right: 0;
 }

diff --git a/lib/PaneSubheader/PaneSubheader.css b/lib/PaneSubheader/PaneSubheader.css
@@ -1,6 +1,6 @@
 @import '../variables.css';
 
 .subheader {
-  padding: 8px var(--gutter, 15px);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  padding: 8px var(--gutter);
+  border-bottom: 1px solid rgba(0 0 0 / 10%);
 }
diff --git a/lib/Paneset/PaneResize.css b/lib/Paneset/PaneResize.css
@@ -15,7 +15,7 @@
 .cursor {
   height: 100%;
   width: 1px;
-  border-right: 2px dashed rgba(0, 0, 0, 0.2);
+  border-right: 2px dashed rgba(0 0 0 / 20%);
   align-self: stretch;
 }
 
@@ -30,7 +30,7 @@
 
   &:hover,
   &.active {
-    background-color: rgba(0, 0, 0, 0.1);
+    background-color: rgba(0 0 0 / 10%);
   }
 }
 

diff --git a/lib/RadioButton/RadioButton.css b/lib/RadioButton/RadioButton.css
@@ -51,7 +51,7 @@
   }
 }
 
-[dir=rtl] .radioLabel {
+[dir="rtl"] .radioLabel {
   right: -1rem;
   padding-left: 0;
   padding-right: 1rem;
@@ -146,7 +146,6 @@
 
 .inputHidden:not(:checked) + .pseudoButton::after {
   opacity: 0;
-  -webkit-transform: scale(0);
   transform: scale(0);
 }
 
@@ -155,7 +154,6 @@
 
   &::after {
     opacity: 1;
-    -webkit-transform: scale(1);
     transform: scale(1);
     background-color: #000;
   }

diff --git a/lib/Select/Select.css b/lib/Select/Select.css
@@ -16,17 +16,17 @@
   font-size: var(--font-size-medium);
   line-height: var(--line-height);
 
+  & option {
+    background-color: var(--bg);
+  }
+
   &.placeholder {
     color: #888;
 
     & option {
       color: #444;
     }
   }
-
-  & option {
-    background-color: var(--bg);
-  }
 }
 
 [dir="rtl"] .selectControl {