Implementing Critical CSS

[nilskaspersson]

I am setting up a project in WMR, and want to get the basics done right. It was really smooth sailing initially, but I got stuck trying to inline critical CSS.

How would you go about inlining critical CSS?

My initial idea was to extend the prerender export to run the rendered HTML through Critters before returning it:

export async function prerender(data) {
  const { html } = await _prerender(<App {...data} />);

  return {
    html: await critters.process(html),
  };
}

However this fails with Error: path is a Node built-in - WMR does not polyfill these, which strikes me as a bit odd—It was my impression that the prerender export only ever runs on the server, and shouldn't need polyfilling?

[rschristian]

First off, I'd just like to mention that you should make sure you can benefit from critical CSS before implementation. I'm not sure if you were a preact-cli user or not (which does it by default), but the value has perhaps become a bit more dubious recently. Great article on the topic.

As for implementation, yes, that approach is reasonable. I'm not quite sure how Critters injects the built style tag, but you can use our prerendering API to inject this into the head of the HTML doc, rather than the body. The following is just a psudo code example:

export async function prerender(data) {
  const { html } = await prerender(<App {...data} />);
  const criticalCSS = await critters.process(html);

  return {
    html,
    head: {
        elements: new Set([
            {
                type: 'style',
                props: { children: criticalCss },
            },
        ]),
    },
  };

But indeed, I seem to recall we had a bit of poor detection there on the Node builtins w/ prerendering. You should be able to instead to use the node: protocol on your imports (node:path) to get around it. Sorry!

[nilskaspersson]

I discovered some old issues suggesting a similar solution, however I cannot control what is imported upstream from whichever critical CSS tool I go with. Rolling my own setup seems a bit excessive. Can I alias path: "node:path" somehow?

[rschristian]

(Sorry, updated comment after the fact w/ a bit more detail).

Ah, shoot. Yeah that'd be an issue. I'm honestly not sure if our aliases work against node built-ins. You can try the following:

// wmr.config.js
import { defineConfig } from 'wmr';

export default defineConfig({
    alias: {
        path: 'node:path'
    }
});

If not, something like patch-package might be your best bet.

[nilskaspersson]

Seems like the alias does nothing in this case—unfortunate. I'll have a look at patch-package, thanks for the tip!