Issue #3397115 by longwave, quietone: Upgrade eslint and prettier

core/misc/dialog/off-canvas/css/wrapper.css

@@ -40,7 +40,10 @@
 }
 /* This is a page level content wrapper that shrinks when off-canvas is open. */
 .dialog-off-canvas-main-canvas {
-  transition: padding-right 0.7s ease, padding-left 0.7s ease, padding-top 0.3s ease;
+  transition:
+    padding-right 0.7s ease,
+    padding-left 0.7s ease,
+    padding-top 0.3s ease;
 }
 @media (prefers-reduced-motion: reduce) {
   .dialog-off-canvas-main-canvas {

core/modules/ckeditor5/js/ckeditor5.admin.js

@@ -966,12 +966,12 @@
     });
     return `
       <li class="ckeditor5-toolbar-item ckeditor5-toolbar-item-${id}" role="option" tabindex="0" data-drupal-selector="ckeditor5-toolbar-button" data-id="${id}" data-label="${label}" data-divider="${
-      listType === 'divider'
-    }">
+        listType === 'divider'
+      }">
         <span class="ckeditor5-toolbar-button ckeditor5-toolbar-button-${id}">
           <span class="visually-hidden">${visuallyHiddenLabel}. ${
-      buttonInstructions[listType]
-    }</span>
+            buttonInstructions[listType]
+          }</span>
         </span>
         <span class="ckeditor5-toolbar-tooltip" aria-hidden="true">${label} </span>
       </li>

core/modules/field_ui/css/field_ui_add_field.module.css

@@ -120,7 +120,9 @@
 .field-option.hover,
 .subfield-option.hover {
   border-color: var(--color-gray);
-  box-shadow: inset 0 0 0 1px var(--color-gray), var(--details-box-shadow);
+  box-shadow:
+    inset 0 0 0 1px var(--color-gray),
+    var(--details-box-shadow);
 }
 
 .field-option:not(.selected, .error):hover .form-boolean,
@@ -132,13 +134,17 @@
 .field-option.selected,
 .subfield-option.selected {
   border-color: var(--color-blue);
-  box-shadow: inset 0 0 0 2px var(--color-blue), var(--details-box-shadow);
+  box-shadow:
+    inset 0 0 0 2px var(--color-blue),
+    var(--details-box-shadow);
 }
 
 .field-option.error,
 .subfield-option.error {
   border-color: var(--color-red);
-  box-shadow: inset 0 0 0 1px var(--color-red), var(--details-box-shadow);
+  box-shadow:
+    inset 0 0 0 1px var(--color-red),
+    var(--details-box-shadow);
 }
 
 .field-option .form-item__label.has-error,

core/package.json

@@ -63,11 +63,11 @@
     "dotenv-safe": "^8.2.0",
     "eslint": "^8.44.0",
     "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-config-prettier": "^8.4.0",
+    "eslint-config-prettier": "^9.0.0",
     "eslint-formatter-gitlab": "^5.0.0",
     "eslint-plugin-import": "^2.25.4",
     "eslint-plugin-jquery": "^1.5.1",
-    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-yml": "^1.8.0",
     "glob": "^8.0.3",
     "jquery": "~3.7.0",
@@ -86,7 +86,7 @@
     "postcss-preset-env": "^9.2.0",
     "postcss-pxtorem": "^6.0.0",
     "postcss-url": "^10.1.3",
-    "prettier": "^2.1.2",
+    "prettier": "^3.0.3",
     "shepherd.js": "~10.0.1",
     "sortablejs": "1.15.x",
     "stylelint": "^15.10.1",

core/themes/claro/css/components/details.css

@@ -185,7 +185,9 @@ td .claro-details {
   .claro-details__summary::before {
     width: 0.5625rem;
     height: 0.5625rem;
-    transition: transform var(--details-transform-transition-duration) ease-in 0s, margin var(--details-transform-transition-duration) ease-in 0s;
+    transition:
+      transform var(--details-transform-transition-duration) ease-in 0s,
+      margin var(--details-transform-transition-duration) ease-in 0s;
     transform: rotate(135deg); /* LTR */
     border-top: 0.125rem solid;
     border-right: 0.125rem solid;

core/themes/claro/css/components/dropbutton.css

@@ -310,7 +310,9 @@
 
 .dropbutton__item:first-of-type > *:focus:hover,
 .dropbutton__item:first-of-type > .button:focus:hover {
-  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus);
+  box-shadow:
+    0 0 0 2px var(--color-white),
+    0 0 0 5px var(--color-focus);
 }
 
 .dropbutton__item:first-of-type > *:focus {
@@ -443,5 +445,7 @@
 
 .dropbutton__item:first-of-type ~ .dropbutton__item > *:focus {
   border-color: var(--color-focus) !important; /* 1 */
-  box-shadow: inset 0 0 0 1px var(--color-focus), 0 0 0 1px var(--color-focus);
+  box-shadow:
+    inset 0 0 0 1px var(--color-focus),
+    0 0 0 1px var(--color-focus);
 }

core/themes/claro/css/components/form--checkbox-radio.css

@@ -82,7 +82,10 @@
 
 .form-boolean:focus:active,
 .form-boolean:focus:hover {
-  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 1px var(--input-fg-color);
+  box-shadow:
+    0 0 0 2px var(--color-white),
+    0 0 0 5px var(--color-focus),
+    inset 0 0 0 1px var(--input-fg-color);
 }
 
 @media (forced-colors: active) {
@@ -105,12 +108,18 @@
 }
 
 .form-boolean--type-radio:checked:focus {
-  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 1px var(--input--focus-border-color);
+  box-shadow:
+    0 0 0 2px var(--color-white),
+    0 0 0 5px var(--color-focus),
+    inset 0 0 0 1px var(--input--focus-border-color);
 }
 
 .form-boolean--type-radio:checked:focus:active,
 .form-boolean--type-radio:checked:focus:hover {
-  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 1px var(--input-fg-color);
+  box-shadow:
+    0 0 0 2px var(--color-white),
+    0 0 0 5px var(--color-focus),
+    inset 0 0 0 1px var(--input-fg-color);
 }
 
 .form-boolean--type-radio:checked:active,
@@ -150,7 +159,10 @@
 .form-boolean.error:focus,
 .form-boolean.error:focus:active,
 .form-boolean.error:focus:hover {
-  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 1px var(--input--error-border-color);
+  box-shadow:
+    0 0 0 2px var(--color-white),
+    0 0 0 5px var(--color-focus),
+    inset 0 0 0 1px var(--input--error-border-color);
 }
 
 .form-boolean.error:checked:active,
@@ -172,7 +184,10 @@
 }
 
 .form-boolean--type-radio.error:checked:focus {
-  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 1px var(--input--error-border-color);
+  box-shadow:
+    0 0 0 2px var(--color-white),
+    0 0 0 5px var(--color-focus),
+    inset 0 0 0 1px var(--input--error-border-color);
 }
 
 /**

core/themes/claro/css/components/form--password-confirm.css

@@ -47,7 +47,9 @@
 
 .js .password-confirm__confirm {
   max-height: 10rem;
-  transition: max-height var(--speed-transition) ease-in-out, margin var(--speed-transition) ease-in-out;
+  transition:
+    max-height var(--speed-transition) ease-in-out,
+    margin var(--speed-transition) ease-in-out;
 }
 
 @media screen and (prefers-reduced-motion: reduce) {

core/themes/claro/css/components/form--text.css

@@ -88,11 +88,16 @@
 }
 
 .form-element:focus {
-  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus);
+  box-shadow:
+    0 0 0 2px var(--color-white),
+    0 0 0 5px var(--color-focus);
 }
 
 .form-element:hover:focus {
-  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 var(--input-border-size) var(--input--hover-border-color);
+  box-shadow:
+    0 0 0 2px var(--color-white),
+    0 0 0 5px var(--color-focus),
+    inset 0 0 0 var(--input-border-size) var(--input--hover-border-color);
 }
 
 .form-element.error {
@@ -105,7 +110,9 @@
 }
 
 .form-element.error:hover:focus {
-  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus);
+  box-shadow:
+    0 0 0 2px var(--color-white),
+    0 0 0 5px var(--color-focus);
 }
 
 .form-element--type-textarea.error + .cke {

core/themes/claro/css/components/icon-link.css

@@ -36,7 +36,9 @@
 }
 
 .icon-link:focus {
-  box-shadow: 0 0 0 1.5px var(--color-white), 0 0 0 3.5px var(--color-focus);
+  box-shadow:
+    0 0 0 1.5px var(--color-white),
+    0 0 0 3.5px var(--color-focus);
 }
 
 .icon-link:active,
@@ -46,5 +48,7 @@
 }
 
 .icon-link--small:focus {
-  box-shadow: 0 0 0 1px var(--color-white), 0 0 0 3px var(--color-focus);
+  box-shadow:
+    0 0 0 1px var(--color-white),
+    0 0 0 3px var(--color-focus);
 }

core/themes/claro/css/components/image-preview.css

@@ -25,7 +25,11 @@
 
 .image-preview img {
   background-image: linear-gradient(-45deg, var(--color-pattern) 25%, transparent 26%), linear-gradient(-45deg, var(--color-pattern) 25%, transparent 26%), linear-gradient(135deg, var(--color-pattern) 25%, transparent 26%), linear-gradient(135deg, var(--color-pattern) 25%, transparent 26%);
-  background-position: 0 0, var(--size-pattern-square) var(--size-pattern-square), var(--size-pattern-square) var(--size-pattern-square), 0 0;
+  background-position:
+    0 0,
+    var(--size-pattern-square) var(--size-pattern-square),
+    var(--size-pattern-square) var(--size-pattern-square),
+    0 0;
   background-size: calc(var(--size-pattern-square) * 2) calc(var(--size-pattern-square) * 2);
 }
 

core/themes/claro/css/components/tabs.css

@@ -245,7 +245,9 @@
     border: none;
     border-radius: var(--tabs-border-radius-size) var(--tabs-border-radius-size) 0 0;
     outline: 2px dotted transparent;
-    box-shadow: 0 0 0 2px var(--color-white), 0 0 0 calc(var(--tabs--focus-height) + 2px) var(--color-focus);
+    box-shadow:
+      0 0 0 2px var(--color-white),
+      0 0 0 calc(var(--tabs--focus-height) + 2px) var(--color-focus);
   }
   .is-horizontal .tabs__link:hover {
     color: var(--color-absolutezero-hover);
@@ -266,6 +268,8 @@
     display: none;
   }
   .is-horizontal .tabs--primary .tabs__link:focus {
-    box-shadow: 0 0 0 2px var(--color-gray-050), 0 0 0 calc(var(--tabs--focus-height) + 2px) var(--color-focus);
+    box-shadow:
+      0 0 0 2px var(--color-gray-050),
+      0 0 0 calc(var(--tabs--focus-height) + 2px) var(--color-focus);
   }
 }

core/themes/claro/css/theme/media-library.css

@@ -245,7 +245,9 @@
 /* Adjust the focus border on this element so it is not too close to buttons. */
 
 .media-library-add-form__added-media:focus {
-  box-shadow: 0 0 0 calc(var(--focus-border-offset-size) + 2px) var(--color-white), 0 0 0 calc(var(--focus-border-size) + var(--focus-border-offset-size) + 2px) var(--color-focus);
+  box-shadow:
+    0 0 0 calc(var(--focus-border-offset-size) + 2px) var(--color-white),
+    0 0 0 calc(var(--focus-border-size) + var(--focus-border-offset-size) + 2px) var(--color-focus);
 }
 
 .media-library-add-form .file-upload-help {
@@ -462,7 +464,10 @@
   width: calc(100% - 1rem);
   height: calc(100% - 1rem);
   content: "";
-  transition: border-color 0.2s, color 0.2s, background 0.2s;
+  transition:
+    border-color 0.2s,
+    color 0.2s,
+    background 0.2s;
   pointer-events: none;
   border: 1px solid #dbdbdb;
   border-radius: 2px;

core/themes/claro/css/theme/tour.theme.css

@@ -21,7 +21,9 @@
 
 .shepherd-element:focus {
   outline: 2px dotted transparent;
-  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus);
+  box-shadow:
+    0 0 0 2px var(--color-white),
+    0 0 0 5px var(--color-focus);
 }
 
 /* Mobile */
@@ -96,5 +98,7 @@
 
 .shepherd-content *:focus {
   outline: 2px dotted transparent;
-  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus);
+  box-shadow:
+    0 0 0 2px var(--color-white),
+    0 0 0 5px var(--color-focus);
 }

core/themes/claro/css/theme/views_ui.admin.theme.css

@@ -43,7 +43,9 @@
 .views-admin a.icon {
   border: 1px solid #ddd;
   border-radius: 0.25rem;
-  background: linear-gradient(-90deg, #fff 0, #e8e8e8 100%) no-repeat, repeat-y;
+  background:
+    linear-gradient(-90deg, #fff 0, #e8e8e8 100%) no-repeat,
+    repeat-y;
   box-shadow: 0 0 0 rgba(0, 0, 0, 0.3333) inset;
 }
 
@@ -96,11 +98,15 @@
 }
 
 .views-admin a.icon.delete {
-  background-position: center -52px, left top; /* LTR */
+  background-position:
+    center -52px,
+    left top; /* LTR */
 }
 
 [dir="rtl"] .views-admin a.icon.delete {
-  background-position: center -52px, right top;
+  background-position:
+    center -52px,
+    right top;
 }
 
 .views-admin .icon.rearrange {
@@ -108,11 +114,15 @@
 }
 
 .views-admin a.icon.rearrange {
-  background-position: center -111px, left top; /* LTR */
+  background-position:
+    center -111px,
+    left top; /* LTR */
 }
 
 [dir="rtl"] .views-admin a.icon.rearrange {
-  background-position: center -111px, right top;
+  background-position:
+    center -111px,
+    right top;
 }
 
 details.box-padding {

core/themes/olivero/css/base/fonts.css

@@ -38,7 +38,10 @@
 
 @font-face {
   font-family: Lora;
-  src: local("Lora Regular"), local("Lora-Regular"), url("../../fonts/lora/lora-v14-latin-regular.woff2") format("woff2");
+  src:
+    local("Lora Regular"),
+    local("Lora-Regular"),
+    url("../../fonts/lora/lora-v14-latin-regular.woff2") format("woff2");
   font-weight: 400;
   font-style: normal;
   font-display: swap;
@@ -48,7 +51,10 @@
 
 @font-face {
   font-family: Lora;
-  src: local("Lora Italic"), local("Lora-Italic"), url("../../fonts/lora/lora-v14-latin-italic.woff2") format("woff2");
+  src:
+    local("Lora Italic"),
+    local("Lora-Italic"),
+    url("../../fonts/lora/lora-v14-latin-italic.woff2") format("woff2");
   font-weight: 400;
   font-style: italic;
   font-display: swap;
@@ -58,7 +64,10 @@
 
 @font-face {
   font-family: Lora;
-  src: local("Lora Bold"), local("Lora-Bold"), url("../../fonts/lora/lora-v14-latin-700.woff2") format("woff2");
+  src:
+    local("Lora Bold"),
+    local("Lora-Bold"),
+    url("../../fonts/lora/lora-v14-latin-700.woff2") format("woff2");
   font-weight: 700;
   font-style: normal;
   font-display: swap;

core/themes/olivero/css/components/form-boolean.css

@@ -102,12 +102,16 @@ input[type="radio"]:focus {
   border-width: 2px;
   border-color: var(--color--primary-50);
   outline-color: transparent;
-  box-shadow: 0 0 0 2px white, 0 0 0 4px var(--color--primary-50);
+  box-shadow:
+    0 0 0 2px white,
+    0 0 0 4px var(--color--primary-50);
 }
 
 input.error[type="radio"]:focus {
   outline-color: transparent;
-  box-shadow: 0 0 0 2px white, 0 0 0 4px var(--color--red);
+  box-shadow:
+    0 0 0 2px white,
+    0 0 0 4px var(--color--red);
 }
 
 .form-type-boolean {

core/themes/olivero/css/components/header-navigation.css

@@ -80,7 +80,9 @@
  */
 
 html.js .header-nav {
-  transition: visibility 0.2s, transform 0.2s;
+  transition:
+    visibility 0.2s,
+    transform 0.2s;
 }
 
 @media (min-width: 75rem) {
@@ -110,7 +112,9 @@ html.js .header-nav {
     overflow: auto;
     max-width: calc((7 * (var(--grid-col-width) + var(--grid-gap))));
     padding-inline-end: var(--sp);
-    transition: transform 0.2s, visibility 0.2s;
+    transition:
+      transform 0.2s,
+      visibility 0.2s;
     border-top-width: calc(var(--drupal-displace-offset-top, 0px) + var(--sp11));
   }
 }

core/themes/olivero/css/components/navigation/nav-primary-wide.css

@@ -216,6 +216,9 @@
 @media (min-width: 75rem) {
   html.js body:not(.is-always-mobile-nav) .primary-nav__menu--level-2,
   html.js body:not(.is-always-mobile-nav) .primary-nav__menu-🥕 {
-    transition: visibility 0.2s, transform 0.2s, opacity 0.2s;
+    transition:
+      visibility 0.2s,
+      transform 0.2s,
+      opacity 0.2s;
   }
 }

core/themes/olivero/css/components/navigation/nav-primary.css

@@ -158,7 +158,10 @@
   margin-block: 0;
   margin-inline-start: calc(-1 * var(--sp));
   padding-inline-start: var(--sp2-5);
-  transition: opacity 0.2s, visibility 0.2s, max-height 0.2s;
+  transition:
+    opacity 0.2s,
+    visibility 0.2s,
+    max-height 0.2s;
   opacity: 0;
   border-inline-start: solid var(--sp) var(--color--primary-50);
 }

core/themes/olivero/css/components/navigation/nav-secondary.css

@@ -59,7 +59,9 @@
   width: 100%;
   height: 0;
   content: "";
-  transition: opacity 0.2s, transform 0.2s;
+  transition:
+    opacity 0.2s,
+    transform 0.2s;
   transform: translateY(0.3125rem);
   opacity: 0;
   /* Intentionally not using CSS logical properties. */

core/themes/olivero/css/components/node.css

@@ -39,7 +39,9 @@
 
 .node__title a {
   padding-block-end: 0.1875rem;
-  transition: background-size 0.2s, color 0.2s;
+  transition:
+    background-size 0.2s,
+    color 0.2s;
   -webkit-text-decoration: none;
   text-decoration: none;
   color: var(--color-text-neutral-loud);

core/themes/olivero/css/components/search-results.css

@@ -35,7 +35,9 @@
 
 .search-result__title a {
   padding-block-end: 0.1875rem;
-  transition: background-size 0.2s, color 0.2s;
+  transition:
+    background-size 0.2s,
+    color 0.2s;
   -webkit-text-decoration: none;
   text-decoration: none;
   background-color: transparent;

core/themes/olivero/css/components/site-header.css

@@ -72,7 +72,10 @@
 
 @media (min-width: 75rem) {
   html.js body:not(.is-always-mobile-nav) .site-header__inner {
-    transition: opacity 0.3s, transform 0.3s, box-shadow 0.3s;
+    transition:
+      opacity 0.3s,
+      transform 0.3s,
+      box-shadow 0.3s;
   }
 }
 

core/themes/olivero/css/components/tabs.css

@@ -166,7 +166,10 @@ html:not(.js) .tabs__trigger {
   inset-inline-start: 0;
   display: block;
   width: 100%;
-  transition: transform var(--tabs-transition-duration), opacity var(--tabs-transition-duration), top var(--tabs-transition-duration);
+  transition:
+    transform var(--tabs-transition-duration),
+    opacity var(--tabs-transition-duration),
+    top var(--tabs-transition-duration);
   border-block-start: solid 2px var(--tabs-highlight-color);
 }
 .tabs__trigger-icon > span:nth-child(1) {