managed-base-css-defaults

Public task · Field Engineering

← Field Engineering

Make n1x ship its web theme defaults and base rules as managed CSS that reaches existing apps beneath their own styles and Tailwind utilities, and make app text actually render in Geist and Geist Mono.

Version
Category
software-engineering
Difficulty
medium
Model configurations
2
Attempts
10
Public trials
185 passed
Median runtime
17m 29s

Instruction

From the n1x owner, after we found that the thin scrollbar rule just added to the web plugin's `globals.css` only reaches apps generated from now on:

> do u think we should have some way to have css like that that propogaes … takign step back and thinking about right setup with n1x here

> ok lets try - i want to do cleanly

The web plugin keeps the theme tokens (`--accent*`, `--danger*`, `--success`, `--warning`, `--app-*`, in light and dark) and its base rules in `src/app/globals.css`, which is a seed file: `n1x apply` writes it once and never again. So nothing added there reaches existing apps, and apps generated before a token existed don't have it, even though managed `_lib` code reads it.

- Ship the seed's defaults, its token values for both themes and its base rules, as CSS that n1x manages, so `n1x apply` brings them to existing apps without touching their `globals.css`. Apart from the fonts below, a new app should look as it does today.
- An app's own `globals.css` must keep winning: a token or rule an app defines overrides the managed default, in both themes, and the managed CSS never overrides a Tailwind utility class (the theme switch's brief transition suppression aside).
- From the audit of the existing apps: none of them has the seed's catch-all color transition (`* { transition: … }`). Shipping it would add a transition to every element on their next apply, and it overrides Tailwind's transition utilities, so drop it, from new apps too.

> im ok with adjusting the font in the apps … im thinking geist

The root layout loads Geist and Geist Mono, but body text never renders in Geist: it falls back to the system font, even in apps whose `globals.css` maps Tailwind's fonts to the layout's Geist variables. Make body text render in Geist, in new apps and, after `n1x apply`, in existing ones, and monospace text in Geist Mono in new apps and in apps that map Tailwind's mono font to the layout's Geist Mono variable.

## Environment

This is the n1x repository itself: it has no app or database of its own to
run. `node src/cli.mjs apply --project <dir>` over an `n1x.yaml` renders a
project to try. The packages a web app it generates pins (next 16.3.2, react
and react-dom 19.2.8, TanStack Query, sonner, zod, Tailwind 4, TypeScript),
plus the `geist` package, are installed in `/opt/web-deps/node_modules`, and
the component preview's own packages in `/opt/preview-deps/node_modules`, if
you want to run or type-check rendered code or the preview without a network
install. With `NEXT_FONT_GOOGLE_MOCKED_RESPONSES=/opt/google-fonts/responses.cjs`
set, `next/font/google` serves Geist and Geist Mono from local files instead of
Google Fonts.

Public trials

Results by model

Model · harnessMean rewardRange± SEAttempts
Qwen3.8 27BTinker bash50.0%0% – 100%50.0 pp2
Frontier model ACursor CLI50.0%0% – 100%18.9 pp8