Skip to content

Dev SSR drops generated theme styles and renders Block layouts as rows #39

Description

@smiggleworth

Summary

The @askrjs/vite development server renders generated @askrjs/themes layout classes without their request-local style registry. Real Block-composed pages therefore use browser-default layout values and become visually unusable in development, while the equivalent production build renders correctly.

Published environment

  • @askrjs/vite@0.2.1
  • @askrjs/themes@0.2.4
  • @askrjs/askr@0.2.3
  • @askrjs/server@0.2.1
  • @askrjs/node@0.2.1
  • Vite Plus 0.2.9
  • Playwright 1.62.1 Chromium
  • Node 24.8.0, npm 12.0.1
  • macOS host

Natural reproduction

  1. Configure Vite with askr({ optimizeTemplates: true }) and askrServer({ entry }).
  2. Serve a real createAskrApp() route containing Page, Container, and Block direction="column".
  3. Start vp dev and open the route at 1440x900.
  4. Inspect the nested Block and the initial document.

Expected

The development document includes or adopts the generated rule for the Block class, and its computed flex-direction is column, matching the production artifact.

Observed

  • The element has a deterministic ak-style-* class.
  • No style[data-askr-style-registry] contains that class rule.
  • Computed flex-direction is row.
  • Page sections become horizontal, narrow columns with character-level wrapping.
  • The same focused assertion passes against vp build plus the production server: registry present and computed direction column.
  • The dev server also logs an unhandled SSRDataMissingError while rendering the route, then serves the visually broken document.

Three-run evidence

Destroyer finding ASKR-DESTROYER-011 failed three consecutive isolated browser contexts using a dedicated real vp dev server.

Artifacts:

  • artifacts/findings-results/dev-server-wobbles--findin-78b68--layout-in-Vite-development/
  • artifacts/findings-results/dev-server-wobbles--findin-78b68--layout-in-Vite-development-repeat1/
  • artifacts/findings-results/dev-server-wobbles--findin-78b68--layout-in-Vite-development-repeat2/
  • artifacts/findings-report/

Each run includes a screenshot, trace, and error context. Console and server output were captured by the focused runner.

Requirements

  • Preserve request-local generated style registrations through the Vite development SSR document path.
  • Keep development and production document behavior aligned.
  • Do not rely on a client rerender to repair initial layout.
  • Keep concurrent request registrations isolated.
  • Surface the underlying SSR data failure actionably without returning silently broken HTML.

Acceptance criteria

  • A real Vite dev-server regression renders a nested Block direction="column" with its generated rule in the served document.
  • Computed geometry and direction match an equivalent production build before and after hydration.
  • Exactly one adopted style registry remains after hydration.
  • A route using server query data does not lose its generated styles during dev fallback/retry behavior.
  • Concurrent dev requests cannot leak rules between documents.
  • Existing Vite build and HMR tests remain green.

References

Automation disclosure: this report and deterministic reproduction were prepared with an AI coding agent against published packages. No unpublished sibling source or consumer CSS workaround was used.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions