Closed rschristian closed 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 :)
Ah yeah, looks like I've built something quite similar.
Besides this hiccup it does work quite well.
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 :(
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: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 purpleNavigate to
/about
, notice the same text is not purple here