Update dependencies + run check:fix (not sure why the class name order changed?)

Author: benface

packages/og-image/package.json

@@ -16,7 +16,7 @@
     "yoga-wasm-web": "^0.3.3"
   },
   "devDependencies": {
-    "@cloudflare/workers-types": "^4.20250723.0",
+    "@cloudflare/workers-types": "^4.20250724.0",
     "@types/react": "^18.3.23",
     "jest-image-snapshot": "^6.5.1",
     "tsx": "^4.20.3",

pnpm-lock.yaml

@@ -34,7 +34,7 @@
     "mdast-util-mdx-jsx": "^3.2.0",
     "mdast-util-to-hast": "^13.2.0",
     "mixpanel-browser": "^2.67.0",
-    "motion": "^12.23.7",
+    "motion": "^12.23.9",
     "next": "^14.2.30",
     "next-seo": "^6.8.0",
     "next-sitemap": "^4.2.3",

website/package.json

@@ -22,21 +22,21 @@ export default function HomePage({ supportedNetworks }: { supportedNetworks: Sup
   return (
     <>
       <div className="graph-docs-not-markdown grid grid-cols-subgrid">
-        <div className="absolute inset-x-0 flex h-70 justify-center pointer-events-none xs:h-90">
+        <div className="xs:h-90 pointer-events-none absolute inset-x-0 flex h-70 justify-center">
           <img
             alt=""
             src={`${process.env.BASE_PATH}/img/home-bg.svg`}
-            className="left-16 h-full max-w-none xs:-top-2 xs:left-0"
+            className="xs:-top-2 xs:left-0 left-16 h-full max-w-none"
           />
         </div>
         <div className="col-[container] py-28">
           <div className="flex flex-col items-start gap-4 lg:flex-row">
             <div className="flex-1 lg:mb-0 lg:max-w-84">
               <h1 className="text-heading-xlarge text-white">{t('index.hero.title')}</h1>
-              <p className="mt-2 text-16">{t('index.hero.description')}</p>
+              <p className="text-16 mt-2">{t('index.hero.description')}</p>
             </div>
             <div className="flex w-full flex-1 justify-end lg:w-auto">
-              <div className="w-full overflow-clip rounded-8 border border-space-1600 bg-space-1800 lg:w-auto">
+              <div className="rounded-8 border-space-1600 bg-space-1800 w-full overflow-clip border lg:w-auto">
                 <div className="relative grid grid-cols-4 gap-px">
                   {[
                     'mainnet',
@@ -59,10 +59,10 @@ export default function HomePage({ supportedNetworks }: { supportedNetworks: Sup
                     .map((id) => supportedNetworks.find((network) => network.id === id))
                     .filter((network): network is typeof network & {} => Boolean(network))
                     .map((network) => (
-                      <div key={network.id} className="-mb-px -mr-px">
+                      <div key={network.id} className="-mr-px -mb-px">
                         <ButtonOrLink
                           href={`/supported-networks/${network.id}`}
-                          className="flex items-center justify-center border-b border-r border-space-1600 px-8 py-5 transition hover:bg-space-1600"
+                          className="border-space-1600 hover:bg-space-1600 flex items-center justify-center border-r border-b px-8 py-5 transition"
                         >
                           <NetworkIcon
                             network={network}
@@ -78,7 +78,7 @@ export default function HomePage({ supportedNetworks }: { supportedNetworks: Sup
                     ))}
                   <ExperimentalLink
                     href="/supported-networks"
-                    className="absolute bottom-0 right-0 flex h-[64px] w-[calc(100%-1px)] items-center justify-center text-14 backdrop-blur-md sm:w-[calc(50%-1px)]"
+                    className="text-14 absolute right-0 bottom-0 flex h-[64px] w-[calc(100%-1px)] items-center justify-center backdrop-blur-md sm:w-[calc(50%-1px)]"
                   >
                     {t('index.supportedNetworks.seeAllNetworks', [
                       supportedNetworks.filter((network) => network.networkType === NetworkType.Mainnet).length,
@@ -90,7 +90,7 @@ export default function HomePage({ supportedNetworks }: { supportedNetworks: Sup
           </div>
         </div>
       </div>
-      <div className="col-[container] nested-[p:empty]:hidden">
+      <div className="nested-[p:empty]:hidden col-[container]">
         <section>
           <Heading.H2 id="products" className="mt-0">
             {t('index.products.title')}
@@ -107,7 +107,7 @@ export default function HomePage({ supportedNetworks }: { supportedNetworks: Sup
                   </ExperimentalLink>
                 }
                 icon={
-                  <div className="flex size-8 items-center justify-center rounded-4 bg-purple-500 text-white">
+                  <div className="rounded-4 flex size-8 items-center justify-center bg-purple-500 text-white">
                     <Subgraph size={4} />
                   </div>
                 }
@@ -122,7 +122,7 @@ export default function HomePage({ supportedNetworks }: { supportedNetworks: Sup
                   </ExperimentalLink>
                 }
                 icon={
-                  <div className="flex size-8 items-center justify-center rounded-4 bg-pink text-white">
+                  <div className="rounded-4 bg-pink flex size-8 items-center justify-center text-white">
                     <Substreams size={4} />
                   </div>
                 }
@@ -137,7 +137,7 @@ export default function HomePage({ supportedNetworks }: { supportedNetworks: Sup
                   <ExperimentalLink href="/token-api/quick-start/">{t('index.products.tokenApi.cta')}</ExperimentalLink>
                 }
                 icon={
-                  <div className="flex size-8 items-center justify-center rounded-4 bg-space-1400 text-white">
+                  <div className="rounded-4 bg-space-1400 flex size-8 items-center justify-center text-white">
                     <APIToken size={4} />
                   </div>
                 }
@@ -151,7 +151,7 @@ export default function HomePage({ supportedNetworks }: { supportedNetworks: Sup
                   </ExperimentalLink>
                 }
                 icon={
-                  <div className="flex size-8 items-center justify-center rounded-4 bg-space-1400 text-white">
+                  <div className="rounded-4 bg-space-1400 flex size-8 items-center justify-center text-white">
                     <GraphNode size={4} />
                   </div>
                 }
@@ -165,7 +165,7 @@ export default function HomePage({ supportedNetworks }: { supportedNetworks: Sup
                   </ExperimentalLink>
                 }
                 icon={
-                  <div className="flex size-8 items-center justify-center rounded-4 bg-space-1400 text-white">
+                  <div className="rounded-4 bg-space-1400 flex size-8 items-center justify-center text-white">
                     <Firehose size={4} />
                   </div>
                 }
@@ -188,8 +188,8 @@ export default function HomePage({ supportedNetworks }: { supportedNetworks: Sup
               </ExperimentalLink>,
             ])}
           </p>
-          <div className="graph-docs-not-markdown mt-8 overflow-clip rounded-8 border border-space-1500">
-            <ul className="grid grid-cols-auto-fill-16 gap-px text-space-500">
+          <div className="graph-docs-not-markdown rounded-8 border-space-1500 mt-8 overflow-clip border">
+            <ul className="grid-cols-auto-fill-16 text-space-500 grid gap-px">
               {supportedNetworks
                 // TODO: Don't filter out testnets that don't have a mainnet
                 .filter((network) => network.networkType === NetworkType.Mainnet)
@@ -202,13 +202,13 @@ export default function HomePage({ supportedNetworks }: { supportedNetworks: Sup
                 // Filter out networks that don't have a proper monochrome logo
                 .filter((network) => network.id !== 'zora')
                 .map((network) => (
-                  <li key={network.id} className="-mb-px -mr-px">
+                  <li key={network.id} className="-mr-px -mb-px">
                     <Tooltip content={network.shortName}>
                       <ButtonOrLink
                         href={`/supported-networks/${network.id}`}
                         className={`
-                          flex aspect-square items-center justify-center border-b border-r border-space-1500 -outline-offset-1 transition
-                          hover:bg-space-1600
+                          border-space-1500 hover:bg-space-1600 flex aspect-square items-center justify-center border-r border-b -outline-offset-1
+                          transition
                         `}
                       >
                         <NetworkIcon network={network} size={6} />
@@ -289,7 +289,7 @@ export default function HomePage({ supportedNetworks }: { supportedNetworks: Sup
               href="https://www.youtube.com/@GraphProtocol"
               target="_blank"
               iconBefore={<SocialYouTube alt="" />}
-              className="top-[-3px] text-14 text-space-200"
+              className="text-14 text-space-200 top-[-3px]"
             >
               <span className="max-lg:hidden">{t('index.videos.watchOnYouTube')}</span>
               <span className="lg:hidden">YouTube</span>

website/src/HomePage.tsx

@@ -43,12 +43,12 @@ export const Callout = ({
     <div
       data-variant={variant}
       className={classNames([
-        `text-body-small flex gap-2 rounded-8 border p-3
-        data-[variant=important]:border-solar-500/50
-        data-[variant=info]:border-galactic-500/50
-        data-[variant=important]:bg-solar-500/10
-        data-[variant=info]:bg-galactic-500/10
-        --:my-8 --:last:mb-0 -:is-[li>*]:my-4`,
+        `text-body-small rounded-8 data-[variant=important]:border-solar-500/50 data-[variant=info]:border-galactic-500/50 data-[variant=important]:bg-solar-500/10 data-[variant=info]:bg-galactic-500/10
+        --:my-8
+        --:last:mb-0
+        -:is-[li>*]:my-4
+        flex
+        gap-2 border p-3`,
         className,
       ])}
       {...(props as ComponentProps<'div'>)}
@@ -62,10 +62,10 @@ export const Callout = ({
       </div>
       <div
         className={`
-          flex-1
           -:first:*:text-white
           mdx-[:is(p,ul,ol):not(:last-child,:is(ul,ol)_*)]:mb-2
           mdx-[ul,ol]:gap-1
+          flex-1
         `}
       >
         {typeof title === 'string' ? <p>{title}</p> : title}

website/src/components/Callout.tsx

@@ -52,31 +52,31 @@ export const Card = ({
       className={classNames([
         `text-body-xsmall
         [--gds-card-bg-hover:theme(colors.space-1600)]
-        [--gds-card-bg:transparent]
         [--gds-card-border-hover:theme(colors.space-1400)]
-        [--gds-card-border:theme(colors.space-1500)]`,
+        [--gds-card-border:theme(colors.space-1500)]
+        [--gds-card-bg:transparent]`,
         className,
       ])}
       {...props}
     >
-      <div className="flex h-full flex-col gap-6 xs:flex-row">
+      <div className="xs:flex-row flex h-full flex-col gap-6">
         {videoThumbnailSrc ? (
-          <div className="peer -m-4 aspect-video max-xs:mb-0 xs:me-0 xs:w-1/2 xs:max-w-64 xs:self-center">
-            <img src={videoThumbnailSrc} alt="" className="size-full rounded-6 object-cover" />
+          <div className="peer max-xs:mb-0 xs:me-0 xs:w-1/2 xs:max-w-64 xs:self-center -m-4 aspect-video">
+            <img src={videoThumbnailSrc} alt="" className="rounded-6 size-full object-cover" />
           </div>
         ) : null}
-        <div className="flex flex-1 flex-col gap-6 xs:peer-[:has(img)]:self-center">
+        <div className="xs:peer-[:has(img)]:self-center flex flex-1 flex-col gap-6">
           {icon && iconPosition === 'top' ? (
-            <div className="shrink-0 grow-[9999] nested-icon:default-size-6">{icon}</div>
+            <div className="nested-icon:default-size-6 shrink-0 grow-[9999]">{icon}</div>
           ) : null}
           <div className="flex grow gap-4">
-            {icon && iconPosition === 'side' ? <div className="shrink-0 nested-icon:default-size-6">{icon}</div> : null}
+            {icon && iconPosition === 'side' ? <div className="nested-icon:default-size-6 shrink-0">{icon}</div> : null}
             <div className="flex flex-col gap-2">
               {slotAboveTitle ? <div className="mb-1">{slotAboveTitle}</div> : null}
-              <h3 className="text-body-small-tight -my-0.5 text-space-200 font-medium">{title}</h3>
-              {description ? <p className="-mb-1 text-space-700">{description}</p> : null}
+              <h3 className="text-body-small-tight text-space-200 -my-0.5 font-medium">{title}</h3>
+              {description ? <p className="text-space-700 -mb-1">{description}</p> : null}
               {slotBelowDescription ? <div className="mt-1">{slotBelowDescription}</div> : null}
-              {cta ? <div className="text-body-xsmall-tight -mb-0.5 mt-1">{cta}</div> : null}
+              {cta ? <div className="text-body-xsmall-tight mt-1 -mb-0.5">{cta}</div> : null}
             </div>
           </div>
         </div>

website/src/components/Card.tsx

@@ -8,12 +8,12 @@ export const Image = ({ src, alt, className, ...props }: ImageProps) => {
   return (
     <figure
       className={classNames([
-        'graph-docs-not-markdown rounded-8 bg-space-1600 p-2 --:my-8 --:last:mb-0 -:is-[li>*]:my-4',
+        'graph-docs-not-markdown rounded-8 bg-space-1600 --:my-8 --:last:mb-0 -:is-[li>*]:my-4 p-2',
         className,
       ])}
     >
-      <img src={src} alt="" className="w-full rounded-4 bg-space-1800" {...props} />
-      {alt ? <figcaption className="text-body-xsmall mt-2 px-1 text-center text-space-700">{alt}</figcaption> : null}
+      <img src={src} alt="" className="rounded-4 bg-space-1800 w-full" {...props} />
+      {alt ? <figcaption className="text-body-xsmall text-space-700 mt-2 px-1 text-center">{alt}</figcaption> : null}
     </figure>
   )
 }