Loadable-components: How to load all CSS chunk files before stream's end event?
I've implemented a app with CSS Splitting. When I call getStyleTags() method before stream's end event, that only gives me a CSS file of app chunk. I'm not sure whether it is expected behavior. I want to compose <head> element with all CSS chunks. Could you give me a hint of where I should look?
```node.js
// write
console.log(chunkExtractors.client.getStyleTags());
/*
*/
stream.pipe(response, { end:false });
stream.on('end', () => {
// close with scripts.
console.log(chunkExtractors.client.getStyleTags());
/*
*/
});
```
hemmxwxsoo
All 4 comments
Duplicate of #236
That's expected behaviour. The application is not rendered or just partially rendered by the time you call chunkExtractors.client.getStyleTags for the first time.
And waiting for a full render to be able to add used styles into the render - might be not something you want from _stream rendering_.
There are two options:
- use CSS-in-JS, like
emotionorstyled-components- they would interleave your HTML with used styles as styles got introduced. Probably not an option for a pure CSS solution. - use used-styles to interleave your HTML stream with used styles as styles got used. Requires unique names for styles and some additional code to setup server.
theKashey
on 5 Apr 2019
@theKashey, Thank you for your thoughtful answer. I've been trying to apply used-styles, but I think I have some duplicate styles with same classname throughout CSS files, so style parameter of createStyleStream()'s callback is assigned with unnecessary CSS files that don't need to be loaded. Or is there any way to wait for getStyleTags() to collect all CSS files?
hemmxwxsoo
on 5 Apr 2019
No. The only "correct" time to "collect all CSS" is the end of the rendering.
You may use CSSModules to make your classnames "unique", as they should.
theKashey
on 5 Apr 2019
I'm using Linaria, but the problem seems to be related to referring to each other component's class. I'm not sure. I should examine it. Thanks for your help. :D
hemmxwxsoo
on 5 Apr 2019
Related issues
quentind
·
7Comments
gregberge
·
7Comments
lauterry
·
6Comments
gcardella
·
7Comments
mschipperheyn
·
7Comments
Most helpful comment
Duplicate of #236
That's expected behaviour. The application is not rendered or just partially rendered by the time you call
chunkExtractors.client.getStyleTagsfor the first time.And waiting for a full render to be able to add used styles into the render - might be not something you want from _stream rendering_.
There are two options:
emotionorstyled-components- they would interleave your HTML with used styles as styles got introduced. Probably not an option for a pure CSS solution.