Style · presentation pipeline
Styling and assets
Presolve keeps application meaning separate from physical presentation tooling. The compiler owns the document-level stylesheet link and publication integrity; the application owns CSS; Vite or Tailwind transform bytes only when an explicit workflow asks them to.
How CSS reaches routes and components
Presolve does not attach a stylesheet to each component. Routes, layouts, the application shell, and reusable components render ordinary class attributes into one complete document. Selectors in app/app.css match that HTML through the browser’s normal global cascade.
TSX emits literal classes on semantic HTML in a route, layout, shell, or component.
Matching selectors, tokens, responsive rules, and states live in app/app.css.
Presolve emits stable and content-addressed CSS artifacts and inventories both.
The compiler adds one immutable stylesheet link to each generated document head.
A route never imports the global stylesheet, and a component never needs to render a <link>. Presolve does not rename classes, create component-scoped style nodes, or place CSS inside a replaceable application subtree.
The canonical global stylesheet
Author browser-standard CSS in app/app.css. Presolve reads the file as bytes, writes byte-identical dist/app.css and dist/app.<sha256>.css artifacts, and links the immutable coordinate from every generated route document.
:root {color-scheme: dark;--canvas: #07090f;--ink: #f7f8fc;--accent: #75dcf5;}* { box-sizing: border-box; }body { margin: 0; background: var(--canvas); }:focus-visible { outline: 3px solid var(--accent); }@media (min-width: 48rem) {.feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }}Generated HTML never depends on a mutable /app.css cache entry. A CSS change produces a new URL, so Safari, Chromium, a CDN, and a returning service worker cannot validly combine new HTML with old stylesheet bytes. The compatibility file remains available for tools and older hosts.
CSS updates during development
pnpm dev watches authored inputs and republishes from the compiler. A CSS-only edit loads the rebuilt stylesheet through /app.css?presolve-dev=<revision>, waits for it to succeed, and then removes the old link. The current document, component State, focused control, and scroll position remain intact.
A TSX, document, route, package, public-file, or configuration edit uses a safe full reload unless a narrower compiler HMR product proves state compatibility. If compilation fails, Presolve keeps serving the last good publication and shows the exact compiler diagnostic in an accessible alert. Correcting the source reloads the recovered build automatically.
Development responses are Cache-Control: no-store and the hot stylesheet uses a revision query. Production documents continue to link immutable content hashes; the development client is never written into dist/.
What ordinary CSS supports
Because the browser receives ordinary CSS, the canonical path supports selectors, custom properties, cascade layers, media and container queries, Grid, Flexbox, font faces, transitions, keyframes, color schemes, logical properties, and accessibility features such as prefers-reduced-motion. Presolve neither renames class selectors nor attaches style nodes to a component subtree.
This card uses global tokens, a responsive grid, a gradient, and visible focus treatment from the site’s generated app/app.css.
Classes in TSX
Use class in framework source. className remains accepted for JSX ecosystem compatibility. A class is presentation data; it does not create component, state, action, or resume identity.
<article class="feature-card"><h2>Complete HTML</h2><p>Useful before JavaScript executes.</p></article>Public files
Put files with stable root URLs in public/: favicons, web manifests, social cards, downloadable files, and robots.txt. Presolve copies them to the root of dist/, rejects collisions, and integrity-lists every emitted file for deployment.
public/├── favicon.svg → /favicon.svg├── manifest.webmanifest → /manifest.webmanifest├── images/social-card.png → /images/social-card.png└── robots.txt → /robots.txt<imgsrc="/images/social-card.png"alt="Presolve compiler product flow"/>Transforming CSS
app/app.css is not automatically run through Vite, Sass, PostCSS, or Tailwind. A transformer must write finished browser CSS to that path before presolve dev or presolve build. This direct contract makes the final bytes and cache identity deterministic.
{"scripts": {"css:build": "tailwindcss -i ./app/tailwind.css -o ./app/app.css --minify","dev": "pnpm css:build && presolve dev","build": "pnpm css:build && presolve build"}}Support matrix
| Styling form | Status | Ownership |
|---|---|---|
Ordinary CSS in app/app.css | Automatic | Byte-exact, content-addressed Presolve publication. |
Files in public/ | Automatic | Root copy plus compiler deployment inventory. |
Tailwind/PostCSS/Sass output written to app/app.css | Supported workflow | The project runs the transformer first; Presolve publishes the result. |
CSS Modules and imported media through buildPresolveProduction() | Adapter API | Explicit Vite physical entries, without component identity. |
A vite.config.ts that changes routes or semantics | Unsupported | Vite cannot become a second framework compiler. |
| Component CSS import assumed to become global automatically | Not canonical | Use global CSS or an explicit adapter entry. |
| Runtime CSS-in-JS with hidden reactive behavior | Not compiler-understood | Requires a separately admitted package capability. |
Accessible, mobile-first defaults
- Start with the narrow layout; add larger layouts with min-width queries.
- Keep focus indicators visible and ensure controls remain usable without a pointer.
- Use semantic landmarks and headings before adding layout classes.
- Respect reduced motion, forced colors, user font scaling, and sufficient contrast.
- Give informative images useful alt text and decorative images an empty alt.
- Test long code, tables, navigation drawers, and forms at small viewport widths.