fix(stylelint): Bump to v16 (#4058)

Author: greg-in-a-box

package.json

@@ -64,7 +64,7 @@
         "lint": "npm-run-all lint:*",
         "lint:js": "eslint --max-warnings=0 .",
         "lint:ts": "tsc",
-        "lint:css": "stylelint \"src/**/*.scss\" --syntax scss",
+        "lint:css": "stylelint \"src/**/*.scss\"",
         "prebuild:es": "npm-run-all copy:styles ts:defs copy:flow",
         "release": "yarn release:beta",
         "release:beta": "DIST=beta BRANCH=master ./scripts/release.sh",
@@ -128,7 +128,7 @@
         "@box/box-ai-content-answers": "^0.113.0",
         "@box/cldr-data": "^34.2.0",
         "@box/combobox-with-api": "^0.28.4",
-        "@box/frontend": "^10.0.1",
+        "@box/frontend": "^11.0.0",
         "@box/item-icon": "^0.9.83",
         "@box/languages": "^1.0.0",
         "@box/metadata-editor": "^0.97.3",
@@ -241,7 +241,7 @@
         "msw-storybook-addon": "^2.0.2",
         "npm-run-all": "^4.1.5",
         "pikaday": "^1.8.0",
-        "postcss": "^8.4.31",
+        "postcss": "^8.5.3",
         "postcss-loader": "^8.1.1",
         "prettier": "^3.2.5",
         "prettier-eslint-cli": "^5.0.0",
@@ -281,10 +281,10 @@
         "storybook-react-intl": "^3.1.1",
         "string-replace-loader": "^3.1.0",
         "styled-components": "5.0.0",
-        "stylelint": "^12.0.0",
-        "stylelint-config-rational-order": "^0.1.2",
-        "stylelint-config-standard": "^19.0.0",
-        "stylelint-order": "^3.1.1",
+        "stylelint": "^16.18.0",
+        "stylelint-config-standard": "^38.0.0",
+        "stylelint-config-standard-scss": "^14.0.0",
+        "stylelint-order": "^6.0.4",
         "tabbable": "^1.1.3",
         "ts-loader": "^6.2.1",
         "typescript": "5.2.2",

scripts/lint-staged.config.js

@@ -3,6 +3,6 @@ module.exports = {
     '*.md': ['prettier --write --parser=markdown', 'git add'],
     '*.json': ['prettier --write --parser=json', 'git add'],
     '*.html': ['prettier --write --parser=html', 'git add'],
-    '*.scss': ['prettier --write --parser=scss', 'stylelint --syntax scss --fix', 'git add'],
-    '*.css': ['prettier --write --parser=css', 'stylelint --syntax css --fix', 'git add'],
+    '*.scss': ['prettier --write --parser=scss', 'stylelint --fix', 'git add'],
+    '*.css': ['prettier --write --parser=css', 'stylelint --fix', 'git add'],
 };

src/components/badgeable/Badgeable.scss

@@ -3,8 +3,7 @@
 
 $badgeable-position-offset: 1px;
 $badgeable-icon-size: 14px;
-
-$badgeable-position: ($badgeable-icon-size * .5);
+$badgeable-position: ($badgeable-icon-size * 0.5);
 
 %badge {
     position: absolute;

src/components/category-selector/CategorySelector.scss

@@ -45,7 +45,9 @@
 
             &:focus {
                 border-color: $bdl-box-blue;
-                box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8), 0 1px 2px rgba(0, 0, 0, .1);
+                box-shadow:
+                    inset 0 0 0 1px rgb(255 255 255 / 80%),
+                    0 1px 2px rgb(0 0 0 / 10%);
             }
         }
     }

src/components/date-picker/_pikaday.scss

@@ -22,7 +22,7 @@
 
     &.is-bound {
         position: absolute;
-        box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .1);
+        box-shadow: 0 2px 6px 0 rgb(0 0 0 / 10%);
 
         &.bottom-aligned {
             margin-top: 5px;
@@ -120,7 +120,7 @@
     &.bdl-is-disabled,
     &.is-disabled {
         &::before {
-            opacity: .2;
+            opacity: 0.2;
         }
     }
 }
@@ -142,7 +142,7 @@
     &.bdl-is-disabled,
     &.is-disabled {
         &::after {
-            opacity: .2;
+            opacity: 0.2;
         }
     }
 }
@@ -165,7 +165,7 @@
 
     th,
     td {
-        width: 14.285714285714286%;
+        width: 14.2857%;
     }
 
     > thead > tr {
@@ -203,6 +203,6 @@
 .bdl-is-disabled .pika-button,
 .is-outside-current-month .pika-button {
     cursor: default;
-    opacity: .3;
+    opacity: 0.3;
     pointer-events: none;
 }

src/components/dropdown-menu/DropdownMenu.scss

@@ -23,12 +23,10 @@
     .bdl-DropdownMenu--responsive {
         &.dropdown-menu-enabled {
             position: fixed;
-            top: 0;
-            right: 0;
-            bottom: 0;
-            left: 0;
+            inset: 0;
             margin-top: 0;
             margin-bottom: $bdl-header-height;
+
             // cancels out the tether inline styling without having to set enabled=false
             transform: none !important;
         }
@@ -49,16 +47,13 @@
                 left: 0;
                 display: flex;
                 height: $bdl-header-height;
-                padding: ($bdl-grid-unit * 3) ($bdl-grid-unit * 3);
+                padding: ($bdl-grid-unit * 3);
                 background-color: $white;
                 box-shadow: $bdl-header-box-shadow;
             }
 
             .submenu:not(.is-hidden) {
-                top: 100%;
-                right: 0;
-                bottom: auto;
-                left: auto;
+                inset: 100% 0 auto auto;
 
                 &.is-right-bottom-aligned {
                     top: auto;

src/components/flyout/Flyout.scss

@@ -34,10 +34,7 @@
 
         .bdl-Overlay > .overlay {
             position: fixed;
-            top: 0;
-            right: 0;
-            bottom: 0;
-            left: 0;
+            inset: 0;
             margin: 0;
             padding: 0;
             background-color: $white;

src/components/grid-view/GridViewSlot.scss

@@ -11,7 +11,7 @@
 .bdl-GridViewSlot-content {
     height: 100%;
     border: 1px solid $bdl-gray-10;
-    box-shadow: 0 1px 5px rgba(50, 50, 50, .1);
+    box-shadow: 0 1px 5px rgb(50 50 50 / 10%);
 
     &:hover,
     &:active,

src/components/guide-tooltip/GuideTooltip.scss

@@ -26,7 +26,7 @@ $bdl-guide-tooltip-max-width: 408px;
 .bdl-GuideTooltip-image {
     margin-right: -($bdl-grid-unit * 6);
     margin-left: -($bdl-grid-unit * 6);
-    padding: ($bdl-grid-unit * 4) 0 ($bdl-grid-unit * 5) 0;
+    padding: ($bdl-grid-unit * 4) 0 ($bdl-grid-unit * 5);
     text-align: center;
 
     img {
@@ -48,7 +48,7 @@ $bdl-guide-tooltip-max-width: 408px;
 
 .bdl-GuideTooltip-title,
 .bdl-GuideTooltip-body {
-    letter-spacing: .3px;
+    letter-spacing: 0.3px;
 }
 
 button.bdl-GuideTooltip-previousButton,

src/components/label-pill/LabelPill.scss

@@ -50,7 +50,7 @@
     top: 2px;
 
     path {
-        fill: currentColor;
+        fill: currentcolor;
     }
 }