style: use prettier plugin for tailwind for consistent order of class…

… names
envelope-zero · Jan 27, 2024 · c0f92db · c0f92db
1 parent f477a13
commit c0f92db
Show file tree

Hide file tree

Showing 38 changed files with 254 additions and 178 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -2,5 +2,6 @@
   "semi": false,
   "singleQuote": true,
   "trailingComma": "es5",
-  "arrowParens": "avoid"
+  "arrowParens": "avoid",
+  "plugins": ["prettier-plugin-tailwindcss"]
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -83,5 +83,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "prettier-plugin-tailwindcss": "^0.5.11"
   }
 }
diff --git a/src/App.scss b/src/App.scss
@@ -28,30 +28,30 @@
   }
 
   h1 {
-    @apply text-xl leading-6 font-black text-gray-900 dark:text-gray-100 tracking-wide;
+    @apply text-xl font-black leading-6 tracking-wide text-gray-900 dark:text-gray-100;
   }
 
   h2 {
-    @apply text-lg leading-6 font-bold text-gray-900 dark:text-gray-100;
+    @apply text-lg font-bold leading-6 text-gray-900 dark:text-gray-100;
   }
 
   h3 {
-    @apply text-lg leading-6 font-medium text-gray-900 dark:text-gray-100;
+    @apply text-lg font-medium leading-6 text-gray-900 dark:text-gray-100;
   }
 
   .header {
-    @apply fixed top-[1.625rem] left-0 right-0 m-auto text-center md:relative md:top-0 z-10 flex justify-center items-center md:h-12;
+    @apply fixed left-0 right-0 top-[1.625rem] z-10 m-auto flex items-center justify-center text-center md:relative md:top-0 md:h-12;
     @media (max-width: 767px) {
       width: calc(100% - 9rem);
     }
 
     h1 {
-      @apply whitespace-nowrap overflow-hidden text-ellipsis max-w-full;
+      @apply max-w-full overflow-hidden text-ellipsis whitespace-nowrap;
       max-width: calc(100% - 1.5rem);
     }
 
     .header--action {
-      @apply fixed md:absolute right-6 md:right-0 text-red-800 dark:text-red-600 flex gap-x-2;
+      @apply fixed right-6 flex gap-x-2 text-red-800 dark:text-red-600 md:absolute md:right-0;
 
       .header--action__secondary {
         @apply text-gray-600 dark:text-gray-400;
@@ -88,31 +88,31 @@
   }
 
   .box {
-    @apply shadow-sm rounded-md bg-gray-100 dark:bg-slate-700;
+    @apply rounded-md bg-gray-100 shadow-sm dark:bg-slate-700;
   }
 
   .card {
-    @apply bg-white dark:bg-slate-800 shadow-lg overflow-hidden rounded-lg p-4 md:p-8;
+    @apply overflow-hidden rounded-lg bg-white p-4 shadow-lg dark:bg-slate-800 md:p-8;
   }
 
   .error {
-    @apply bg-red-100 p-2 rounded-md text-red-800 dark:text-red-600;
+    @apply rounded-md bg-red-100 p-2 text-red-800 dark:text-red-600;
   }
 
   .button-group {
-    @apply gap-4 flex flex-col md:flex-row-reverse md:justify-start;
+    @apply flex flex-col gap-4 md:flex-row-reverse md:justify-start;
   }
 
   .btn-primary {
-    @apply w-full min-w-32 md:w-auto shadow-sm rounded-md full-centered bg-blue-800 hover:bg-blue-900 dark:hover:bg-blue-700 text-white py-3 px-4 text-sm font-bold;
+    @apply full-centered w-full min-w-32 rounded-md bg-blue-800 px-4 py-3 text-sm font-bold text-white shadow-sm hover:bg-blue-900 dark:hover:bg-blue-700 md:w-auto;
   }
 
   .btn-secondary {
-    @apply w-full min-w-32 md:w-auto shadow-sm rounded-md full-centered text-blue-800 hover:text-blue-900 dark:text-gray-300 dark:hover:text-gray-200 py-2 px-4 text-sm font-medium hover:bg-gray-50 dark:hover:bg-slate-700 border border-blue-800 dark:border-gray-300;
+    @apply full-centered w-full min-w-32 rounded-md border border-blue-800 px-4 py-2 text-sm font-medium text-blue-800 shadow-sm hover:bg-gray-50 hover:text-blue-900 dark:border-gray-300 dark:text-gray-300 dark:hover:bg-slate-700 dark:hover:text-gray-200 md:w-auto;
   }
 
   .btn-secondary-red {
-    @apply btn-secondary text-red-800 hover:text-red-900 border-red-800 dark:text-red-600 dark:hover:text-red-600 dark:border-red-600;
+    @apply btn-secondary border-red-800 text-red-800 hover:text-red-900 dark:border-red-600 dark:text-red-600 dark:hover:text-red-600;
   }
 
   .link-blue {
@@ -131,19 +131,19 @@
   }
 
   .input--outer {
-    @apply mt-2 relative;
+    @apply relative mt-2;
   }
 
   .input {
-    @apply flex-1 block w-full min-w-0 sm:text-sm border-gray-300 rounded-md  dark:text-gray-100 dark:border-slate-700 dark:bg-slate-700 dark:focus:bg-slate-700 focus:outline-transparent focus:border-transparent focus:ring-2 focus:ring-inset focus:ring-blue-800 dark:focus:ring-blue-700;
+    @apply block w-full min-w-0 flex-1 rounded-md border-gray-300 focus:border-transparent  focus:outline-transparent focus:ring-2 focus:ring-inset focus:ring-blue-800 dark:border-slate-700 dark:bg-slate-700 dark:text-gray-100 dark:focus:bg-slate-700 dark:focus:ring-blue-700 sm:text-sm;
   }
 
   .dashboard {
     .month-slider {
       @apply grid grid-cols-12;
 
       a {
-        @apply text-gray-500 dark:text-gray-400 text-sm font-medium col-span-3 text-center flex justify-center items-center border-gray-300 dark:border-gray-500;
+        @apply col-span-3 flex items-center justify-center border-gray-300 text-center text-sm font-medium text-gray-500 dark:border-gray-500 dark:text-gray-400;
       }
 
       > div {
@@ -152,7 +152,7 @@
 
       > div,
       a {
-        @apply pb-1 border-b-2;
+        @apply border-b-2 pb-1;
       }
     }
   }
@@ -168,7 +168,7 @@
   .trans {
     font-size: 0;
     & > span {
-      @apply text-xl /* h1 */;
+      @apply /* h1 */ text-xl;
     }
   }
 

diff --git a/src/components/AccountForm.tsx b/src/components/AccountForm.tsx
@@ -113,14 +113,14 @@ const AccountForm = ({ budget, type }: Props) => {
             <Link
               onClick={confirmDiscardingUnsavedChanges}
               to={`/transactions?account=${accountId}`}
-              className="flex items-center justify-end link-blue py-4"
+              className="link-blue flex items-center justify-end py-4"
             >
               {t('transactions.latest')}
               <ChevronRightIcon className="inline h-6" />
             </Link>
           )}
           <div className="card">
-            <FormFields className="md:grid grid-cols-2 md:gap-x-4 md:gap-y-6">
+            <FormFields className="grid-cols-2 md:grid md:gap-x-4 md:gap-y-6">
               <FormField
                 className="col-span-full"
                 type="text"
@@ -133,9 +133,9 @@ const AccountForm = ({ budget, type }: Props) => {
 
               {type === 'internal' ? (
                 <>
-                  <div className="relative flex items-start col-span-full">
+                  <div className="relative col-span-full flex items-start">
                     <div
-                      className="mt-px pt-2 pr-2 col-span-2 flex sm:block justify-end"
+                      className="col-span-2 mt-px flex justify-end pr-2 pt-2 sm:block"
                       onClick={e => {
                         e.preventDefault()
                         updateValue('onBudget', !account.onBudget)
@@ -146,21 +146,21 @@ const AccountForm = ({ budget, type }: Props) => {
                           account.onBudget
                             ? 'bg-lime-600 dark:bg-lime-500'
                             : 'bg-gray-200 dark:bg-slate-700'
-                        } relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2`}
+                        } relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2`}
                       >
                         <span
                           aria-hidden="true"
                           className={`${
                             account?.onBudget
                               ? 'translate-x-5'
                               : 'translate-x-0'
-                          } inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200 pointer-events-none`}
+                          } pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out`}
                         ></span>
                         <input
                           type="checkbox"
                           id="onBudget"
                           name="onBudget"
-                          className="absolute inset-0 sr-only"
+                          className="sr-only absolute inset-0"
                           defaultChecked={account?.onBudget}
                           onChange={e =>
                             updateValue('onBudget', e.target.checked)
@@ -217,7 +217,7 @@ const AccountForm = ({ budget, type }: Props) => {
                 <label htmlFor="note" className="form-field--label">
                   {t('accounts.note')}
                 </label>
-                <div className="mt-1 sm:mt-0 sm:col-span-2">
+                <div className="mt-1 sm:col-span-2 sm:mt-0">
                   <textarea
                     id="note"
                     name="note"
@@ -230,7 +230,7 @@ const AccountForm = ({ budget, type }: Props) => {
               </div>
             </FormFields>
 
-            <div className="mt-8 button-group">
+            <div className="button-group mt-8">
               <button type="submit" className="btn-primary">
                 {t('save')}
               </button>
@@ -264,7 +264,7 @@ const AccountForm = ({ budget, type }: Props) => {
                     }}
                     className="btn-secondary-red"
                   >
-                    <TrashIcon className="icon-red icon-sm inline mr-1 relative bottom-0.5" />
+                    <TrashIcon className="icon-red icon-sm relative bottom-0.5 mr-1 inline" />
                     {t('accounts.delete')}
                   </button>
                   {/* TODO: reconcile */}

diff --git a/src/components/AccountListSwitch.tsx b/src/components/AccountListSwitch.tsx
@@ -13,7 +13,7 @@ const AccountListSwitch = ({ selected }: Props) => {
   const { t }: Translation = useTranslation()
 
   return (
-    <div className="card shadow-sm p-1 mb-6 flex dark:text-gray-100">
+    <div className="card mb-6 flex p-1 shadow-sm dark:text-gray-100">
       <Link to="/own-accounts" className={tabClasses(selected === 'internal')}>
         {t('accounts.internalAccounts')}
       </Link>

diff --git a/src/components/AllocationInputs.tsx b/src/components/AllocationInputs.tsx
@@ -43,7 +43,7 @@ const AllocationInputs = ({
       >
         <InputCurrency currency={budget.currency} />
       </FormField>
-      <p className="text-sm text-gray-500 dark:text-gray-400 uppercase">
+      <p className="text-sm uppercase text-gray-500 dark:text-gray-400">
         {' '}
         – {t('or')} –{' '}
       </p>

diff --git a/src/components/ArchiveButton.tsx b/src/components/ArchiveButton.tsx
@@ -30,7 +30,7 @@ const ArchiveButton = ({
       }}
       className="btn-secondary"
     >
-      <ArchiveBoxIcon className="icon-sm inline mr-1 relative bottom-0.5" />
+      <ArchiveBoxIcon className="icon-sm relative bottom-0.5 mr-1 inline" />
       {t(resource.archived ? 'unarchiveObject' : 'archiveObject', {
         object: resourceTypeTranslation,
       })}

diff --git a/src/components/Autocomplete.tsx b/src/components/Autocomplete.tsx
@@ -104,7 +104,7 @@ const Autocomplete = <T extends ArchivableResource>({
           />
         </Combobox.Button>
 
-        <Combobox.Options className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white dark:bg-slate-800 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+        <Combobox.Options className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-slate-800 sm:text-sm">
           {emptyOption && query.length === 0 ? (
             <Combobox.Option
               value={null}
@@ -126,7 +126,7 @@ const Autocomplete = <T extends ArchivableResource>({
           {filteredGroups.map((group, i) => (
             <div key={i}>
               {filteredGroups.length > 1 ? (
-                <div className="relative py-2 pl-3 pr-9 text-gray-800 dark:text-gray-200 bg-gray-200 dark:bg-slate-700">
+                <div className="relative bg-gray-200 py-2 pl-3 pr-9 text-gray-800 dark:bg-slate-700 dark:text-gray-200">
                   {group.title}
                 </div>
               ) : null}
@@ -155,7 +155,7 @@ const Autocomplete = <T extends ArchivableResource>({
                         >
                           {isArchived(item) ? (
                             <ArchiveBoxIcon
-                              className="icon-sm inline link-blue mr-2 stroke-2"
+                              className="icon-sm link-blue mr-2 inline stroke-2"
                               title={t('archived')}
                             />
                           ) : null}
@@ -188,7 +188,7 @@ const Autocomplete = <T extends ArchivableResource>({
               value={{ name: query }}
               className={({ active }) =>
                 classNames(
-                  'relative cursor-default select-none py-2 pl-3 pr-9 border-t dark:border-gray-900',
+                  'relative cursor-default select-none border-t py-2 pl-3 pr-9 dark:border-gray-900',
                   active
                     ? 'bg-sky-600 text-white'
                     : 'text-gray-900 dark:text-gray-300'

diff --git a/src/components/BudgetForm.tsx b/src/components/BudgetForm.tsx
@@ -101,7 +101,7 @@ const BudgetForm = ({ selectBudget, selectedBudget }: BudgetFormProps) => {
           <h2>{t('budgets.createNew')}</h2>
           <Link
             to="/budget-import"
-            className="text-sm link-blue flex align-center"
+            className="link-blue align-center flex text-sm"
           >
             <DocumentArrowUpIcon className="icon-sm mr-1" />
             {t('budgets.import.importInstead')}
@@ -132,7 +132,7 @@ const BudgetForm = ({ selectBudget, selectedBudget }: BudgetFormProps) => {
             <label htmlFor="note" className="form-field--label">
               {t('budgets.note')}
             </label>
-            <div className="mt-1 sm:mt-0 sm:col-span-2">
+            <div className="mt-1 sm:col-span-2 sm:mt-0">
               <textarea
                 id="note"
                 name="note"
@@ -145,7 +145,7 @@ const BudgetForm = ({ selectBudget, selectedBudget }: BudgetFormProps) => {
           </div>
         </FormFields>
 
-        <div className="mt-8 button-group">
+        <div className="button-group mt-8">
           <button type="submit" className="btn-primary">
             {t('save')}
           </button>