WMR: Prerender doesn't always build full page styles

rschristian commented 3 years ago

Summary

I'm running into an issue where the full styles for a page are not currently being created in the generated style tag. For example, take this as the root:

export function App() {
  return (
    <LocationProvider>
      <h1 class="text-purple-500">Should be purple</h1>
      <div>
        <Header />
        <ErrorBoundary>
          <Router>
            <Route path="/" component={Home} />
            <Route path="/about" component={About} />
            <Route default component={NotFound} />
          </Router>
        </ErrorBoundary>
      </div>
    </LocationProvider>
  );
}

text-purple-500 will be included in the route /, however, it is not in /about or /error. This is mainly an issue as I'm using Twind without any runtime, so a style not in the style tags results in unstyled content.

Reproduce

Clone this repo I've set up: https://github.com/rschristian/twind-prerender-bug
Run a production build & then serve the content (yarn build && yarn serve)
Navigate to /, notice the top text is purple
Navigate to /about, notice the same text is not purple here

danielweck commented 3 years ago

Hello, I will follow this thread, as I built a zero-runtime Twind setup for my own personal use (i.e. pet project). I documented some of my journey in this GitHub discussion: https://github.com/tw-in-js/twind/discussions/147 As mentioned, I haven't shared any code yet. My ad-hoc build workflow is difficult to generalize. Although I can use most Twind's features (static class/className props values, css(), style(), plugins, variants, etc.), my code must follow certain patterns so that the separation of "critical" vs. "secondary" stylesheets for any given isomorphic route works. Note that I don't use the Twind CLI static code analysis to discover used styles / classes (as by design this has limitations, fuzzy string matching, no support for dynamic classes). Instead I achieved zero Twind runtime by using a more deterministic approach that combines a custom WMR plugin with a Preact VNode options hook. I explained some of the technical details in the discussion linked above. At the time there were some moving architectural pieces in WMR itself, which is also why I was reluctant to release code. Although I haven't had time to significantly update my project for a while (due to work priorities), I have been keeping my codebase in sync with the latest version of WMR, so I know that my SSG / static SSR design continues to work as expected. I look forward to hearing more from your experiment :)

rschristian commented 3 years ago

Ah yeah, looks like I've built something quite similar.

Besides this hiccup it does work quite well.

danielweck commented 3 years ago

I don't experience the issue you are describing, but then I am not relying on use-twind-with/wmr so ... perhaps indeed the source of the problem is here in this Twind utility. I don't have bandwidth at the moment to compare my code, sorry :(

tw-in-js / use-twind-with

WMR: Prerender doesn't always build full page styles #17

Summary

Reproduce