Why is prettier borked

app/error.tsx

@@ -2,10 +2,18 @@
 
 export default function Error({ reset }: { reset: () => void }) {
   return (
-    <div className="flex flex-col rounded-lg border border-neutral-200 bg-white p-8 dark:border-neutral-800 dark:bg-black md:p-12 max-w-xl mx-auto my-4">
+    <div className="mx-auto my-4 flex max-w-xl flex-col rounded-lg border border-neutral-200 bg-white p-8 dark:border-neutral-800 dark:bg-black md:p-12">
       <h2 className="text-xl font-bold">Oh no!</h2>
-      <p className="my-2">There was an issue with our storefront. This could be a temporary issue, please try your action again.</p>
+      <p className="my-2">
-      <button className="w-full mt-4 flex mx-auto items-center justify-center rounded-full bg-blue-600 p-4 tracking-wide text-white hover:opacity-90" onClick={() => reset()}>Try Again</button>
+        There was an issue with our storefront. This could be a temporary issue, please try your
+        action again.
+      </p>
+      <button
+        className="mx-auto mt-4 flex w-full items-center justify-center rounded-full bg-blue-600 p-4 tracking-wide text-white hover:opacity-90"
+        onClick={() => reset()}
+      >
+        Try Again
+      </button>
     </div>
   );
 }

components/cart/actions.ts

@@ -18,13 +18,13 @@ export const addItem = async (variantId: string | undefined): Promise<String | u
   }
 
   if (!variantId) {
-    return 'Missing product variant ID'
+    return 'Missing product variant ID';
   }
 
   try {
     await addToCart(cartId, [{ merchandiseId: variantId, quantity: 1 }]);
   } catch (e) {
-    return 'Error adding item to cart'
+    return 'Error adding item to cart';
   }
 };
 
@@ -37,7 +37,7 @@ export const removeItem = async (lineId: string): Promise<String | undefined> =>
   try {
     await removeFromCart(cartId, [lineId]);
   } catch (e) {
-    return 'Error removing item from cart'
+    return 'Error removing item from cart';
   }
 };
 
@@ -64,6 +64,6 @@ export const updateItemQuantity = async ({
       }
     ]);
   } catch (e) {
-    return 'Error updating item quantity'
+    return 'Error updating item quantity';
   }
 };

components/cart/add-to-cart.tsx

@@ -26,43 +26,43 @@ export function AddToCart({
   );
   const selectedVariantId = variant?.id || defaultVariantId;
   const title = !availableForSale
-  ? 'Out of stock'
+    ? 'Out of stock'
-  : !selectedVariantId
+    : !selectedVariantId
-  ? 'Please select options'
+    ? 'Please select options'
-  : undefined;
+    : undefined;
 
   return (
-      <button
+    <button
-        aria-label="Add item to cart"
+      aria-label="Add item to cart"
-        disabled={isPending || !availableForSale || !selectedVariantId}
+      disabled={isPending || !availableForSale || !selectedVariantId}
-        title={title}
+      title={title}
-        onClick={() => {
+      onClick={() => {
-          // Safeguard in case someone messes with `disabled` in devtools.
+        // Safeguard in case someone messes with `disabled` in devtools.
-          if (!availableForSale || !selectedVariantId) return;
+        if (!availableForSale || !selectedVariantId) return;
 
-          startTransition(async () => {
+        startTransition(async () => {
-            const error = await addItem(selectedVariantId);
+          const error = await addItem(selectedVariantId);
 
-            if (error) {
+          if (error) {
-              // Trigger the error boundary in the root error.js
+            // Trigger the error boundary in the root error.js
-              throw new Error(error.toString());
+            throw new Error(error.toString());
-            }
-
-            router.refresh();
-          });
-        }}
-        className={clsx(
-          'relative flex w-full items-center justify-center rounded-full bg-blue-600 p-4 tracking-wide text-white hover:opacity-90',
-          {
-            'cursor-not-allowed opacity-60 hover:opacity-60': !availableForSale || !selectedVariantId,
-            'cursor-not-allowed': isPending
           }
-        )}
+
-      >
+          router.refresh();
-        <div className="absolute left-0 ml-4">
+        });
-          {!isPending ? <PlusIcon className="h-5" /> : <LoadingDots className="mb-3 bg-white" />}
+      }}
-        </div>
+      className={clsx(
-        <span>{availableForSale ? 'Add To Cart' : 'Out Of Stock'}</span>
+        'relative flex w-full items-center justify-center rounded-full bg-blue-600 p-4 tracking-wide text-white hover:opacity-90',
-      </button>
+        {
+          'cursor-not-allowed opacity-60 hover:opacity-60': !availableForSale || !selectedVariantId,
+          'cursor-not-allowed': isPending
+        }
+      )}
+    >
+      <div className="absolute left-0 ml-4">
+        {!isPending ? <PlusIcon className="h-5" /> : <LoadingDots className="mb-3 bg-white" />}
+      </div>
+      <span>{availableForSale ? 'Add To Cart' : 'Out Of Stock'}</span>
+    </button>
   );
 }

package.json

@@ -43,7 +43,7 @@
     "eslint-plugin-unicorn": "^48.0.0",
     "lint-staged": "^13.2.3",
     "postcss": "^8.4.27",
-    "prettier": "^3.0.0",
+    "prettier": "3.0.1",
     "prettier-plugin-tailwindcss": "^0.4.1",
     "tailwindcss": "^3.3.3",
     "typescript": "5.1.6"

pnpm-lock.yaml

@@ -61,11 +61,11 @@ devDependencies:
     specifier: ^8.4.27
     version: 8.4.27
   prettier:
-    specifier: ^3.0.0
+    specifier: 3.0.1
-    version: 3.0.0
+    version: 3.0.1
   prettier-plugin-tailwindcss:
     specifier: ^0.4.1
-    version: 0.4.1(prettier@3.0.0)
+    version: 0.4.1(prettier@3.0.1)
   tailwindcss:
     specifier: ^3.3.3
     version: 3.3.3
@@ -2630,7 +2630,7 @@ packages:
     engines: {node: '>= 0.8.0'}
     dev: true
 
-  /prettier-plugin-tailwindcss@0.4.1(prettier@3.0.0):
+  /prettier-plugin-tailwindcss@0.4.1(prettier@3.0.1):
     resolution: {integrity: sha512-hwn2EiJmv8M+AW4YDkbjJ6HlZCTzLyz1QlySn9sMuKV/Px0fjwldlB7tol8GzdgqtkdPtzT3iJ4UzdnYXP25Ag==}
     engines: {node: '>=12.17.0'}
     peerDependencies:
@@ -2682,11 +2682,11 @@ packages:
       prettier-plugin-twig-melody:
         optional: true
     dependencies:
-      prettier: 3.0.0
+      prettier: 3.0.1
     dev: true
 
-  /prettier@3.0.0:
+  /prettier@3.0.1:
-    resolution: {integrity: sha512-zBf5eHpwHOGPC47h0zrPyNn+eAEIdEzfywMoYn2XPi0P44Zp0tSq64rq0xAREh4auw2cJZHo9QUob+NqCQky4g==}
+    resolution: {integrity: sha512-fcOWSnnpCrovBsmFZIGIy9UqK2FaI7Hqax+DIO0A9UxeVoY4iweyaFjS5TavZN97Hfehph0nhsZnjlVKzEQSrQ==}
     engines: {node: '>=14'}
     hasBin: true
     dev: true