Use prettier-plugin-tailwindcss

cosmicproc · Mar 26, 2024 · 7d62ccc · 7d62ccc
1 parent 2d74c4a
commit 7d62ccc
Show file tree

Hide file tree

Showing 15 changed files with 141 additions and 66 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -1,6 +1,6 @@
 {
     "tabWidth": 4,
     "singleQuote": true,
-    "plugins": ["prettier-plugin-svelte"],
+    "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
     "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "glass_cursor",
-    "version": "0.0.1",
+    "version": "1.0",
     "private": true,
     "scripts": {
         "dev": "vite dev",
@@ -35,8 +35,9 @@
         "highlight.js": "^11.9.0",
         "markdown-it": "^14.0.0",
         "postcss": "^8.4.35",
-        "prettier": "^3.1.1",
+        "prettier": "^3.2.5",
         "prettier-plugin-svelte": "^3.1.2",
+        "prettier-plugin-tailwindcss": "^0.5.12",
         "svelte": "^4.2.7",
         "svelte-check": "^3.6.0",
         "tailwindcss": "^3.4.1",

diff --git a/src/lib/app.css b/src/lib/app.css
@@ -4,23 +4,23 @@
 
 @layer components {
     .link {
-        @apply text-blue-600 dark:text-blue-500 hover:underline;
+        @apply text-blue-600 hover:underline dark:text-blue-500;
     }
 
     .btn {
-        @apply bg-neutral-700 hover:bg-neutral-600 text-white rounded-full py-2 px-6 mx-2 font-medium shadow;
+        @apply mx-2 rounded-full bg-neutral-700 px-6 py-2 font-medium text-white shadow hover:bg-neutral-600;
     }
 
     .btn-blue {
-        @apply bg-blue-700 hover:bg-blue-600 border-0;
+        @apply border-0 bg-blue-700 hover:bg-blue-600;
     }
 
     .btn-red {
-        @apply bg-red-700 hover:bg-red-600 border-0;
+        @apply border-0 bg-red-700 hover:bg-red-600;
     }
 
     .input {
-        @apply bg-neutral-200 dark:bg-neutral-800 border-2 border-neutral-300 dark:border-neutral-700 flex-grow rounded-full py-3 px-6 focus:shadow-lg text-inherit inline;
+        @apply inline flex-grow rounded-full border-2 border-neutral-300 bg-neutral-200 px-6 py-3 text-inherit focus:shadow-lg dark:border-neutral-700 dark:bg-neutral-800;
     }
 }
 

diff --git a/src/lib/components/ConfirmDeletion.svelte b/src/lib/components/ConfirmDeletion.svelte
@@ -12,13 +12,13 @@
 </script>
 
 <Popup bind:this={confirmDeletion}>
-    <h1 class="text-2xl font-bold mb-6">Delete the Note?</h1>
+    <h1 class="mb-6 text-2xl font-bold">Delete the Note?</h1>
     <p>
         You are about the delete the note named "<strong
             >{confirmDeleteTargetName}</strong
         >". Are you sure? This action cannot be reverted.
     </p>
-    <div class="flex mt-6 justify-center">
+    <div class="mt-6 flex justify-center">
         <button
             data-testid="delete-confirm"
             class="btn btn-red"

diff --git a/src/lib/components/Editor.svelte b/src/lib/components/Editor.svelte
@@ -99,32 +99,32 @@
     }
 </script>
 
-<div class="flex flex-grow basis-0 p-10 overflow-hidden flex-col lg:flex-row">
+<div class="flex flex-grow basis-0 flex-col overflow-hidden p-10 lg:flex-row">
     <div
-        class={`border-2 border-neutral-300 dark:border-neutral-500 rounded-3xl overflow-hidden lg:w-1/2 h-1/2 lg:h-full flex flex-col flex-grow shadow-lg transition-all duration-300 mb-4 lg:mb-0 ${
+        class={`mb-4 flex h-1/2 flex-grow flex-col overflow-hidden rounded-3xl border-2 border-neutral-300 shadow-lg transition-all duration-300 lg:mb-0 lg:h-full lg:w-1/2 dark:border-neutral-500 ${
             $previewExtended && !$sourceExtended
                 ? 'lg:-ml-[110%] lg:mr-24'
                 : 'lg:mr-2'
         }`}
     >
         <div
-            class="w-full p-4 text-center backdrop-blur bg-neutral-200 dark:bg-neutral-800 bg-opacity-70 dark:bg-opacity-70 flex"
+            class="flex w-full bg-neutral-200 bg-opacity-70 p-4 text-center backdrop-blur dark:bg-neutral-800 dark:bg-opacity-70"
         >
             <a
                 href="https://commonmark.org/help/"
                 title="Help"
-                class="hover:bg-gray-300 dark:hover:bg-gray-700 rounded-xl px-2 flex items-center"
+                class="flex items-center rounded-xl px-2 hover:bg-gray-300 dark:hover:bg-gray-700"
             >
                 <FontAwesomeIcon icon={faQuestion} />
             </a>
             <strong class="mx-auto">
                 <FontAwesomeIcon icon={faMarkdown} class="align-middle" />
-                <span class="align-middle ml-1">Markdown Editor</span>
+                <span class="ml-1 align-middle">Markdown Editor</span>
             </strong>
             <button
                 title={sourceExtended ? 'Shrink' : 'Extend'}
                 data-testid="resize-editor"
-                class="hover:bg-gray-300 dark:hover:bg-gray-700 rounded-xl px-2 cursor-pointer invisible lg:visible"
+                class="invisible cursor-pointer rounded-xl px-2 hover:bg-gray-300 lg:visible dark:hover:bg-gray-700"
                 on:click={() => {
                     sourceExtended.set(!$sourceExtended);
                 }}
@@ -136,10 +136,10 @@
                 {/if}
             </button>
         </div>
-        <div class="overflow-auto -mt-16 h-full w-full flex flex-grow">
+        <div class="-mt-16 flex h-full w-full flex-grow overflow-auto">
             <textarea
                 data-testid="editor"
-                class="outline-none bg-transparent resize-none p-6 font-mono w-full pt-[5.5em] pb-8"
+                class="w-full resize-none bg-transparent p-6 pb-8 pt-[5.5em] font-mono outline-none"
                 placeholder={$currentNote === -1
                     ? 'Choose a note from the left-hand side panel to edit.'
                     : 'Dump your mind here.'}
@@ -154,19 +154,19 @@
         </div>
     </div>
     <div
-        class={`border-2 border-neutral-300 dark:border-neutral-500 rounded-3xl overflow-hidden lg:w-1/2 h-1/2 lg:h-full flex flex-col flex-grow shadow-lg transition-all duration-300 mt-4 lg:mt-0 ${
+        class={`mt-4 flex h-1/2 flex-grow flex-col overflow-hidden rounded-3xl border-2 border-neutral-300 shadow-lg transition-all duration-300 lg:mt-0 lg:h-full lg:w-1/2 dark:border-neutral-500 ${
             $sourceExtended && !$previewExtended
                 ? 'lg:-mr-[110%] lg:ml-24'
                 : 'lg:ml-2'
         }`}
     >
         <div
-            class="w-full p-4 text-center backdrop-blur bg-neutral-200 dark:bg-neutral-800 bg-opacity-70 dark:bg-opacity-70 flex"
+            class="flex w-full bg-neutral-200 bg-opacity-70 p-4 text-center backdrop-blur dark:bg-neutral-800 dark:bg-opacity-70"
         >
             <button
                 title={$previewExtended ? 'Shrink' : 'Extend'}
                 data-testid="resize-result-text"
-                class="hover:bg-gray-300 dark:hover:bg-gray-700 rounded-xl px-2 cursor-pointer invisible lg:visible"
+                class="invisible cursor-pointer rounded-xl px-2 hover:bg-gray-300 lg:visible dark:hover:bg-gray-700"
                 on:click={() => {
                     previewExtended.set(!$previewExtended);
                 }}
@@ -179,18 +179,18 @@
             </button>
             <strong class="mx-auto">
                 <FontAwesomeIcon icon={faAlignLeft} class="align-middle" />
-                <span class="align-middle ml-1">Formatted Text</span>
+                <span class="ml-1 align-middle">Formatted Text</span>
             </strong>
             <div class="w-[30px]"></div>
         </div>
         <div
-            class="overflow-auto -mt-16 pt-[5.5em] px-6"
+            class="-mt-16 overflow-auto px-6 pt-[5.5em]"
             bind:this={preview}
             on:scroll={syncScroll}
         >
             <article
                 data-testid="result-text"
-                class="prose dark:prose-invert dark:prose-pre:bg-gray-900 break-word pb-8 mx-auto"
+                class="break-word prose mx-auto pb-8 dark:prose-invert dark:prose-pre:bg-gray-900"
             >
                 <!-- eslint-disable-next-line svelte/no-at-html-tags -->
                 {@html previewContent}

diff --git a/src/lib/components/Panel.svelte b/src/lib/components/Panel.svelte
@@ -31,22 +31,22 @@
     }
 </script>
 
-<div class="flex z-10" data-testid="panel">
+<div class="z-10 flex" data-testid="panel">
     {#if browser}
         <aside
             data-testid="panel-aside"
-            class={`bg-neutral-100 dark:bg-neutral-900 w-[95dvw] sm:w-80 px-2 flex flex-col transition-all duration-300${
+            class={`flex w-[95dvw] flex-col bg-neutral-100 px-2 transition-all sm:w-80 dark:bg-neutral-900 duration-300${
                 !$sidebarActive ? ' -ml-[95dvw] md:-ml-80' : ''
             }`}
         >
             <div
-                class="py-4 mx-4 border-gray-400 dark:border-gray-500 border-b-2 flex mt-2"
+                class="mx-4 mt-2 flex border-b-2 border-gray-400 py-4 dark:border-gray-500"
             >
                 <div class="basis-full">
-                    <h1 class="font-bold text-2xl">Your Notes</h1>
+                    <h1 class="text-2xl font-bold">Your Notes</h1>
                 </div>
                 <button
-                    class="flex items-center hover:bg-gray-300 dark:hover:bg-gray-800 rounded-xl cursor-pointer"
+                    class="flex cursor-pointer items-center rounded-xl hover:bg-gray-300 dark:hover:bg-gray-800"
                     title="New Note"
                     data-testid="new-note"
                     on:click={() => {
@@ -67,17 +67,17 @@
                 </button>
             </div>
             <div
-                class="px-5 pb-4 overflow-auto overflow-x-hidden h-full"
+                class="h-full overflow-auto overflow-x-hidden px-5 pb-4"
                 bind:this={notesDiv}
             >
                 {#if $notes && $notes.length !== 0}
                     {#each $notes as note (note.id)}
                         <div
-                            class={`rounded-xl my-4 p-1 pl-4 border-2 flex items-center
+                            class={`my-4 flex items-center rounded-xl border-2 p-1 pl-4
 							${
                                 $currentNote === note.id
-                                    ? ' bg-blue-200 border-blue-400 dark:bg-blue-950 dark:border-blue-700 dark:brightness-110'
-                                    : ' bg-gray-200 border-gray-300 dark:bg-neutral-800 dark:border-neutral-700 hover:bg-blue-100 hover:border-blue-400 dark:hover:bg-blue-950 dark:hover:border-blue-800 '
+                                    ? ' border-blue-400 bg-blue-200 dark:border-blue-700 dark:bg-blue-950 dark:brightness-110'
+                                    : ' border-gray-300 bg-gray-200 hover:border-blue-400 hover:bg-blue-100 dark:border-neutral-700 dark:bg-neutral-800 dark:hover:border-blue-800 dark:hover:bg-blue-950 '
                             }`}
                             data-testid="note"
                             id={($currentNote === note.id && 'current-note') ||
@@ -104,7 +104,7 @@
                             </div>
                             <div class="ml-auto flex">
                                 <button
-                                    class="p-2 flex items-center hover:text-yellow-700 min-w-[32px]"
+                                    class="flex min-w-[32px] items-center p-2 hover:text-yellow-700"
                                     data-testid="rename"
                                     title="Rename"
                                     on:click|stopPropagation={async () => {
@@ -118,7 +118,7 @@
                                     <FontAwesomeIcon icon={faPencil} />
                                 </button>
                                 <button
-                                    class="p-2 flex items-center hover:text-red-500 min-w-[32px]"
+                                    class="flex min-w-[32px] items-center p-2 hover:text-red-500"
                                     data-testid="delete"
                                     title="Delete"
                                     on:click|stopPropagation={() => {
@@ -140,11 +140,11 @@
                 {/if}
             </div>
             <div
-                class="py-4 mx-4 border-gray-400 dark:border-gray-500 border-t-2 mb-2 flex"
+                class="mx-4 mb-2 flex border-t-2 border-gray-400 py-4 dark:border-gray-500"
             >
                 <button
                     data-testid="settings-button"
-                    class="flex items-center px-2 hover:bg-gray-300 dark:hover:bg-gray-800 rounded-xl cursor-pointer"
+                    class="flex cursor-pointer items-center rounded-xl px-2 hover:bg-gray-300 dark:hover:bg-gray-800"
                     title="Settings"
                     on:click={() => {
                         settings.show();
@@ -153,7 +153,7 @@
                     <FontAwesomeIcon icon={faGear} />
                 </button>
                 <div
-                    class="flex mx-2 border-2 border-indigo-600 rounded-full shadow p-1 bg-indigo-50 ml-auto dark:bg-indigo-950"
+                    class="mx-2 ml-auto flex rounded-full border-2 border-indigo-600 bg-indigo-50 p-1 shadow dark:bg-indigo-950"
                 >
                     <Logo />
                     <span class="mx-1 align-middle font-medium"
@@ -166,7 +166,7 @@
     <div class="flex items-center">
         <button
             data-testid="toggle-panel"
-            class="-mr-1 p-2 group cursor-pointer"
+            class="group -mr-1 cursor-pointer p-2"
             title={$sidebarActive ? 'Hide' : 'Show'}
             on:click={() => {
                 sidebarActive.set(!$sidebarActive);
@@ -178,14 +178,14 @@
             }}
         >
             <div
-                class={`w-1 h-6 rounded-2xl bg-gray-400 dark:bg-gray-500 -mb-1 group-hover:bg-gray-500 dark:group-hover:bg-gray-400 transition-all ${
+                class={`-mb-1 h-6 w-1 rounded-2xl bg-gray-400 transition-all group-hover:bg-gray-500 dark:bg-gray-500 dark:group-hover:bg-gray-400 ${
                     $sidebarActive
                         ? 'group-hover:rotate-12'
                         : 'group-hover:-rotate-12'
                 }`}
             ></div>
             <div
-                class={`w-1 h-6 rounded-2xl bg-gray-400 dark:bg-gray-500 -mb-1 group-hover:bg-gray-500 dark:group-hover:bg-gray-400 transition-all ${
+                class={`-mb-1 h-6 w-1 rounded-2xl bg-gray-400 transition-all group-hover:bg-gray-500 dark:bg-gray-500 dark:group-hover:bg-gray-400 ${
                     $sidebarActive
                         ? 'group-hover:-rotate-12'
                         : 'group-hover:rotate-12'

diff --git a/src/lib/components/Popup.svelte b/src/lib/components/Popup.svelte
@@ -26,12 +26,12 @@
 </script>
 
 <div
-    class="absolute w-full h-full flex justify-center items-center z-20 backdrop-blur"
+    class="absolute z-20 flex h-full w-full items-center justify-center backdrop-blur"
     class:hidden={!status}
     use:trapFocus
 >
     <div
-        class="max-w-[90dvw] w-[30em] m-8 bg-neutral-100 dark:bg-neutral-900 border-2 dark:border-neutral-700 border-gray-300 shadow-lg rounded-2xl py-8 px-4 sm:px-8 text-center"
+        class="m-8 w-[30em] max-w-[90dvw] rounded-2xl border-2 border-gray-300 bg-neutral-100 px-4 py-8 text-center shadow-lg sm:px-8 dark:border-neutral-700 dark:bg-neutral-900"
         bind:this={popup}
     >
         <slot />