refactor: swap stylelint css order plugin for prettier plugin

src/lib/components/Action.svelte

@@ -20,17 +20,17 @@
 </script>
 
 {#snippet popoverSnippet()}
-<div bind:this={popover} popover="hint">
-&lt;{info.id ?? `0x${info.code.toString(16)}`}&gt;
-{#if info.title} 
-{info.title}
-{/if}
-  {#if info.variant === "left"}
-    (Left)
-  {:else if info.variant === "right"}
-    (Right)
-  {/if}
-</div>
+  <div bind:this={popover} popover="hint">
+    &lt;{info.id ?? `0x${info.code.toString(16)}`}&gt;
+    {#if info.title}
+      {info.title}
+    {/if}
+    {#if info.variant === "left"}
+      (Left)
+    {:else if info.variant === "right"}
+      (Right)
+    {/if}
+  </div>
 {/snippet}
 
 {#if display === "keys"}
@@ -50,15 +50,17 @@
 {:else if display === "inline-keys"}
   {#if !info.icon && dynamicMapping?.length === 1}
     <span
-    {@attach tooltip(popover)}
+      {@attach tooltip(popover)}
       class:left={info.variant === "left"}
-      class:right={info.variant === "right"}>{dynamicMapping}{@render popoverSnippet()}</span
+      class:right={info.variant === "right"}
+      >{dynamicMapping}{@render popoverSnippet()}</span
     >
   {:else if !info.icon && info.id?.length === 1}
     <span
-    {@attach tooltip(popover)}
+      {@attach tooltip(popover)}
       class:left={info.variant === "left"}
-      class:right={info.variant === "right"}>{info.id}{@render popoverSnippet()}</span
+      class:right={info.variant === "right"}
+      >{info.id}{@render popoverSnippet()}</span
     >
   {:else}
     <kbd
@@ -66,7 +68,7 @@
       class:left={info.variant === "left"}
       class:right={info.variant === "right"}
       class:icon={!!info.icon}
-    {@attach tooltip(popover)}
+      {@attach tooltip(popover)}
     >
       {dynamicMapping ??
         info.icon ??
@@ -79,9 +81,9 @@
 
 <style lang="scss">
   kbd:not(.inline-kbd) {
-    height: 24px;
-    padding-block: auto;
     transition: color 250ms ease;
+    padding-block: auto;
+    height: 24px;
   }
 
   .left {

src/lib/components/ActionListItem.svelte

@@ -48,33 +48,33 @@
 <style lang="scss">
   button {
     display: flex;
-    gap: 4px;
     align-items: center;
+    gap: 4px;
+    margin: 0;
+    border-radius: 8px;
+    padding: 8px;
 
     width: 100%;
     height: auto;
-    margin: 0;
-    padding: 8px;
 
     font-family: "Noto Sans Mono", monospace;
-    border-radius: 8px;
 
     @media not (forced-colors: active) {
-      color: inherit;
-
-      background: transparent;
       border: none;
 
+      background: transparent;
+      color: inherit;
+
       &:focus-visible {
-        color: var(--md-sys-color-on-surface-variant);
-        background: var(--md-sys-color-surface-variant);
         outline: none;
+        background: var(--md-sys-color-surface-variant);
+        color: var(--md-sys-color-on-surface-variant);
       }
     }
 
     @media (forced-colors: active) {
-      border: 1px solid ButtonBorder;
       margin-block: 4px;
+      border: 1px solid ButtonBorder;
 
       &:hover {
         color: ActiveText;
@@ -86,8 +86,8 @@
     display: flex;
     flex: 1;
     flex-direction: column;
-    align-items: flex-start;
     justify-content: flex-start;
+    align-items: flex-start;
 
     text-align: start;
   }

src/lib/components/AnimatedNumber.svelte

@@ -29,15 +29,15 @@
 
 <style lang="scss">
   .digits {
-    position: relative;
     display: inline-block;
+    position: relative;
     transition: width 500ms ease;
   }
 
   .digit-wrapper {
     display: inline-grid;
-    height: 1em;
     width: 1ch;
+    height: 1em;
   }
 
   .digit {

src/lib/components/PwaStatus.svelte

@@ -16,8 +16,8 @@
 <style lang="scss">
   button {
     cursor: pointer;
-    color: var(--md-sys-color-on-background);
-    background: transparent;
     border: none;
+    background: transparent;
+    color: var(--md-sys-color-on-background);
   }
 </style>

src/lib/components/Terminal.svelte

@@ -33,63 +33,61 @@
 
 <style lang="scss">
   form {
+    display: flex;
     position: relative;
+    flex-direction: column;
 
     contain: strict;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
+
+    border-radius: 16px;
 
     width: 100%;
     height: 100%;
+    overflow: hidden;
+    color: var(--md-sys-color-on-secondary);
+    font-size: 0.75rem;
 
     font-family: "Noto Sans Mono", monospace;
-    font-size: 0.75rem;
-    color: var(--md-sys-color-on-secondary);
-
-    border-radius: 16px;
   }
 
   fieldset::before {
-    content: "$";
-
     position: absolute;
     bottom: 8px;
     left: 8px;
+    content: "$";
 
     font-weight: 900;
   }
 
   input {
-    width: 100%;
+    appearance: none;
     margin-block-start: -16px;
+    border: none;
+    background: var(--md-sys-color-secondary);
     padding: 8px;
-    padding-block-start: 24px;
     padding-inline-start: calc(8px + 1.5ch);
+    padding-block-start: 24px;
+    width: 100%;
+    color: var(--md-sys-color-on-secondary);
+    font-weight: 600;
 
     font-family: "Noto Sans Mono", monospace;
-    font-weight: 600;
-    color: var(--md-sys-color-on-secondary);
-
-    appearance: none;
-    background: var(--md-sys-color-secondary);
-    border: none;
   }
 
   .io {
     --scrollbar-color: var(--md-sys-color-secondary);
+    flex: 1;
 
     z-index: 1;
+    border-radius: 0 0 16px 16px;
 
-    overflow-y: auto;
-    flex: 1;
+    background: var(--md-sys-color-secondary-container);
 
     padding: 12px;
 
-    color: var(--md-sys-color-on-secondary-container);
+    overflow-y: auto;
 
-    background: var(--md-sys-color-secondary-container);
-    border-radius: 0 0 16px 16px;
+    color: var(--md-sys-color-on-secondary-container);
   }
 
   :focus-visible {
@@ -99,10 +97,10 @@
   fieldset {
     all: unset;
 
-    position: relative;
-
     display: block;
 
+    position: relative;
+
     opacity: 0.8;
 
     transition: opacity 250ms ease;
@@ -113,16 +111,16 @@
   }
 
   .anchor {
-    overflow-anchor: auto;
     height: 1px;
+    overflow-anchor: auto;
   }
 
   code,
   samp,
   p {
     display: block;
-    overflow-anchor: none;
     margin-block: 0.15rem;
+    overflow-anchor: none;
   }
 
   p {
@@ -130,24 +128,24 @@
     justify-content: center;
 
     margin-block-end: 1rem;
+    border-radius: 8px;
+
+    background: var(--md-sys-color-secondary);
     padding: 0.25rem;
 
     color: var(--md-sys-color-on-secondary);
-
-    background: var(--md-sys-color-secondary);
-    border-radius: 8px;
   }
 
   code::before {
-    content: "> ";
     margin-block-end: 0.25rem;
-    font-weight: 900;
+    content: "> ";
     color: var(--md-sys-color-primary);
+    font-weight: 900;
   }
 
   ::selection {
-    color: var(--md-sys-color-background);
     background: var(--md-sys-color-on-background);
+    color: var(--md-sys-color-background);
   }
 
   @keyframes blink {

src/lib/components/Tooltip.svelte

@@ -20,8 +20,8 @@
 
     :global(kbd.icon) {
       display: inline-flex;
-      font-size: inherit;
       translate: 0 0.2em;
+      font-size: inherit;
     }
   }
 </style>

src/lib/components/layout/ActionSelector.svelte

@@ -189,18 +189,17 @@
     border: none;
 
     label {
-      height: unset;
-      padding-block: 2px;
+      border: 1px solid currentcolor;
+      border-radius: 6px;
       padding-inline: 4px;
+      padding-block: 2px;
+      height: unset;
 
       font-size: 14px;
 
-      border: 1px solid currentcolor;
-      border-radius: 6px;
-
       &:has(:checked) {
-        color: var(--md-sys-color-on-secondary);
         background: var(--md-sys-color-secondary);
+        color: var(--md-sys-color-on-secondary);
       }
 
       input {
@@ -211,34 +210,33 @@
 
   dialog {
     display: flex;
-    align-items: center;
     justify-content: center;
+    align-items: center;
 
-    width: 100%;
-    height: 100%;
+    border: none;
 
     background: rgba(0 0 0 / 60%);
 
-    border: none;
+    width: 100%;
+    height: 100%;
   }
 
   aside {
-    pointer-events: none;
+    opacity: 0.4;
 
     margin: 8px;
-
-    opacity: 0.4;
     border: 1px dashed var(--md-sys-color-outline);
     border-radius: 8px;
+    pointer-events: none;
 
     > h3 {
-      width: fit-content;
+      margin-inline-start: 16px;
       margin-block-start: -13px;
       margin-block-end: 0;
-      margin-inline-start: 16px;
-      padding-inline: 8px;
 
       background: var(--md-sys-color-background);
+      padding-inline: 8px;
+      width: fit-content;
     }
 
     @media (prefers-contrast: more) {
@@ -253,26 +251,26 @@
 
   .search-row {
     display: flex;
-    gap: 4px;
     align-items: center;
+    gap: 4px;
     margin-inline: 16px;
   }
 
   .content {
-    position: relative;
-    transform-origin: top left;
-
-    overflow: hidden;
     display: flex;
+    position: relative;
     flex-direction: column;
+    transform-origin: top left;
+    border-radius: 16px;
+
+    background: var(--md-sys-color-background);
 
     width: calc(min(30cm, 90%));
     height: calc(min(100% - 128px, 90%));
 
-    color: var(--md-sys-color-on-background);
+    overflow: hidden;
 
-    background: var(--md-sys-color-background);
-    border-radius: 16px;
+    color: var(--md-sys-color-on-background);
 
     @media (forced-colors: active) {
       border: 1px solid CanvasText;
@@ -280,39 +278,38 @@
   }
 
   input[type="search"] {
-    width: 100%;
-    height: 64px;
+    transition: all 250ms ease;
     margin-block-end: 8px;
-    padding-inline: 16px;
-
-    font-family: inherit;
-    font-size: 16px;
-    color: currentcolor;
-
-    background: none;
     border: none;
     border-bottom: 1px solid var(--md-sys-color-surface-variant);
 
-    transition: all 250ms ease;
+    background: none;
+    padding-inline: 16px;
+    width: 100%;
+    height: 64px;
+    color: currentcolor;
+    font-size: 16px;
+
+    font-family: inherit;
 
     &:focus {
-      border-bottom: 1px solid var(--md-sys-color-primary);
       outline: none;
+      border-bottom: 1px solid var(--md-sys-color-primary);
     }
   }
 
   ul {
     --scrollbar-color: var(--md-sys-color-surface-variant);
 
-    scrollbar-gutter: both-edges stable;
-
-    overflow-y: auto;
-
     box-sizing: border-box;
-    height: 100%;
     margin: 0;
     padding: 0;
     padding-inline: 4px;
+    height: 100%;
+
+    overflow-y: auto;
+
+    scrollbar-gutter: both-edges stable;
   }
 
   li {
@@ -322,27 +319,27 @@
   .exact {
     display: flex;
     flex-direction: column;
-    align-items: center;
     justify-content: center;
-
-    width: 100%;
+    align-items: center;
     margin-block-start: 8px;
 
     border: 1px solid var(--md-sys-color-primary);
     border-radius: 8px;
 
+    width: 100%;
+
     > i {
       display: flex;
-      gap: 4px;
-      align-items: center;
       justify-content: center;
+      align-items: center;
+      gap: 4px;
+      border-radius: 0 0 8px 8px;
+
+      background: var(--md-sys-color-primary);
 
       padding-inline: 6px;
 
       color: var(--md-sys-color-on-primary);
-
-      background: var(--md-sys-color-primary);
-      border-radius: 0 0 8px 8px;
     }
 
     @media (forced-colors: active) {

src/lib/components/layout/GenericLayout.svelte

@@ -219,9 +219,9 @@
 
 <style lang="scss">
   svg {
-    overflow: visible;
     grid-area: "d";
     width: calc(min(100%, 35cm));
     max-height: calc(100% - 170px);
+    overflow: visible;
   }
 </style>

src/lib/components/layout/KeyText.svelte

@@ -83,15 +83,15 @@
   $transition: 200ms;
 
   text {
-    will-change: translate, scale;
-    user-select: none;
-    transform-origin: center;
     transform-box: fill-box;
+    transform-origin: center;
     transition:
       fill #{$focus-transition} ease,
       opacity #{$transition} ease,
       translate #{$transition} ease,
       scale #{$transition} ease;
+    will-change: translate, scale;
+    user-select: none;
 
     @media (prefers-contrast: more) {
       --inactive-opacity: 0.8;

src/lib/components/layout/KeyboardKey.svelte

@@ -113,14 +113,14 @@
   $transition: 200ms;
 
   rect {
-    transform-origin: center;
     transform-box: fill-box;
+    transform-origin: center;
   }
 
   path,
   g {
-    transform-origin: top left;
     transform-box: fill-box;
+    transform-origin: top left;
   }
 
   path,
@@ -138,15 +138,15 @@
 
   g.faded,
   g:hover {
-    cursor: default;
     opacity: 0.6;
     transition: opacity #{$transition} ease;
+    cursor: default;
   }
 
   g.highlight,
   g:focus-within {
-    color: var(--md-sys-color-primary);
     outline: none;
+    color: var(--md-sys-color-primary);
 
     > path,
     > rect {

src/lib/components/layout/Layout.svelte

@@ -76,8 +76,8 @@
   .container {
     display: flex;
     flex-direction: column;
-    align-items: center;
     justify-content: center;
+    align-items: center;
 
     width: 100%;
     height: 100%;
@@ -85,24 +85,23 @@
   }
 
   fieldset {
-    position: relative;
-
     display: flex;
-    align-items: center;
+    position: relative;
     justify-content: center;
-
-    padding: 8px;
+    align-items: center;
 
     border: none;
+
+    padding: 8px;
   }
 
   .layers {
     display: flex;
-    align-items: center;
     justify-content: center;
-
-    margin-inline: auto;
+    align-items: center;
 
     gap: 2px;
+
+    margin-inline: auto;
   }
 </style>