Inline CSS options

[willhowlett]

Hi. We have a requirement to render our css inline in certain situations, and so I had a crack at implementing it with the loadable library. Please do let me know what you think about the approach.

Summary

In order to improve page speed score, or to render AMP SSR pages alongside the main app, it can be a requirement to render css inline.

Test plan

This has been added as an option to the existing chunkExtractor.getStyleTags() and chunkExtractor.getStyleElements() functions via an inline boolean parameter.

Additionally a chunkExtractor.getCssString() function has been added to allow developers further control over how to render css (an example use requirement being passing the css string to a style tag using AMP's amp-custom attribute)

Appropriate tests have been added to ChunkExtractor.test.js

[gregberge]

Hello @bigwillch, thanks for your work, you made a great job! I have only one problem: using fs.readFileSync is not good in production, it blocks thread. So we have to use the asynchronous method instead. But if we use it: getStyleTags and getStyleElements would become asynchronous. So my suggestion is to create custom methods for your use-case: getInlineStyleTags, getInlineStyleElements, getCSSString.

Is it possible?

[willhowlett]

Thanks for the feedback! I'll have a a crack at creating new async methods as suggested

[gregberge]

Thanks, let me know when it is done!

[willhowlett]

@neoziro just a question - would you be opposed to the package providing both sync and async methods so that the developer can choose which method to use in the app?

I'm just thinking that the tradeoff between performance and having to wrap the html output in promises may be something developers would like to be able to choose themselves

[gregberge]

@bigwillch yes we could expose the two methods, just add getSyncInlineStyleElements if you want. It costs nearly nothing and it could be useful for users.

[willhowlett]

@neoziro I've changed the functionality to use fs.readFile as suggested

• I kept inline as an option of the original methods instead of creating new methods. It's a personal preference to keep related functionality clearly together for the user, but if you'd prefer them to be standalone methods let me know
• Using the inline: true option now returns a promise (so the dev will need to modify their server side code to wait for the promise to resolve if they wish to use this option)
• I decided against including a sync option in the end. Everything I read about using fs.readFileSync is that it's a big no-no as you said so I figured it wasn't a good idea to give people an option to do the wrong thing

Thanks again for your feedback so far!

[gregberge]

I am not OK to return a different type (especially a promise) when a custom option is passed to the function. I think it is not clear for the user, it can be confusing and it is not type friendly.

Can you please create a different method for each one?

[willhowlett]

@neoziro no problem :) Have made them separate methods as requested

[MartinGian]

I'm very interested in this functionality :) I can help testing it on my project let you know if I have any issues.

[gregberge]

So finally you decided to no add the sync way? OK for me, it is an anti-pattern for production. Let's wait for issues.

[gregberge]

@bigwillch can you please fix the resolve / reject and I will merge it! Thanks!

[willhowlett]

@neoziro thanks for flagging! sloppy of me :) Hope it's all ok now 🙏

[gregberge]

Thanks for your work @bigwillch!

[willhowlett]

Great! Thanks for approving

[willhowlett]

@neoziro has v5.3.0 been published to npm yet? I'm not seeing it when trying to upgrade

[gregberge]

v5.3.0 & v5.4.0 are published. See https://www.npmjs.com/package/@loadable/server.

[willhowlett]

sorry, I'm dumb. Was trying to upgrade loadable/component instead. doh

[nesbtesh]

I am going through the code and I can’t find where do you declare which style elements you want inline? I dont want to include the entire apps css inline, just the part above the fold.

[theKashey]

@nesbtesh - there is no such thing as "above the fold", without prerendering your application into some virtual window first - then you'll know what it above the fold.

You are probably looking for used-styles in stream mode, where styles are inlined before they used, no matter of the "fold".

[nesbtesh]

@theKashey that worked great, thanks, time to interactivity improved to 1s