From c72ee91e1f3b5d2db2d0f329a84a8872822494ee Mon Sep 17 00:00:00 2001 From: Nathan Thomas <28681364+nwthomas@users.noreply.github.com> Date: Thu, 25 Jun 2026 16:42:10 -0700 Subject: [PATCH] Migrate styling from Tailwind to StyleX --- .../[slug]/opengraph-image/route.tsx | 50 +++- app/(writing)/[slug]/page.tsx | 3 +- app/(writing)/components/blockquote.tsx | 7 +- app/(writing)/components/code.tsx | 16 +- app/(writing)/components/h1.tsx | 7 +- app/(writing)/components/h2.tsx | 9 +- app/(writing)/components/h3.tsx | 7 +- app/(writing)/components/image.tsx | 23 +- app/(writing)/components/li.tsx | 5 +- app/(writing)/components/ol.tsx | 5 +- app/(writing)/components/p.tsx | 5 +- app/(writing)/components/pre.tsx | 18 +- app/(writing)/components/ul.tsx | 5 +- app/(writing)/utils/heading.tsx | 11 +- app/bookmarks/page.tsx | 16 +- app/books/page.tsx | 5 +- app/components/BookCard.tsx | 16 +- app/components/ErrorBoundary.tsx | 4 +- app/components/Footer.tsx | 18 +- app/components/ImageOverlay.tsx | 20 +- app/components/Navbar.tsx | 16 +- app/components/RecentlyPlayed.tsx | 13 +- app/components/ThemeSwitch.tsx | 18 +- app/globals.css | 273 +++++++++++------- app/layout.tsx | 11 +- app/not-found.tsx | 9 +- app/opengraph-image/route.tsx | 111 ++++++- app/page.tsx | 21 +- app/styles/tw.stylex.ts | 189 ++++++++++++ app/writing/page.tsx | 16 +- babel.config.json | 14 + bun.lock | 130 +++------ package.json | 11 +- postcss.config.js | 21 +- tailwind.config.js | 21 -- 35 files changed, 735 insertions(+), 389 deletions(-) create mode 100644 app/styles/tw.stylex.ts create mode 100644 babel.config.json delete mode 100644 tailwind.config.js diff --git a/app/(writing)/[slug]/opengraph-image/route.tsx b/app/(writing)/[slug]/opengraph-image/route.tsx index 17feb347..2ac08d74 100644 --- a/app/(writing)/[slug]/opengraph-image/route.tsx +++ b/app/(writing)/[slug]/opengraph-image/route.tsx @@ -36,17 +36,53 @@ export async function GET(request: NextRequest) { const postViewsPostfix = postViews && postViews == 1 ? "view" : "views"; return new ImageResponse( -
-
- Nathan Thomas -
-

+
+
+ Nathan Thomas +
+

{title}

-

+

{description}

-

+

{postViews != null && postViews != 0 ? `${date} • ${postViews} ${postViewsPostfix}` : date}

diff --git a/app/(writing)/[slug]/page.tsx b/app/(writing)/[slug]/page.tsx index f2f9da50..0575a79c 100644 --- a/app/(writing)/[slug]/page.tsx +++ b/app/(writing)/[slug]/page.tsx @@ -1,3 +1,4 @@ +import { sx } from "@/app/styles/tw.stylex"; import * as Sentry from "@sentry/nextjs"; import { ImageOverlayContainer } from "@/app/components/ImageOverlay"; @@ -58,7 +59,7 @@ export default async function Page({ params }: Props) { // with padding bottom. MDX gives no API for disovery of last index. This // could move to mapping all items and passing an index on props, but // that's overkill for this problem. -
+
{process.env.NODE_ENV === "production" ? : null} diff --git a/app/(writing)/components/blockquote.tsx b/app/(writing)/components/blockquote.tsx index aad0b8b2..2511556a 100644 --- a/app/(writing)/components/blockquote.tsx +++ b/app/(writing)/components/blockquote.tsx @@ -1,3 +1,4 @@ +import { sx } from "@/app/styles/tw.stylex"; import { Children, type ReactNode } from "react"; export function Blockquote({ children }: { children: ReactNode }) { @@ -13,7 +14,7 @@ export function Blockquote({ children }: { children: ReactNode }) { const parts = child.split("\n"); parts.forEach((part, partIndex) => { if (partIndex > 0) { - acc.push(
); + acc.push(
); } if (part !== "") { @@ -25,8 +26,8 @@ export function Blockquote({ children }: { children: ReactNode }) { }, []); return ( -
-
+
+
{normalizedChildren}
diff --git a/app/(writing)/components/code.tsx b/app/(writing)/components/code.tsx index b970d214..ba3c289a 100644 --- a/app/(writing)/components/code.tsx +++ b/app/(writing)/components/code.tsx @@ -1,18 +1,6 @@ +import { sx } from "@/app/styles/tw.stylex"; import type { ReactNode } from "react"; export const Code = ({ children }: { children: ReactNode }) => { - return ( - - {children} - - ); + return {children}; }; diff --git a/app/(writing)/components/h1.tsx b/app/(writing)/components/h1.tsx index 22071e2d..8ad3d380 100644 --- a/app/(writing)/components/h1.tsx +++ b/app/(writing)/components/h1.tsx @@ -1,13 +1,12 @@ +import { sx } from "@/app/styles/tw.stylex"; import { HeadingLevel, getHeading } from "../utils/heading"; import type { ReactNode } from "react"; export function H1({ children }: { children: ReactNode }) { return ( -
-
- {getHeading(children, HeadingLevel.H1)} -
+
+
{getHeading(children, HeadingLevel.H1)}
); } diff --git a/app/(writing)/components/h2.tsx b/app/(writing)/components/h2.tsx index ca136719..720f25b0 100644 --- a/app/(writing)/components/h2.tsx +++ b/app/(writing)/components/h2.tsx @@ -1,13 +1,12 @@ +import { sx } from "@/app/styles/tw.stylex"; import { HeadingLevel, getHeading } from "../utils/heading"; import type { ReactNode } from "react"; -export function H2({ children }: { children: ReactNode, id: string }) { +export function H2({ children }: { children: ReactNode; id: string }) { return ( -
-
- {getHeading(children, HeadingLevel.H2)} -
+
+
{getHeading(children, HeadingLevel.H2)}
); } diff --git a/app/(writing)/components/h3.tsx b/app/(writing)/components/h3.tsx index 444e9d9b..cbe40c29 100644 --- a/app/(writing)/components/h3.tsx +++ b/app/(writing)/components/h3.tsx @@ -1,13 +1,12 @@ +import { sx } from "@/app/styles/tw.stylex"; import { HeadingLevel, getHeading } from "../utils/heading"; import type { ReactNode } from "react"; export function H3({ children }: { children: ReactNode }) { return ( -
-
- {getHeading(children, HeadingLevel.H3)} -
+
+
{getHeading(children, HeadingLevel.H3)}
); } diff --git a/app/(writing)/components/image.tsx b/app/(writing)/components/image.tsx index df788ea4..83dfbb44 100644 --- a/app/(writing)/components/image.tsx +++ b/app/(writing)/components/image.tsx @@ -1,8 +1,8 @@ "use client"; import NextImage from "next/image"; -import clsx from "clsx"; import { showImageOverlay } from "@/app/store/reducers/writingSlice"; +import { sx } from "@/app/styles/tw.stylex"; import { useDispatch } from "react-redux"; import { useState } from "react"; @@ -54,23 +54,22 @@ export function Image({ }; return ( -
+
-

{title}

+

{title}

); } diff --git a/app/(writing)/components/li.tsx b/app/(writing)/components/li.tsx index 969bfa0e..53e79ae5 100644 --- a/app/(writing)/components/li.tsx +++ b/app/(writing)/components/li.tsx @@ -1,9 +1,10 @@ +import { sx } from "@/app/styles/tw.stylex"; import type { ReactNode } from "react"; export function Li({ children }: { children: ReactNode }) { return ( -
-
  • {children}
    • +
    +
  • {children}
    • ); } diff --git a/app/(writing)/components/ol.tsx b/app/(writing)/components/ol.tsx index 5bf82ef4..379be2c3 100644 --- a/app/(writing)/components/ol.tsx +++ b/app/(writing)/components/ol.tsx @@ -1,9 +1,10 @@ +import { sx } from "@/app/styles/tw.stylex"; import type { ReactNode } from "react"; export function Ol({ children }: { children: ReactNode }) { return ( -
    -
      {children}
    +
    +
      {children}
    ); } diff --git a/app/(writing)/components/p.tsx b/app/(writing)/components/p.tsx index abed580b..5213ab2e 100644 --- a/app/(writing)/components/p.tsx +++ b/app/(writing)/components/p.tsx @@ -1,9 +1,10 @@ +import { sx } from "@/app/styles/tw.stylex"; import type { ReactNode } from "react"; export function P({ children }: { children: ReactNode }) { return ( -
    -

    {children}

    +
    +

    {children}

    ); } diff --git a/app/(writing)/components/pre.tsx b/app/(writing)/components/pre.tsx index b8eaf883..5b57ed36 100644 --- a/app/(writing)/components/pre.tsx +++ b/app/(writing)/components/pre.tsx @@ -1,3 +1,4 @@ +import { sx } from "@/app/styles/tw.stylex"; import type { ReactNode } from "react"; export const Pre = ({ @@ -9,20 +10,15 @@ export const Pre = ({ scroll: boolean; caption: ReactNode | null; }) => ( -
    + 
           {children}
    -

    {caption}

    +

    {caption}

    ); diff --git a/app/(writing)/components/ul.tsx b/app/(writing)/components/ul.tsx index d1c993df..7f8029e8 100644 --- a/app/(writing)/components/ul.tsx +++ b/app/(writing)/components/ul.tsx @@ -1,9 +1,10 @@ +import { sx } from "@/app/styles/tw.stylex"; import type { ReactNode } from "react"; export function Ul({ children }: { children: ReactNode }) { return ( -
    -
      {children}
    +
    +
      {children}
    ); } diff --git a/app/(writing)/utils/heading.tsx b/app/(writing)/utils/heading.tsx index f891e2de..fedfab86 100644 --- a/app/(writing)/utils/heading.tsx +++ b/app/(writing)/utils/heading.tsx @@ -1,3 +1,4 @@ +import { sx } from "@/app/styles/tw.stylex"; import Link from "next/link"; import { ReactNode } from "react"; @@ -24,7 +25,7 @@ function getHeadingAndHeadingId(heading: string) { } export function getHeading(children: ReactNode, level: HeadingLevel): ReactNode { - if (typeof children === 'string') { + if (typeof children === "string") { const { heading, headingId } = getHeadingAndHeadingId(children); let headingElement: ReactNode = children; if (level === HeadingLevel.H1) { @@ -38,17 +39,17 @@ export function getHeading(children: ReactNode, level: HeadingLevel): ReactNode } else if (level === HeadingLevel.H5) { headingElement =
    {heading}
    ; } - + if (!headingId) { return headingElement; } return ( - + {headingElement} ); } - + return children; -} \ No newline at end of file +} diff --git a/app/bookmarks/page.tsx b/app/bookmarks/page.tsx index 1e95dc5e..60cbc31a 100644 --- a/app/bookmarks/page.tsx +++ b/app/bookmarks/page.tsx @@ -1,7 +1,7 @@ +import { sx } from "@/app/styles/tw.stylex"; import { BOOKMARKS } from "./bookmarks"; import Link from "next/link"; import { Metadata } from "next"; -import { clsx } from "clsx"; export const metadata: Metadata = { title: "Bookmarks | Nathan Thomas", @@ -20,7 +20,7 @@ export const metadata: Metadata = { export default function Page() { return ( -
    +

    I love to learn and bookmark what I've read here. I also have an{" "} @@ -28,24 +28,24 @@ export default function Page() { {" "} you can follow.

    -

    ; let subtitleText: ReactNode | null = ( -

    +

    by{" "} Nathan Thomas @@ -56,17 +58,17 @@ export function Navbar() { } return ( -

    -