npm - @shopify/cli - Versions diffs - 3.77.0 → 3.78.0 - Mend

@shopify/cli 3.77.0 → 3.78.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (101) hide show

package/dist/assets/hydrogen/bundle/analyzer.html CHANGED Viewed

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <!-- Open this file in your browser for an interactive view of your bundle  -->
 <!-- saved from url=(0034)https://esbuild.github.io/analyze/ -->
@@ -94,7 +94,9 @@
         color: var(--fg-on);
       }
       code {
-        font: 14px/20px Noto Sans Mono, monospace;
+        font:
+          14px/20px Noto Sans Mono,
+          monospace;
         background: rgba(127, 127, 127, 0.2);
         padding: 2px 4px;
         margin-bottom: -2px;
@@ -102,7 +104,9 @@
       }
       pre {
         color: var(--pre);
-        font: 14px/20px Noto Sans Mono, monospace;
+        font:
+          14px/20px Noto Sans Mono,
+          monospace;
         padding: 0;
         margin: 0;
         white-space: pre-wrap;
@@ -598,12 +602,12 @@
             e === 1
               ? '1 byte'
               : e < 1024
-              ? xe(e) + ' bytes'
-              : e < 1024 * 1024
-              ? Ke(e / 1024) + ' kb'
-              : e < 1024 * 1024 * 1024
-              ? Ke(e / (1024 * 1024)) + ' mb'
-              : Ke(e / (1024 * 1024 * 1024)) + ' gb',
+                ? xe(e) + ' bytes'
+                : e < 1024 * 1024
+                  ? Ke(e / 1024) + ' kb'
+                  : e < 1024 * 1024 * 1024
+                    ? Ke(e / (1024 * 1024)) + ' mb'
+                    : Ke(e / (1024 * 1024 * 1024)) + ' gb',
           H = (e) =>
             e
               .replace(/&/g, '&amp;')
@@ -873,10 +877,10 @@
             e === Se
               ? ''
               : e === we
-              ? t + 'ESM'
-              : e === He
-              ? t + 'CJS'
-              : t + 'ESM & CJS',
+                ? t + 'ESM'
+                : e === He
+                  ? t + 'CJS'
+                  : t + 'ESM & CJS',
           Ft = (e, t) => {
             let r = t.o,
               s = 0,
@@ -920,8 +924,8 @@
               x === 'esm'
                 ? (l += O.bytes)
                 : x === 'cjs'
-                ? (o += O.bytes)
-                : (m += O.bytes),
+                  ? (o += O.bytes)
+                  : (m += O.bytes),
                 n++,
                 (u += O.bytes);
             }
@@ -1031,8 +1035,8 @@
                 (s.format === 'esm'
                   ? '<br>Module format: <b>ESM</b>'
                   : s.format === 'cjs'
-                  ? '<br>Module format: <b>CommonJS</b>'
-                  : '') +
+                    ? '<br>Module format: <b>CommonJS</b>'
+                    : '') +
                 '</p>'),
               el(i, pt, t);
             let u = d.createElement('a');

package/dist/assets/hydrogen/starter/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,136 @@
 # skeleton
+## 2025.1.6
+### Patch Changes
+- Moved the `Layout` component back into `root.tsx` to avoid issues with styled errors. ([#2829](https://github.com/Shopify/hydrogen/pull/2829)) by [@ruggishop](https://github.com/ruggishop)
+  1. If you have a separate `app/layout.tsx` file, delete it and move its default exported component into your `root.tsx`. For example:
+     ```ts
+     // /app/root.tsx
+     export function Layout({children}: {children?: React.ReactNode}) {
+       const nonce = useNonce();
+       const data = useRouteLoaderData<RootLoader>('root');
+       return (
+         <html lang="en">
+         ...
+       );
+     }
+     ```
+## 2025.1.5
+### Patch Changes
+- Fixed an issue with the creation of JavaScript projects. ([#2818](https://github.com/Shopify/hydrogen/pull/2818)) by [@seanparsons](https://github.com/seanparsons)
+## 2025.1.4
+### Patch Changes
+- Updates the `@shopify/cli`, `@shopify/cli-kit` and `@shopify/plugin-cloudflare` dependencies to 3.77.1. ([#2816](https://github.com/Shopify/hydrogen/pull/2816)) by [@seanparsons](https://github.com/seanparsons)
+## 2025.1.3
+### Patch Changes
+- Bump Remix to 2.16.1 and vite to 6.2.0 ([#2784](https://github.com/Shopify/hydrogen/pull/2784)) by [@wizardlyhel](https://github.com/wizardlyhel)
+- Update skeleton and create-hydrogen cli to 3.75.4 ([#2769](https://github.com/Shopify/hydrogen/pull/2769)) by [@juanpprieto](https://github.com/juanpprieto)
+- Fixing typescript compile ([#2787](https://github.com/Shopify/hydrogen/pull/2787)) by [@balazsbajorics](https://github.com/balazsbajorics)
+  In tsconfig.json:
+  ```diff
+       "types": [
+         "@shopify/oxygen-workers-types",
+  -      "@remix-run/node",
+  +      "@remix-run/server-runtime",
+         "vite/client"
+       ],
+  ```
+- Updates `@shopify/cli-kit`, `@shopify/cli` and `@shopify/plugin-cloudflare` to `3.77.0`. ([#2810](https://github.com/Shopify/hydrogen/pull/2810)) by [@seanparsons](https://github.com/seanparsons)
+- Support for the Remix future flag `v3_routeConfig`. ([#2722](https://github.com/Shopify/hydrogen/pull/2722)) by [@seanparsons](https://github.com/seanparsons)
+  Please refer to the Remix documentation for more details on `v3_routeConfig` future flag: [https://remix.run/docs/en/main/start/future-flags#v3_routeconfig](https://remix.run/docs/en/main/start/future-flags#v3_routeconfig)
+  1. Update your `vite.config.ts`.
+     ```diff
+     export default defineConfig({
+       plugins: [
+         hydrogen(),
+         oxygen(),
+         remix({
+     -      presets: [hydrogen.preset()],
+     +      presets: [hydrogen.v3preset()],
+         future: {
+           v3_fetcherPersist: true,
+           v3_relativeSplatPath: true,
+           v3_throwAbortReason: true,
+           v3_lazyRouteDiscovery: true,
+           v3_singleFetch: true,
+     +      v3_routeConfig: true,
+         },
+       }),
+       tsconfigPaths(),
+     ],
+     ```
+  1. Update your `package.json` and install the new packages. Make sure to match the Remix version along with other Remix npm packages and ensure the versions are 2.16.1 or above:
+     ```diff
+       "devDependencies": {
+         "@remix-run/dev": "^2.16.1",
+     +    "@remix-run/fs-routes": "^2.16.1",
+     +    "@remix-run/route-config": "^2.16.1",
+     ```
+  1. Move the `Layout` component export from `root.tsx` into its own file. Make sure to supply an `<Outlet>` so Remix knows where to inject your route content.
+     ```ts
+     // /app/layout.tsx
+     import {Outlet} from '@remix-run/react';
+     export default function Layout() {
+       const nonce = useNonce();
+       const data = useRouteLoaderData<RootLoader>('root');
+       return (
+         <html lang="en">
+           ...
+           <Outlet />
+           ...
+         </html>
+       );
+     }
+     // Remember to remove the Layout export from your root.tsx
+     ```
+  1. Add a routes.ts file. This is your new Remix route configuration file.
+     ```ts
+     import { flatRoutes } from "@remix-run/fs-routes";
+     import { layout, type RouteConfig } from "@remix-run/route-config";
+     import { hydrogenRoutes } from "@shopify/hydrogen";
+     export default hydrogenRoutes([
+       // Your entire app reading from routes folder using Layout from layout.tsx
+       layout("./layout.tsx", await flatRoutes()),
+     ]) satisfies RouteConfig;
+     ```
+- Updated dependencies [[`0425e50d`](https://github.com/Shopify/hydrogen/commit/0425e50dafe2f42326cba67076e5fcea2905e885), [`74ef1ba7`](https://github.com/Shopify/hydrogen/commit/74ef1ba7d41988350e9d2c81731c90381943d1f0)]:
+  - @shopify/remix-oxygen@2.0.12
+  - @shopify/hydrogen@2025.1.3
 ## 2025.1.2
 ### Patch Changes
@@ -583,25 +714,25 @@
   8. Update the `ProductForm` component.
   ```tsx
-  import {Link, useNavigate} from '@remix-run/react';
-  import {type MappedProductOptions} from '@shopify/hydrogen';
+  import { Link, useNavigate } from "@remix-run/react";
+  import { type MappedProductOptions } from "@shopify/hydrogen";
   import type {
     Maybe,
     ProductOptionValueSwatch,
-  } from '@shopify/hydrogen/storefront-api-types';
-  import {AddToCartButton} from './AddToCartButton';
-  import {useAside} from './Aside';
-  import type {ProductFragment} from 'storefrontapi.generated';
+  } from "@shopify/hydrogen/storefront-api-types";
+  import { AddToCartButton } from "./AddToCartButton";
+  import { useAside } from "./Aside";
+  import type { ProductFragment } from "storefrontapi.generated";
   export function ProductForm({
     productOptions,
     selectedVariant,
   }: {
     productOptions: MappedProductOptions[];
-    selectedVariant: ProductFragment['selectedOrFirstAvailableVariant'];
+    selectedVariant: ProductFragment["selectedOrFirstAvailableVariant"];
   }) {
     const navigate = useNavigate();
-    const {open} = useAside();
+    const { open } = useAside();
     return (
       <div className="product-form">
         {productOptions.map((option) => (
@@ -635,8 +766,8 @@
                       to={`/products/${handle}?${variantUriQuery}`}
                       style={{
                         border: selected
-                          ? '1px solid black'
-                          : '1px solid transparent',
+                          ? "1px solid black"
+                          : "1px solid transparent",
                         opacity: available ? 1 : 0.3,
                       }}
                     >
@@ -653,13 +784,13 @@
                     <button
                       type="button"
                       className={`product-options-item${
-                        exists && !selected ? ' link' : ''
+                        exists && !selected ? " link" : ""
                       }`}
                       key={option.name + name}
                       style={{
                         border: selected
-                          ? '1px solid black'
-                          : '1px solid transparent',
+                          ? "1px solid black"
+                          : "1px solid transparent",
                         opacity: available ? 1 : 0.3,
                       }}
                       disabled={!exists}
@@ -683,7 +814,7 @@
         <AddToCartButton
           disabled={!selectedVariant || !selectedVariant.availableForSale}
           onClick={() => {
-            open('cart');
+            open("cart");
           }}
           lines={
             selectedVariant
@@ -697,7 +828,7 @@
               : []
           }
         >
-          {selectedVariant?.availableForSale ? 'Add to cart' : 'Sold out'}
+          {selectedVariant?.availableForSale ? "Add to cart" : "Sold out"}
         </AddToCartButton>
       </div>
     );
@@ -720,7 +851,7 @@
         aria-label={name}
         className="product-option-label-swatch"
         style={{
-          backgroundColor: color || 'transparent',
+          backgroundColor: color || "transparent",
         }}
       >
         {!!image && <img src={image} alt={name} />}
@@ -1221,21 +1352,21 @@
   New `withCache.fetch` is for caching simple fetch requests. This method caches the responses if they are OK responses, and you can pass `shouldCacheResponse`, `cacheKey`, etc. to modify behavior. `data` is the consumed body of the response (we need to consume to cache it).
   ```ts
-  const withCache = createWithCache({cache, waitUntil, request});
+  const withCache = createWithCache({ cache, waitUntil, request });
-  const {data, response} = await withCache.fetch<{data: T; error: string}>(
-    'my-cms.com/api',
+  const { data, response } = await withCache.fetch<{ data: T; error: string }>(
+    "my-cms.com/api",
     {
-      method: 'POST',
-      headers: {'Content-type': 'application/json'},
+      method: "POST",
+      headers: { "Content-type": "application/json" },
       body,
     },
     {
       cacheStrategy: CacheLong(),
       // Cache if there are no data errors or a specific data that make this result not suited for caching
       shouldCacheResponse: (result) => !result?.error,
-      cacheKey: ['my-cms', body],
-      displayName: 'My CMS query',
+      cacheKey: ["my-cms", body],
+      displayName: "My CMS query",
     },
   );
   ```
@@ -1811,9 +1942,9 @@
   ```tsx
   // app/lib/root-data.ts
-  import {useMatches} from '@remix-run/react';
-  import type {SerializeFrom} from '@shopify/remix-oxygen';
-  import type {loader} from '~/root';
+  import { useMatches } from "@remix-run/react";
+  import type { SerializeFrom } from "@shopify/remix-oxygen";
+  import type { loader } from "~/root";
   /**
    * Access the result of the root loader from a React component.
@@ -1975,10 +2106,10 @@
 - This is an important fix to a bug with 404 routes and path-based i18n projects where some unknown routes would not properly render a 404. This fixes all new projects, but to fix existing projects, add a `($locale).tsx` route with the following contents: ([#1732](https://github.com/Shopify/hydrogen/pull/1732)) by [@blittle](https://github.com/blittle)
   ```ts
-  import {type LoaderFunctionArgs} from '@remix-run/server-runtime';
+  import { type LoaderFunctionArgs } from "@remix-run/server-runtime";
-  export async function loader({params, context}: LoaderFunctionArgs) {
-    const {language, country} = context.storefront.i18n;
+  export async function loader({ params, context }: LoaderFunctionArgs) {
+    const { language, country } = context.storefront.i18n;
     if (
       params.locale &&
@@ -1986,7 +2117,7 @@
     ) {
       // If the locale URL param is defined, yet we still are still at the default locale
       // then the the locale param must be invalid, send to the 404 page
-      throw new Response(null, {status: 404});
+      throw new Response(null, { status: 404 });
     }
     return null;
@@ -2042,11 +2173,11 @@
   ```yaml
   projects:
     default:
-      schema: 'node_modules/@shopify/hydrogen/storefront.schema.json'
+      schema: "node_modules/@shopify/hydrogen/storefront.schema.json"
       documents:
-        - '!*.d.ts'
-        - '*.{ts,tsx,js,jsx}'
-        - 'app/**/*.{ts,tsx,js,jsx}'
+        - "!*.d.ts"
+        - "*.{ts,tsx,js,jsx}"
+        - "app/**/*.{ts,tsx,js,jsx}"
   ```
 - Improve resiliency of `HydrogenSession` ([#1583](https://github.com/Shopify/hydrogen/pull/1583)) by [@blittle](https://github.com/blittle)
@@ -2261,8 +2392,8 @@
   ```ts
   // root.tsx
-  import {useMatches} from '@remix-run/react';
-  import {type SerializeFrom} from '@shopify/remix-oxygen';
+  import { useMatches } from "@remix-run/react";
+  import { type SerializeFrom } from "@shopify/remix-oxygen";
   export const useRootLoaderData = () => {
     const [root] = useMatches();

package/dist/assets/hydrogen/starter/app/root.tsx CHANGED Viewed

@@ -1,21 +1,21 @@
-import {useNonce, getShopAnalytics, Analytics} from '@shopify/hydrogen';
+import {Analytics, getShopAnalytics, useNonce} from '@shopify/hydrogen';
 import {type LoaderFunctionArgs} from '@shopify/remix-oxygen';
 import {
-  Links,
-  Meta,
   Outlet,
-  Scripts,
   useRouteError,
-  useRouteLoaderData,
-  ScrollRestoration,
   isRouteErrorResponse,
   type ShouldRevalidateFunction,
+  Links,
+  Meta,
+  Scripts,
+  ScrollRestoration,
+  useRouteLoaderData,
 } from '@remix-run/react';
 import favicon from '~/assets/favicon.svg';
+import {FOOTER_QUERY, HEADER_QUERY} from '~/lib/fragments';
 import resetStyles from '~/styles/reset.css?url';
 import appStyles from '~/styles/app.css?url';
-import {PageLayout} from '~/components/PageLayout';
-import {FOOTER_QUERY, HEADER_QUERY} from '~/lib/fragments';
+import {PageLayout} from './components/PageLayout';
 export type RootLoader = typeof loader;
@@ -33,9 +33,9 @@ export const shouldRevalidate: ShouldRevalidateFunction = ({
   // revalidate when manually revalidating via useRevalidator
   if (currentUrl.toString() === nextUrl.toString()) return true;
-  // Defaulting to no revalidation for root loader data to improve performance.
-  // When using this feature, you risk your UI getting out of sync with your server.
-  // Use with caution. If you are uncomfortable with this optimization, update the
+  // Defaulting to no revalidation for root loader data to improve performance.
+  // When using this feature, you risk your UI getting out of sync with your server.
+  // Use with caution. If you are uncomfortable with this optimization, update the
   // line below to `return defaultShouldRevalidate` instead.
   // For more details see: https://remix.run/docs/en/main/route/should-revalidate
   return false;

package/dist/assets/hydrogen/starter/app/routes/search.tsx CHANGED Viewed

@@ -19,9 +19,10 @@ export const meta: MetaFunction = () => {
 export async function loader({request, context}: LoaderFunctionArgs) {
   const url = new URL(request.url);
   const isPredictive = url.searchParams.has('predictive');
-  const searchPromise = isPredictive
-    ? predictiveSearch({request, context})
-    : regularSearch({request, context});
+  const searchPromise: Promise<PredictiveSearchReturn | RegularSearchReturn> =
+    isPredictive
+      ? predictiveSearch({request, context})
+      : regularSearch({request, context});
   searchPromise.catch((error: Error) => {
     console.error(error);

package/dist/assets/hydrogen/starter/app/routes.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import {flatRoutes} from '@remix-run/fs-routes';
+import {type RouteConfig} from '@remix-run/route-config';
+import {hydrogenRoutes} from '@shopify/hydrogen';
+export default hydrogenRoutes([
+  ...(await flatRoutes()),
+  // Manual route definitions can be added to this array, in addition to or instead of using the `flatRoutes` file-based routing convention.
+  // See https://remix.run/docs/en/main/guides/routing for more details
+]) satisfies RouteConfig;

package/dist/assets/hydrogen/starter/package.json CHANGED Viewed

@@ -2,7 +2,7 @@
   "name": "skeleton",
   "private": true,
   "sideEffects": false,
-  "version": "2025.1.2",
+  "version": "2025.1.6",
   "type": "module",
   "scripts": {
     "build": "shopify hydrogen build --codegen",
@@ -14,13 +14,13 @@
   },
   "prettier": "@shopify/prettier-config",
   "dependencies": {
-    "@remix-run/react": "^2.15.3",
-    "@remix-run/server-runtime": "^2.15.3",
-    "@shopify/hydrogen": "2025.1.2",
-    "@shopify/remix-oxygen": "^2.0.11",
-    "graphql": "^16.6.0",
+    "@remix-run/react": "^2.16.1",
+    "@remix-run/server-runtime": "^2.16.1",
+    "graphql": "^16.10.0",
+    "@shopify/hydrogen": "2025.1.3",
+    "@shopify/remix-oxygen": "^2.0.12",
     "graphql-tag": "^2.12.6",
-    "isbot": "^5.1.21",
+    "isbot": "^5.1.22",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
@@ -29,13 +29,16 @@
     "@eslint/eslintrc": "^3.2.0",
     "@eslint/js": "^9.18.0",
     "@graphql-codegen/cli": "5.0.2",
-    "@remix-run/dev": "^2.15.3",
-    "@shopify/cli": "~3.75.3",
-    "@shopify/hydrogen-codegen": "^0.3.2",
-    "@shopify/mini-oxygen": "^3.1.1",
-    "@shopify/oxygen-workers-types": "^4.1.2",
+    "@remix-run/dev": "^2.16.1",
+    "@remix-run/fs-routes": "^2.16.1",
+    "@remix-run/route-config": "^2.16.1",
+    "@shopify/cli": "~3.77.1",
+    "@shopify/hydrogen-codegen": "^0.3.3",
+    "@shopify/mini-oxygen": "^3.2.0",
+    "@shopify/oxygen-workers-types": "^4.1.6",
     "@shopify/prettier-config": "^1.1.2",
-    "@total-typescript/ts-reset": "^0.4.2",
+    "@total-typescript/ts-reset": "^0.6.1",
+    "prettier": "^3.4.2",
     "@types/eslint": "^9.6.1",
     "@types/react": "^18.2.22",
     "@types/react-dom": "^18.2.7",
@@ -51,9 +54,8 @@
     "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-react-hooks": "^5.1.0",
     "globals": "^15.14.0",
-    "prettier": "^2.8.4",
     "typescript": "^5.2.2",
-    "vite": "^5.1.8",
+    "vite": "^6.2.0",
     "vite-tsconfig-paths": "^4.3.1"
   },
   "engines": {

package/dist/assets/hydrogen/starter/tsconfig.json CHANGED Viewed

@@ -16,7 +16,7 @@
     "baseUrl": ".",
     "types": [
       "@shopify/oxygen-workers-types",
-      "@remix-run/node",
+      "@remix-run/server-runtime",
       "vite/client"
     ],
     "paths": {

package/dist/assets/hydrogen/starter/vite.config.ts CHANGED Viewed

@@ -15,12 +15,13 @@ export default defineConfig({
     hydrogen(),
     oxygen(),
     remix({
-      presets: [hydrogen.preset()],
+      presets: [hydrogen.v3preset()],
       future: {
         v3_fetcherPersist: true,
         v3_relativeSplatPath: true,
         v3_throwAbortReason: true,
         v3_lazyRouteDiscovery: true,
+        v3_routeConfig: true,
         v3_singleFetch: true,
       },
     }),

package/dist/assets/hydrogen/tailwind/package.json CHANGED Viewed

@@ -3,6 +3,6 @@
     "defaults"
   ],
   "devDependencies": {
-    "@tailwindcss/vite": "4.0.0-beta.8"
+    "@tailwindcss/vite": "4.0.14"
   }
 }

package/dist/assets/hydrogen/vanilla-extract/package.json CHANGED Viewed

@@ -1,8 +1,8 @@
 {
   "dependencies": {
-    "@vanilla-extract/css": "^1.15.2"
+    "@vanilla-extract/css": "^1.17.1"
   },
   "devDependencies": {
-    "@vanilla-extract/vite-plugin": "^4.0.10"
+    "@vanilla-extract/vite-plugin": "^5.0.1"
   }
 }

package/dist/assets/hydrogen/virtual-routes/assets/debug-network.css CHANGED Viewed

@@ -390,11 +390,8 @@ button:active.primary {
   --gradient-color-end: transparent;
   --background-color: transparent;
-  background-image: linear-gradient(
-      to right,
-      var(--background-color),
-      var(--background-color)
-    ),
+  background-image:
+    linear-gradient(to right, var(--background-color), var(--background-color)),
     linear-gradient(to right, var(--background-color), var(--background-color)),
     linear-gradient(
       to right,
@@ -406,23 +403,43 @@ button:active.primary {
       var(--gradient-color-start),
       var(--gradient-color-end)
     );
-  background-position: left center, right center, left center, right center;
+  background-position:
+    left center,
+    right center,
+    left center,
+    right center;
   background-repeat: no-repeat;
   background-color: var(--background-color);
-  background-size: 20px 100%, 20px 100%, 0px 100%, 0px 100%;
+  background-size:
+    20px 100%,
+    20px 100%,
+    0px 100%,
+    0px 100%;
   background-attachment: local, local, scroll, scroll;
 }
 #tab-buttons-wrapper .fadCover.fadeLeft {
-  background-size: 20px 100%, 20px 100%, 40px 100%, 0px 100%;
+  background-size:
+    20px 100%,
+    20px 100%,
+    40px 100%,
+    0px 100%;
 }
 #tab-buttons-wrapper .fadCover.fadeRight {
-  background-size: 20px 100%, 20px 100%, 0px 100%, 40px 100%;
+  background-size:
+    20px 100%,
+    20px 100%,
+    0px 100%,
+    40px 100%;
 }
 #tab-buttons-wrapper .fadCover.fadeLeftRight {
-  background-size: 20px 100%, 20px 100%, 40px 100%, 40px 100%;
+  background-size:
+    20px 100%,
+    20px 100%,
+    40px 100%,
+    40px 100%;
 }
 .tabPanels .tabPanel {

package/dist/assets/hydrogen/virtual-routes/assets/styles.css CHANGED Viewed

@@ -40,8 +40,19 @@ body {
   padding: 0;
   margin: 0;
   background: #fff;
-  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
-    Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  font-family:
+    'Inter',
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    'Open Sans',
+    'Helvetica Neue',
+    sans-serif;
   -webkit-font-smoothing: antialiased;
   min-height: 100vh;
   display: flex;