fixed: missing CSS of sub-components when rendering asynchronously #34
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Currently when rendering asynchronously, only the CSS of the main component and of the sub-components statically included in the main component are rendered.
To demonstrate this I extended the ssr example to include a bit of CSS specific to each page and delayed the hydration, see PR#190 in
riot/examples
: until hydration takes place the page-local CSS is not applied.I spent some time poking around the code and I eventually found a simple fix for this, even it it does not feel very elegant (because of the overwrite): CSS for all involved components will only be available once the initial asynchronous render completed (as opposed to the moment when the main component was created, in the current version). Re-generating the CSS after that render made the modified ssr example above work as expected.
I could not see any risk introduced by the change, since it just replaces the initial CSS with more CSS.