[deps] Update StyleLint to v15.11

Info at https://stylelint.io/migration-guide/to-15
Our custom rule needed to be updated to reflect a small change.
All changes are separated into patches for ease of review.
More work is need for a v16 migration so separating it to reduce
risks of breaking.

Bug: none
Change-Id: I616829fba25b06bf8febe8390074046ad582f531
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6126881
Commit-Queue: Nikolay Vitkov <[email protected]>
Reviewed-by: Benedikt Meurer <[email protected]>

Author: Lightning00Blade

.stylelintrc.json

@@ -11,7 +11,6 @@
     "comment-empty-line-before": null,
     "declaration-no-important": true,
     "color-named": "never",
-    "max-empty-lines": 1,
     "selector-type-no-unknown": [
       true,
       {
@@ -21,7 +20,6 @@
         ]
       }
     ],
-    "max-line-length": null,
     "selector-class-pattern": null,
     "keyframes-name-pattern": null,
     "selector-no-vendor-prefix": null,

front_end/entrypoints/inspector_main/nodeIcon.css

@@ -7,6 +7,7 @@
 .node-icon {
   width: 28px;
   height: 26px;
+  /* stylelint-disable-next-line custom-property-pattern */
   background-image: var(--image-file-nodeIcon);
   background-size: 17px 17px;
   background-repeat: no-repeat;

front_end/panels/accessibility/axBreadcrumbs.css

@@ -54,7 +54,7 @@
   display: inline-block;
 }
 
-.ax-breadcrumbs .ax-node:not(.parent):not(.children-unloaded)::before {
+.ax-breadcrumbs .ax-node:not(.parent, .children-unloaded)::before {
   background-color: transparent;
 }
 

front_end/panels/ai_assistance/components/chatView.css

@@ -512,8 +512,7 @@ button.link {
 }
 
 main {
-  overflow-x: hidden;
-  overflow-y: auto;
+  overflow: hidden auto;
   display: flex;
   flex-direction: column;
   align-items: center;

front_end/panels/animation/animationTimeline.css

@@ -40,12 +40,12 @@
 }
 
 path.animation-keyframe {
-  fill-opacity: 0.2;
+  fill-opacity: 20%;
 }
 
 .animation-node-selected path.animation-keyframe,
 svg.animation-ui g:first-child:hover path.animation-keyframe {
-  fill-opacity: 0.4;
+  fill-opacity: 40%;
 }
 
 line.animation-line {
@@ -228,10 +228,7 @@ circle.animation-keyframe-point:active {
 
 svg.animation-timeline-grid {
   position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
+  inset: 0;
   width: 100%;
   height: 100%;
 }
@@ -282,7 +279,7 @@ svg.animation-ui path:focus-visible {
 
 .animation-keyframe-step line {
   stroke-width: 2;
-  stroke-opacity: 0.3;
+  stroke-opacity: 30%;
 }
 
 text.animation-timeline-grid-label {
@@ -305,6 +302,7 @@ text.animation-timeline-grid-label {
   position: relative;
 
   & .screenshot-arrow {
+    /* stylelint-disable-next-line custom-property-pattern */
     background-image: var(--image-file-popoverArrows);
     background-position: 0 76px;
     width: 19px;
@@ -360,9 +358,8 @@ text.animation-timeline-grid-label {
 .animation-timeline-rows,
 .animation-timeline-rows-hint {
   flex-grow: 1;
-  overflow-y: auto;
+  overflow: hidden auto;
   z-index: 1;
-  overflow-x: hidden;
 }
 
 .animation-timeline-rows-hint {
@@ -537,7 +534,7 @@ text.animation-timeline-grid-label {
   outline-offset: 2px;
 }
 
-.animation-playback-rate-button:not(.selected):not([disabled]):hover {
+.animation-playback-rate-button:not(.selected, [disabled]):hover {
   background: var(--sys-color-state-hover-on-subtle);
 }
 

front_end/panels/application/resourcesPanel.css

@@ -67,8 +67,7 @@
 
 .storage-view.query {
   padding: 2px 0;
-  overflow-y: overlay;
-  overflow-x: hidden;
+  overflow: hidden overlay;
 }
 
 .storage-view .filter-bar {

front_end/panels/console/consolePinPane.css

@@ -69,6 +69,6 @@
 }
 
 .console-pin:focus-within .console-pin-preview,
-.console-pin-name:not(:focus-within):not(:hover) {
+.console-pin-name:not(:focus-within, :hover) {
   opacity: 60%;
 }

front_end/panels/console/consoleView.css

@@ -246,7 +246,7 @@
   }
 }
 
-.console-message-wrapper:not(.console-error-level):not(.console-warning-level) {
+.console-message-wrapper:not(.console-error-level, .console-warning-level) {
   & .console-message::before,
   & .console-user-command::before {
     width: calc(100% - 25px);
@@ -263,24 +263,24 @@
   }
 }
 
-.console-message-wrapper.console-adjacent-user-command-result:not(.console-error-level):not(.console-warning-level) {
+.console-message-wrapper.console-adjacent-user-command-result:not(.console-error-level, .console-warning-level) {
   border-top-width: 0;
 }
 
 .console-message-wrapper:focus + .console-message-wrapper {
   border-top-color: transparent;
 }
 
-.console-message-wrapper.console-adjacent-user-command-result:not(.console-error-level):not(.console-warning-level):focus {
+.console-message-wrapper.console-adjacent-user-command-result:not(.console-error-level, .console-warning-level):focus {
   border-top-width: 1px;
 }
 
-.console-message-wrapper.console-adjacent-user-command-result:not(.console-error-level):not(.console-warning-level):focus .console-message {
+.console-message-wrapper.console-adjacent-user-command-result:not(.console-error-level, .console-warning-level):focus .console-message {
   padding-top: 2px;
   min-height: 16px;
 }
 
-.console-message-wrapper.console-adjacent-user-command-result:not(.console-error-level):not(.console-warning-level):focus .command-result-icon {
+.console-message-wrapper.console-adjacent-user-command-result:not(.console-error-level, .console-warning-level):focus .command-result-icon {
   top: 3px;
 }
 

front_end/panels/css_overview/cssOverviewCompletedView.css

@@ -135,6 +135,7 @@
   top: 0;
   width: 26px;
   height: 26px;
+  /* stylelint-disable-next-line custom-property-pattern */
   background-image: var(--image-file-cssoverview_icons_2x);
   background-size: 104px 26px;
 }
@@ -247,12 +248,12 @@
 
   &:hover .details,
   &:focus .details {
-    color: color-mix(in sRGB, var(--sys-color-primary), var(--sys-color-state-hover-on-prominent) 6%);
+    color: color-mix(in srgb, var(--sys-color-primary), var(--sys-color-state-hover-on-prominent) 6%);
   }
 
   &:hover .bar,
   &:focus .bar {
-    background-color: color-mix(in sRGB, var(--sys-color-primary-bright), var(--sys-color-state-hover-on-prominent) 6%);
+    background-color: color-mix(in srgb, var(--sys-color-primary-bright), var(--sys-color-state-hover-on-prominent) 6%);
     color: var(--sys-color-on-primary);
   }
 }

front_end/panels/elements/elementsTreeOutline.css

@@ -248,7 +248,7 @@ select {
 }
 /* DOM update highlight */
 @keyframes dom-update-highlight-animation {
-  from {
+  0% {
     background-color: var(--sys-color-token-tag);
     color: var(--sys-color-cdt-base-container);
   }
@@ -257,13 +257,13 @@ select {
     background-color: var(--sys-color-token-meta);
   }
 
-  to {
+  100% {
     background-color: inherit;
   }
 }
 
 @keyframes dom-update-highlight-animation-dark {
-  from {
+  0% {
     background-color: var(--sys-color-token-tag);
     color: var(--sys-color-cdt-base-container);
   }
@@ -273,7 +273,7 @@ select {
     color: inherit;
   }
 
-  to {
+  100% {
     background-color: inherit;
   }
 }
@@ -335,7 +335,7 @@ li.selected:not(.always-parent) + ol.children {
 }
 
 li.hovered:not(.always-parent) + ol.children:not(.shadow-root) {
-  --override-indentation-level-border-color: color-mix(in sRGB, var(--ref-palette-neutral0) 10%, transparent);
+  --override-indentation-level-border-color: color-mix(in srgb, var(--ref-palette-neutral0) 10%, transparent);
 }
 
 .elements-tree-outline ol.shadow-root {
@@ -366,6 +366,7 @@ li.hovered:not(.always-parent) + ol.children:not(.shadow-root) {
 }
 
 .violating-element {
+  /* stylelint-disable-next-line custom-property-pattern */
   background-image: var(--image-file-errorWave);
   background-repeat: repeat-x;
   background-position: bottom;