Skip to content

Drop --wordmark-h from CSSProperties augmentation; inline as local const #54

Closed

Description

@yigitdot

Background

#53 introduced types/css.d.ts module-augmenting React.CSSProperties with two custom properties: --reveal-delay and --wordmark-h.

--wordmark-h is consumed in exactly one place: components/site/Close.tsx:30-34, where it's set on a style object and then read three times in adjacent declarations (one of them inside a calc()):

```tsx
style={{
"--wordmark-h": "clamp(4.75rem, 14vw, 11.5rem)",
height: "var(--wordmark-h)",
width: "auto",
marginLeft: "calc(var(--wordmark-h) * -0.18)",
}}
```

Both producer and consumer are in the same JSX subtree — there's no CSS-side dependency. The custom property exists only to avoid repeating the clamp(...) literal three times.

Proposal

Replace the CSS-variable indirection with a local const:

```tsx
const wordmarkH = "clamp(4.75rem, 14vw, 11.5rem)";

style={{
height: wordmarkH,
width: "auto",
marginLeft: `calc(${wordmarkH} * -0.18)`,
}}
```

Then drop "--wordmark-h"?: string; from types/css.d.ts, leaving only --reveal-delay (which is the genuine cross-language bridge — set in JSX, read by [data-reveal] rules in app/globals.css).

Why

Module augmentation merges into the global CSSProperties interface used by every style={...} in the tree. Every entry there is namespace pollution payment. --reveal-delay earns it (different files, different languages); --wordmark-h doesn't.

Out of scope

The --reveal-delay augmentation stays — it's the only entry that genuinely earns its place in a global type.

Acceptance

  • --wordmark-h removed from types/css.d.ts.
  • Close.tsx uses a local const for the wordmark height.
  • No visual regression on the Close hero (wordmark sizing identical).
  • pnpm lint and pnpm build clean.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Fields

    Priority

    None yet

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions