#820·stitches

SSR: getCssText accumulates all styles from all pages

Author: bacherCreated Sep 30, 2021Updated Jan 24, 2024
Labelsdocumentation

Bug report

Describe the bug

Function getCssText accumulates all styles what it even seen on the project.

It happens when using stitches framework on projects with SSR (with dynamic page rendering (not static mode)). Dynamic page rendering is important condition, static rendering works nice.

Problem: Client gets all styles from all pages, not from page he navigates to.

Looks like this problem will appear on any SSR frameworks, I'm trying to use Stitches with Next.js.

I think thing what I want called as Critical Path CSS extraction, it works in styled-components, emotion, etc.

To Reproduce

I've prepared repo with code to reproduce the problem: https://github.com/Bacher/next-stitches-bug-report

  1. Start project (yarn build && yarn start)
  2. Navigate to index page (http://localhost:3000/)
  3. If we look at CSS from SSR it will be okay, only styles what uses on the page
  4. Then navigate to page called "heavy styled"
  5. And return back to index page (/)
  6. Hit F5 (refresh page, for SSR process)
  7. If we look at CSS at this moment, CSS from SSR will contain all styles from index page AND all styles from heavy page.

Sooner or later styles from SSR start to include all styles from all pages from project.

Expected behavior

Expected: SSR CSS for any page will contain only css for that page (not for all pages at once).

Screenshots

Initial styles for index page: image

Styles for index page after going to heavy page and back: image

System information

  • OS: macOS
  • Browser all
  • Version of Stitches: 1.2.1
  • Version of Node.js: 14.17.0

Additional context

None