From a6353285cbbf6aebfd3c0dacb5ffca6828596008 Mon Sep 17 00:00:00 2001 From: yigitdot Date: Sun, 10 May 2026 00:19:49 +0300 Subject: [PATCH 1/2] refactor(types): augment CSSProperties for CSS custom properties Declare --reveal-delay and --wordmark-h on React.CSSProperties via types/css.d.ts and drop the 9 per-key `[... as string]` casts across 6 files. Document the convention in AGENTS.md. Closes #48. Co-Authored-By: Claude Opus 4.7 (1M context) --- AGENTS.md | 1 + components/site/Close.tsx | 6 +++--- components/site/Comparison.tsx | 6 +++--- components/ui/ComparisonRow.tsx | 2 +- components/ui/FaqItem.tsx | 2 +- components/ui/MethodRow.tsx | 2 +- types/css.d.ts | 8 ++++++++ 7 files changed, 18 insertions(+), 9 deletions(-) create mode 100644 types/css.d.ts diff --git a/AGENTS.md b/AGENTS.md index 25eb53e..972a843 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -36,3 +36,4 @@ pnpm format # prettier --write . - **Conventional commits required.** `commitlint` runs in the `commit-msg` husky hook; non-conforming messages are rejected. - **`metadataBase` is live.** `lib/links.ts` `site` is the real origin and `INDEXABLE` is `true`. Anything anchored on this origin — OG and canonical (via `metadataBase`); JSON-LD, `app/sitemap.ts`, `app/robots.ts` (via `SITE_URL`) — ships to production. Adding a new page = append an entry to `app/sitemap.ts`; don't add config elsewhere. Flip `INDEXABLE` to take the site out of search; only the meta tag flips (see `lib/links.ts` for why `robots.txt` stays unconditional). - **`docs/` is a different product.** Mintlify Cloud builds it from `docs/docs.json` and serves it at `docs.decdn.org` — independent of `pnpm build`. The website code must not import from `docs/`; ESLint and the website CI workflow ignore it. Edits to MDX go through the `docs` workflow (Prettier + `markdownlint-cli2` + `mintlify broken-links`). +- **CSS custom properties in `style` props.** Known `--var` names are declared in `types/css.d.ts` (module-augmenting React's `CSSProperties`) so call sites can write `style={{ "--reveal-delay": "120ms" }}` without a cast. Add new vars there before using them. diff --git a/components/site/Close.tsx b/components/site/Close.tsx index ad12396..7bb5286 100644 --- a/components/site/Close.tsx +++ b/components/site/Close.tsx @@ -27,7 +27,7 @@ export function Close() { height={110} className="block" style={{ - ["--wordmark-h" as string]: "clamp(4.75rem, 14vw, 11.5rem)", + "--wordmark-h": "clamp(4.75rem, 14vw, 11.5rem)", height: "var(--wordmark-h)", width: "auto", marginLeft: "calc(var(--wordmark-h) * -0.18)", @@ -38,7 +38,7 @@ export function Close() {

axis
@@ -56,7 +56,7 @@ export function Comparison() { {/* big price row */}
price
diff --git a/components/ui/ComparisonRow.tsx b/components/ui/ComparisonRow.tsx index 6279b90..2418218 100644 --- a/components/ui/ComparisonRow.tsx +++ b/components/ui/ComparisonRow.tsx @@ -13,7 +13,7 @@ export function ComparisonRow({
{n}
diff --git a/types/css.d.ts b/types/css.d.ts new file mode 100644 index 0000000..26024af --- /dev/null +++ b/types/css.d.ts @@ -0,0 +1,8 @@ +import "react"; + +declare module "react" { + interface CSSProperties { + "--reveal-delay"?: string; + "--wordmark-h"?: string; + } +} From b7d017d0fbd2f99db437b84b1f1a460e8fcf158d Mon Sep 17 00:00:00 2001 From: yigitdot Date: Sun, 10 May 2026 01:22:28 +0300 Subject: [PATCH 2/2] refactor(types): narrow --reveal-delay to `${number}ms` The CSS consumer (transition-delay in app/globals.css) only accepts a