chore: update deps (#2297)

tauseefsshah · thecrypticace · web-flow · commit b29b3f3b5d48 · 2025-06-30T10:07:46.000-04:00
In `package.json` file the `@types/mdx` is incorrectly placed in
`dependencies` rather than `devDependencies` and ran `pnpm update`

---------

Co-authored-by: Jordan Pittman &lt;jordan@cryptica.me&gt;
diff --git a/package.json b/package.json
@@ -14,32 +14,32 @@
     "@headlessui/react": "0.0.0-insiders.b6f355d1",
     "@heroicons/react": "^2.2.0",
     "@next/mdx": "15.3.0-canary.23",
-    "@shikijs/transformers": "^1.29.1",
-    "@tailwindcss/postcss": "^4.1.5",
-    "@types/mdx": "^2.0.13",
+    "@shikijs/transformers": "^1.29.2",
+    "@tailwindcss/postcss": "^4.1.11",
     "clsx": "^2.1.1",
-    "dedent": "^1.5.3",
+    "dedent": "^1.6.0",
     "fathom-client": "^3.7.2",
-    "feed": "^5.0.1",
-    "framer-motion": "^12.18.1",
-    "motion": "^12.18.1",
-    "next": "15.3.2",
+    "feed": "^5.1.0",
+    "framer-motion": "^12.20.0",
+    "motion": "^12.20.0",
+    "next": "15.3.4",
     "open-graph-scraper-lite": "^2.1.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "shiki": "^1.29.1",
+    "shiki": "^1.29.2",
     "tailwindcss": "^4.1.11"
   },
   "devDependencies": {
     "@svgr/webpack": "^8.1.0",
-    "@tailwindcss/node": "^4.1.6",
+    "@tailwindcss/node": "^4.1.11",
     "@types/hast": "^3.0.4",
-    "@types/node": "^22.15.17",
-    "@types/react": "^19.1.3",
-    "@types/react-dom": "^19.1.4",
+    "@types/mdx": "^2.0.13",
+    "@types/node": "^22.15.33",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
     "hast-util-to-jsx-runtime": "^2.3.6",
-    "prettier-plugin-svelte": "^3.3.3",
-    "prettier-plugin-tailwindcss": "0.6.11",
+    "prettier-plugin-svelte": "^3.4.0",
+    "prettier-plugin-tailwindcss": "0.6.13",
     "typescript": "^5.8.3"
   },
   "prettier": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/search.tsx b/src/components/search.tsx
@@ -247,7 +247,7 @@ function Hit({ hit, children }: { hit: any; children: React.ReactNode }) {
       >
         {children}
       </a>
-    )
+    );
   }
 
   return (
diff --git a/src/docs/adding-custom-styles.mdx b/src/docs/adding-custom-styles.mdx
@@ -469,7 +469,7 @@ To support literal values, use the `--value('literal')` syntax (notice the quote
 ```css
 /* [!code filename:CSS] */
 @utility tab-* {
-  tab-size: --value('inherit', 'initial', 'unset');
+  tab-size: --value("inherit", "initial", "unset");
 }
 ```
 
diff --git a/src/docs/font-variant-numeric.mdx b/src/docs/font-variant-numeric.mdx
@@ -187,8 +187,8 @@ The `font-variant-numeric` utilities are composable so you can enable multiple v
       <dd className="border-b border-gray-200 py-2 text-right slashed-zero tabular-nums dark:border-white/10">
         $14.50
       </dd>
-      <dt className="font-medium py-2">Total</dt>
-      <dd className="font-medium py-2 text-right slashed-zero tabular-nums">$114.50</dd>
+      <dt className="py-2 font-medium">Total</dt>
+      <dd className="py-2 text-right font-medium slashed-zero tabular-nums">$114.50</dd>
     </dl>
   }
 </Example>
diff --git a/src/docs/justify-self.mdx b/src/docs/justify-self.mdx
@@ -98,7 +98,9 @@ Use the `justify-self-center` or `justify-self-center-safe` utilities to align a
   {
     <div className="grid grid-cols-1 gap-8">
       <div>
-        <p className="text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">justify-self-center</p>
+        <p className="text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+          justify-self-center
+        </p>
         <div className="mt-4 grid auto-rows-fr grid-cols-3 justify-items-stretch gap-10 text-center font-mono text-sm leading-6 font-bold text-white">
           <div className="rounded-lg bg-indigo-300 p-4 dark:bg-indigo-800 dark:text-indigo-500">01</div>
           <div className="grid grid-cols-1">
diff --git a/src/docs/mask-composite.mdx b/src/docs/mask-composite.mdx
@@ -27,25 +27,25 @@ Use utilities like `mask-add` and `mask-intersect` to control how an element's m
   {
     <div className="grid grid-cols-2 items-center justify-center justify-items-center gap-y-8 py-4 text-center font-mono text-xs font-medium text-gray-500 max-sm:grid-cols-1 dark:text-gray-400">
       <div className="relative grid justify-center">
-        <div className="absolute -bottom-[2px] right-[calc(5%-2px)] box-content size-24 rounded-full border-2 border-dashed border-black/10 dark:border-white/20" />
+        <div className="absolute right-[calc(5%-2px)] -bottom-[2px] box-content size-24 rounded-full border-2 border-dashed border-black/10 dark:border-white/20" />
         <div className="absolute -bottom-[2px] left-[calc(5%-2px)] box-content size-24 rounded-full border-2 border-dashed border-black/10 dark:border-white/20" />
         <p className="mb-3">mask-add</p>
         <div className="h-24 w-48 bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-[radial-gradient(ellipse_25%_50%_at_30%_50%,_white_100%,transparent_100%),_radial-gradient(ellipse_25%_50%_at_70%_50%,_white_100%,transparent_100%)] bg-cover bg-center mask-add"></div>
       </div>
       <div className="relative grid justify-center">
-        <div className="absolute -bottom-[2px] right-[calc(5%-2px)] box-content size-24 rounded-full border-2 border-dashed border-black/10 dark:border-white/20" />
+        <div className="absolute right-[calc(5%-2px)] -bottom-[2px] box-content size-24 rounded-full border-2 border-dashed border-black/10 dark:border-white/20" />
         <div className="absolute -bottom-[2px] left-[calc(5%-2px)] box-content size-24 rounded-full border-2 border-dashed border-black/10 dark:border-white/20" />
         <p className="mb-3 text-center">mask-subtract</p>
         <div className="h-24 w-48 bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-[radial-gradient(ellipse_25%_50%_at_30%_50%,_white_100%,transparent_100%),_radial-gradient(ellipse_25%_50%_at_70%_50%,_white_100%,transparent_100%)] bg-cover bg-center mask-subtract"></div>
       </div>
       <div className="relative grid justify-center">
-        <div className="absolute -bottom-[2px] right-[calc(5%-2px)] box-content size-24 rounded-full border-2 border-dashed border-black/10 dark:border-white/20" />
+        <div className="absolute right-[calc(5%-2px)] -bottom-[2px] box-content size-24 rounded-full border-2 border-dashed border-black/10 dark:border-white/20" />
         <div className="absolute -bottom-[2px] left-[calc(5%-2px)] box-content size-24 rounded-full border-2 border-dashed border-black/10 dark:border-white/20" />
         <p className="mb-3 text-center">mask-intersect</p>
         <div className="h-24 w-48 bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-[radial-gradient(ellipse_25%_50%_at_30%_50%,_white_100%,transparent_100%),_radial-gradient(ellipse_25%_50%_at_70%_50%,_white_100%,transparent_100%)] bg-cover bg-center mask-intersect"></div>
       </div>
       <div className="relative grid justify-center">
-        <div className="absolute -bottom-[2px] right-[calc(5%-2px)] box-content size-24 rounded-full border-2 border-dashed border-black/10 dark:border-white/20" />
+        <div className="absolute right-[calc(5%-2px)] -bottom-[2px] box-content size-24 rounded-full border-2 border-dashed border-black/10 dark:border-white/20" />
         <div className="absolute -bottom-[2px] left-[calc(5%-2px)] box-content size-24 rounded-full border-2 border-dashed border-black/10 dark:border-white/20" />
         <p className="mb-3 text-center">mask-exclude</p>
         <div className="h-24 w-48 bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-[radial-gradient(ellipse_25%_50%_at_30%_50%,_white_100%,transparent_100%),_radial-gradient(ellipse_25%_50%_at_70%_50%,_white_100%,transparent_100%)] bg-cover bg-center mask-exclude"></div>
diff --git a/src/docs/preflight.mdx b/src/docs/preflight.mdx
@@ -241,8 +241,8 @@ For example, source detection affects generated utilities, so `source(…)` shou
 @layer theme, base, components, utilities;
 
 @import "tailwindcss/theme.css" layer(theme);
-@import "tailwindcss/utilities.css" layer(utilities);  /* [!code --] */
-@import "tailwindcss/utilities.css" layer(utilities) source(none);  /* [!code ++] */
+@import "tailwindcss/utilities.css" layer(utilities); /* [!code --] */
+@import "tailwindcss/utilities.css" layer(utilities) source(none); /* [!code ++] */
 ```
 
 The same goes for `important`, which also affects utilities:
@@ -252,8 +252,8 @@ The same goes for `important`, which also affects utilities:
 @layer theme, base, components, utilities;
 
 @import "tailwindcss/theme.css" layer(theme);
-@import "tailwindcss/utilities.css" layer(utilities);  /* [!code --] */
-@import "tailwindcss/utilities.css" layer(utilities) important;  /* [!code ++] */
+@import "tailwindcss/utilities.css" layer(utilities); /* [!code --] */
+@import "tailwindcss/utilities.css" layer(utilities) important; /* [!code ++] */
 ```
 
 Similarly, `theme(static)` and `theme(inline)` affect the generated theme variables and should be placed on the `theme.css` import:
@@ -262,8 +262,8 @@ Similarly, `theme(static)` and `theme(inline)` affect the generated theme variab
 /* [!code filename:CSS] */
 @layer theme, base, components, utilities;
 
-@import "tailwindcss/theme.css" layer(theme);  /* [!code --] */
-@import "tailwindcss/theme.css" layer(theme) theme(static);  /* [!code ++] */
+@import "tailwindcss/theme.css" layer(theme); /* [!code --] */
+@import "tailwindcss/theme.css" layer(theme) theme(static); /* [!code ++] */
 @import "tailwindcss/utilities.css" layer(utilities);
 ```
 
@@ -273,8 +273,8 @@ Finally, using a prefix with `prefix(tw)` affects the utilities and variables, s
 /* [!code filename:CSS] */
 @layer theme, base, components, utilities;
 
-@import "tailwindcss/theme.css" layer(theme);  /* [!code --] */
-@import "tailwindcss/utilities.css" layer(utilities);  /* [!code --] */
-@import "tailwindcss/theme.css" layer(theme) prefix(tw);  /* [!code ++] */
-@import "tailwindcss/utilities.css" layer(utilities) prefix(tw);  /* [!code ++] */
+@import "tailwindcss/theme.css" layer(theme); /* [!code --] */
+@import "tailwindcss/utilities.css" layer(utilities); /* [!code --] */
+@import "tailwindcss/theme.css" layer(theme) prefix(tw); /* [!code ++] */
+@import "tailwindcss/utilities.css" layer(utilities) prefix(tw); /* [!code ++] */
 ```

Original file line number	Diff line number	Diff line change
`@@ -247,7 +247,7 @@ function Hit({ hit, children }: { hit: any; children: React.ReactNode }) {`
`247`	`247`	`>`
`248`	`248`	`{children}`
`249`	`249`	`</a>`
`250`		`- )`
	`250`	`+ );`
`251`	`251`	`}`
`252`	`252`
`253`	`253`	`return (`
Original file line number	Diff line number	Diff line change
@@ -469,7 +469,7 @@ To support literal values, use the `--value('literal')` syntax (notice the quote
`469`	`469`	```css
`470`	`470`	`/* [!code filename:CSS] */`
`471`	`471`	`@utility tab-* {`
`472`		`- tab-size: --value('inherit', 'initial', 'unset');`
	`472`	`+ tab-size: --value("inherit", "initial", "unset");`
`473`	`473`	`}`
`474`	`474`	```
`475`	`475`