Preact-cli: Prerendered routes' css is not inlined

Created on 16 May 2019  路  3Comments  路  Source: preactjs/preact-cli


Do you want to request a _feature_ or report a _bug_?
I believe it's a _bug_.

What is the current behaviour?
When building it doesn't inline css for prerendered routes, causing the site to look broken before js is loaded or if js is disabled by the user since the prerendered html's css is not loaded or inlined.

If the current behaviour is a bug, please provide the steps to reproduce.
Here's a gist of the files required to reproduce:
https://gist.github.com/hesselbom/4a3dc03acae33c14a3bc2530f6d6b821

What is the expected behaviour?
Since the html for the route is prerendered I'd expect the related css for that view to be considered critical and be inlined.

Please mention other relevant information.

  • Node version: v10.13.0
  • npm version: 6.9.0
  • Operating system: Mac OSX 10.14.4
  • CLI version: 3.0.0-rc.1
  • Browser: N/A
bug

Most helpful comment

Looks to be fixed in 3.0.0-rc.7 ("Seamless integration with Critters") thanks to #908

All 3 comments

I believe it's related to async routes. Because the routes' css is not included in the main generated bundle.css file, CrittersPlugin doesn't find it and thus can't inline it.

I tried to disable async-loader by adding the following to my preact.config.js and it did the trick:

export default {
  webpack (config, env, helpers, options) {
    config.module.rules = config.module.rules.filter(r => (
      !(r.loader && r.loader.indexOf('preact/async-loader') > -1)
    ))
  }
}

I've tried looking through preact-cli source but so far have not come up with a solution. I'll try to get back to it in the future and make a pull request if I find any good solution while keeping async-loader.

another reason could be that we only include this in client config
https://github.com/preactjs/preact-cli/blob/master/packages/cli/lib/lib/webpack/webpack-client-config.js#L10

May be we should try adding this to server/base config as well

Looks to be fixed in 3.0.0-rc.7 ("Seamless integration with Critters") thanks to #908

Was this page helpful?
0 / 5 - 0 ratings