Remove @apply tailwindcss anti-pattern

OpenShock · Feb 5, 2025 · 2db0836 · 2db0836
1 parent cb21950
commit 2db0836
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 73 deletions.
diff --git a/src/app.css b/src/app.css
@@ -83,4 +83,18 @@
   .code {
     @apply relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold;
   }
+
+  .hide-spinners {
+    /* Hide spin buttons in Chrome, Safari, Edge */
+    -webkit-appearance: none;
+    -moz-appearance: textfield; /* Hide spinners in Firefox */
+    appearance: textfield;
+  }
+
+  /* Target WebKit browsers (Chrome, Safari, Edge) */
+  .hide-spinners::-webkit-outer-spin-button,
+  .hide-spinners::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
 }
diff --git a/src/lib/components/AbsolutelySureButton.svelte b/src/lib/components/AbsolutelySureButton.svelte
@@ -53,23 +53,13 @@
   onmouseup={stopTimers}
   ontouchend={stopTimers}
   onmouseleave={stopTimers}
-  class={timer ? 'violent-shake' : undefined}
+  class={`h-10 select-none whitespace-nowrap rounded-md bg-[#7f1d1d] px-4 py-2 text-sm font-medium hover:bg-[#731a1a] focus:outline-none ${timer ? 'violent-shake' : ''}`}
 >
   {buttonText}
 </button>
 
-<style lang="postcss">
-  button {
-    @apply h-10 select-none whitespace-nowrap rounded-md px-4 py-2 text-sm font-medium;
-    background: rgb(127, 29, 29);
-  }
-  button:hover {
-    background: rgb(115, 26, 26);
-  }
-  button:focus {
-    outline: none;
-  }
-  button.violent-shake {
+<style>
+  .violent-shake {
     /* Start the shake animation and make the animation last for 0.5 seconds */
     animation:
       shake 0.5s,

diff --git a/src/lib/components/ControlModules/Internal/CircleSlider.svelte b/src/lib/components/ControlModules/Internal/CircleSlider.svelte
@@ -94,12 +94,13 @@
 </script>
 
 <div>
-  <div class="canvas" bind:this={canvasHandle}>
-    <svg class="tracks" viewBox="0 0 {viewSize.x} {viewSize.y}">
+  <div class="relative size-[150px]" bind:this={canvasHandle}>
+    <svg class="absolute size-[150px]" viewBox="0 0 {viewSize.x} {viewSize.y}">
       <path
         {...calcSvgArcProps(center, angleStart, angleEnd, radius, 20)}
         fill="none"
         stroke-linecap="round"
+        style:cursor="pointer"
         style:stroke="rgb(27, 29, 30)"
         ontouchstart={trackingStarted}
         onmousedown={trackingStarted}
@@ -109,6 +110,7 @@
         {...progressProps}
         fill="none"
         stroke-linecap="round"
+        style:cursor="pointer"
         style:stroke="rgb(0, 122, 255)"
         ontouchstart={trackingStarted}
         onmousedown={trackingStarted}
@@ -117,7 +119,7 @@
       />
     </svg>
     <div
-      class="handle"
+      class="absolute size-[30px] cursor-move rounded-full bg-white"
       style:left={`${60 + getCircleX(60, degrees)}px`}
       style:top={`${60 + getCircleY(60, degrees)}px`}
       ontouchstart={trackingStarted}
@@ -130,39 +132,24 @@
       aria-labelledby={labelId}
       aria-controls={guageId}
     ></div>
-    <input id={inputId} type="number" {name} {min} bind:value {max} {step} aria-label="Value" />
-    <label id={labelId} for={inputId} aria-label="Name">
+    <input
+      id={inputId}
+      type="number"
+      {name}
+      {min}
+      bind:value
+      {max}
+      {step}
+      aria-label="Value"
+      class="hide-spinners absolute left-[50%] top-[50%] -translate-x-[50%] -translate-y-[50%] transform select-none border-none bg-transparent text-center text-xl font-bold"
+    />
+    <label
+      id={labelId}
+      for={inputId}
+      aria-label="Name"
+      class="absolute bottom-0 left-[50%] -translate-x-[50%] translate-y-[10%] transform select-none text-center"
+    >
       {name}
     </label>
   </div>
 </div>
-
-<style lang="postcss">
-  .canvas {
-    @apply relative size-[150px];
-  }
-  svg {
-    @apply absolute size-[150px];
-  }
-  path {
-    @apply cursor-pointer;
-  }
-  .handle {
-    @apply absolute size-[30px] cursor-move rounded-full bg-white;
-  }
-  input[type='number'] {
-    @apply absolute left-[50%] top-[50%] -translate-x-[50%] -translate-y-[50%] transform select-none appearance-none border-none bg-transparent text-center text-xl font-bold;
-
-    /* Firefox */
-    -moz-appearance: textfield;
-  }
-  /* Chrome, Safari, Edge, Opera */
-  input::-webkit-outer-spin-button,
-  input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-  label {
-    @apply absolute bottom-0 left-[50%] -translate-x-[50%] translate-y-[10%] transform select-none text-center;
-  }
-</style>
diff --git a/src/lib/components/Turnstile.svelte b/src/lib/components/Turnstile.svelte
@@ -99,10 +99,12 @@
 </script>
 
 <!-- see: https://developers.cloudflare.com/turnstile/get-started/client-side-rendering/#widget-size -->
-<div id="main" bind:this={element}>
+<div class="mx-auto h-[65px] w-[300px]" bind:this={element}>
   {#if widgetState != 'mounted'}
     <!-- Turnstile placeholder -->
-    <div id="placeholder">
+    <div
+      class="flex h-full select-none items-center justify-center gap-3 border border-[#e0e0e0] bg-[#fafafa] p-3 dark:border-[#666] dark:bg-[#222]"
+    >
       {#if dev}
         <Bug />
         <span> Turnstile disabled </span>
@@ -111,7 +113,7 @@
         <span> Loading... </span>
       {/if}
       <a
-        id="logo"
+        class="mb-auto ml-auto h-7 w-auto text-[#666] dark:text-[#999]"
         href="https://www.cloudflare.com/products/turnstile/?utm_source=turnstile&utm_campaign=widget"
         target="_blank"
         rel="noreferrer"
@@ -121,25 +123,3 @@
     </div>
   {/if}
 </div>
-
-<style lang="postcss">
-  #main {
-    @apply mx-auto h-[65px] w-[300px];
-  }
-  #placeholder {
-    @apply flex h-full select-none items-center justify-center gap-3 p-3;
-    @apply bg-[#fafafa];
-    @apply border border-[#e0e0e0];
-  }
-  :global(.dark) #placeholder {
-    @apply bg-[#222];
-    @apply border-[#666];
-  }
-  #logo {
-    @apply mb-auto ml-auto h-7 w-auto;
-    @apply text-[#666];
-  }
-  :global(.dark) #logo {
-    @apply text-[#999];
-  }
-</style>