chore: fix linting issues (#3581)

src/components/calcite-flow/calcite-flow.scss

@@ -1,21 +1,21 @@
 :host {
   @extend %component-host;
-  @apply flex 
+  @apply flex
     flex-auto
-    items-stretch 
-    bg-transparent 
+    items-stretch
+    bg-transparent
     w-full
-    overflow-hidden 
+    overflow-hidden
     relative;
 
   .frame {
     @apply flex
       flex-auto
-      items-stretch 
-      w-full 
-      p-0 
-      m-0 
-      flex-col 
+      items-stretch
+      w-full
+      p-0
+      m-0
+      flex-col
       relative;
   }
 

src/components/calcite-handle/calcite-handle.scss

@@ -3,12 +3,12 @@
 }
 
 .handle {
-  @apply flex 
-    items-center 
-    self-stretch 
+  @apply flex
+    items-center
+    self-stretch
     justify-center
-    bg-transparent 
-    border-none 
+    bg-transparent
+    border-none
     cursor-move
     focus-base;
   color: theme("borderColor.color.3");

src/components/calcite-input-message/calcite-input-message.scss

@@ -12,24 +12,11 @@
 }
 
 :host {
-  @apply flex
-    items-center
-    w-full
-    box-border
-    text-color-1
-    font-medium
-    invisible
-    h-0
-    pointer-events-none
-    opacity-0
-    transition-default;
+  @apply flex items-center w-full box-border text-color-1 font-medium invisible h-0 pointer-events-none opacity-0 transition-default;
 }
 
 :host([active]) {
-  @apply h-auto
-    visible
-    opacity-100
-    transition-default;
+  @apply h-auto visible opacity-100 transition-default;
 }
 
 :host([active][scale="m"]),
@@ -38,11 +25,7 @@
 }
 
 .calcite-input-message-icon {
-  @apply inline-flex
-    flex-shrink-0
-    pointer-events-none
-    mr-2
-    transition-default;
+  @apply inline-flex flex-shrink-0 pointer-events-none mr-2 transition-default;
 }
 
 .calcite-input-message-icon.calcite--rtl {
@@ -67,8 +50,7 @@
 
 // Validation Text
 :host([status][active]) {
-  @apply text-color-1 
-    font-medium;
+  @apply text-color-1 font-medium;
 }
 
 :host([status][active][scale="s"]) {
@@ -81,6 +63,5 @@
 }
 
 :host([status][active][scale="l"]) {
-  @apply text--1h
-    mt-1;
+  @apply text--1h mt-1;
 }

src/components/calcite-panel/calcite-panel.scss

@@ -10,11 +10,7 @@
 
 :host {
   @extend %component-host;
-  @apply flex
-    flex-auto
-    overflow-hidden
-    relative
-    w-full;
+  @apply flex flex-auto overflow-hidden relative w-full;
 
   --calcite-min-header-height: calc(var(--calcite-icon-size) * 3);
   --calcite-panel-max-height: unset;
@@ -26,14 +22,7 @@
 @import "../../assets/styles/header";
 
 .container {
-  @apply flex
-    flex-auto
-    flex-col
-    items-stretch
-    bg-background
-    w-full
-    p-0
-    m-0;
+  @apply flex flex-auto flex-col items-stretch bg-background w-full p-0 m-0;
 
   max-height: var(--calcite-panel-max-height);
   width: var(--calcite-panel-width);
@@ -169,7 +158,7 @@
 }
 
 .content-container {
-  @apply items-stretch 
+  @apply items-stretch
   bg-background
   flex
   flex-auto

src/components/calcite-pick-list/shared-list-tests.ts

@@ -1,14 +1,13 @@
 import { E2EElement, E2EPage, newE2EPage } from "@stencil/core/testing";
-import { JSEvalable } from "puppeteer";
+import { focusable } from "../../tests/commonTests";
 import { html } from "../../tests/utils";
 import { CSS as PICK_LIST_ITEM_CSS } from "../calcite-pick-list-item/resources";
-import { focusable } from "../../tests/commonTests";
 
 type ListType = "pick" | "value";
 type ListElement = HTMLCalcitePickListElement | HTMLCalciteValueListElement;
 
 export function keyboardNavigation(listType: ListType): void {
-  const getFocusedItemValue = (page: E2EPage): ReturnType<JSEvalable["evaluate"]> =>
+  const getFocusedItemValue = (page: E2EPage): ReturnType<E2EPage["evaluate"]> =>
     page.evaluate(
       () => (document.activeElement as HTMLCalcitePickListItemElement | HTMLCalciteValueListItemElement)?.value ?? null
     );
@@ -545,7 +544,7 @@ export function itemRemoval(listType: ListType): void {
 
     await page.$eval(
       `calcite-${listType}-list-item`,
-      (item: ListElement, listType, selector) => {
+      (item: ListElement, listType, selector: string) => {
         listType === "pick"
           ? item.shadowRoot.querySelector<HTMLElement>(selector).click()
           : item.shadowRoot

src/components/calcite-select/calcite-select.scss

@@ -118,7 +118,7 @@ select:disabled {
 
 .icon-container.calcite--rtl {
   @apply border-l
-    border-r-0 
+    border-r-0
     left-0;
   right: unset;
 }

src/components/calcite-shell-center-row/calcite-shell-center-row.scss

@@ -1,16 +1,16 @@
 :host {
   @extend %component-host;
-  @apply flex 
-    flex-auto 
-    overflow-hidden 
+  @apply flex
+    flex-auto
+    overflow-hidden
     bg-transparent;
 }
 
 .content {
-  @apply flex 
-    h-full 
-    m-0 
-    overflow-hidden 
+  @apply flex
+    h-full
+    m-0
+    overflow-hidden
     w-full;
   flex: 1 0 0;
 }

src/components/calcite-shell/calcite-shell.scss

@@ -8,24 +8,24 @@
 
 :host {
   @extend %component-host;
-  @apply w-full 
-    h-full 
-    absolute 
-    flex 
-    flex-col 
+  @apply w-full
+    h-full
+    absolute
+    flex
+    flex-col
     overflow-hidden
     inset-0;
   --calcite-shell-tip-spacing: 26vw;
 }
 
 .main {
-  @apply h-full 
-    w-full 
-    flex-auto 
-    flex 
-    flex-row 
+  @apply h-full
+    w-full
+    flex-auto
+    flex
+    flex-row
     relative
-    justify-between 
+    justify-between
     overflow-hidden;
 }
 
@@ -37,8 +37,8 @@
   @apply flex
     flex-col
     flex-no-wrap
-    h-full 
-    overflow-auto 
+    h-full
+    overflow-auto
     w-full;
 }
 
@@ -50,8 +50,8 @@
 }
 
 .content--behind {
-  @apply border-0 
-    absolute 
+  @apply border-0
+    absolute
     inset-0
     z-0;
   display: initial;

src/components/calcite-stepper/calcite-stepper.scss

@@ -1,11 +1,11 @@
 :host {
-  @apply flex 
-    flex-row 
-    flex-wrap 
-    relative 
-    justify-between 
-    items-stretch 
-    w-full 
+  @apply flex
+    flex-row
+    flex-wrap
+    relative
+    justify-between
+    items-stretch
+    w-full
     min-w-full;
 }