How to debug Critical CSS generation?

[micahjon]

Hi, I was wondering how to debug critical CSS generation with Critter.

I'm pre-rendering several routes (e.g. /, /library, /search, etc), and for some reason my top navigation bar's CSS is only included in the root / route, not on any of the other pages (where it shows up unstyled if JavaScript is disabled, or I get FOUC if JavaScript is enabled).

Root route:

Other routes:

I'm guessing it has something to do with file paths. I tried changing to additionalStylesheets to **/*.css but that didn't help. I expect I'd be able to figure it out if I was able to get any log output from the Critter webpack plugin, but it's unclear to me how to do that. I can change the logLevel to debug in preact.config.js, but that doesn't appear to have any effect, as the Critter instance already has a logger instance with level: 'silent'

// preact.config.js
helpers
  .getPluginsByName(config, 'Critters')
  .forEach(({ plugin: crittersWebpackPlugin }) => {
    crittersWebpackPlugin.options.logLevel = 'debug';
    console.log(crittersWebpackPlugin);
  });

// what gets logged...
Critters {
  options: {
    logLevel: 'debug',
    externalStylesheets: [],
    preload: 'media',
    pruneSource: false,
    additionalStylesheets: [ '*.css' ]
  },
  urlFilter: undefined,
  logger: <ref *1> LogLevel {
    type: 'LogLevel',
    options: {
      name: 'Critters',
      level: 'silent',
      prefix: [Object],
      factory: null,
      unique: true
    },
    methodFactory: PrefixFactory {
      options: [Object],
      [Symbol(levels)]: [Object],
      [Symbol(instance)]: [Circular *1]
    },
    name: 'Critters',
    currentLevel: 5,
    trace: [Function: noop],
    debug: [Function: noop],
    info: [Function: noop],
    warn: [Function: noop],
    error: [Function: noop],
    log: [Function: noop]
  }
}

Thanks for your help!

[rschristian]

You'll need to re-initialize the plugin in cases like this, which is a bit annoying but no real way around:

preact.config.js

import CrittersPlugin from 'critters-webpack-plugin';

export default (config, env, helpers) => {
    const critters = helpers.getPluginsByName(config, 'Critters');
    if (critters.length) {
        const { index } = critters[0];
        config.plugins[index] = new CrittersPlugin({
            preload: 'media',
            pruneSource: false,
            logLevel: 'debug',
            additionalStylesheets: ['*.css'],
        });
    }
}

Here's our original config

The additionalStylesheets pattern should be fine as-is and cover everything. Would really need to see some code to help with that issue.

[micahjon]

Thanks @rschristian!

It turns out the issue was using Emotion with an <EmotionCacheProvider> for styling. If I use standard CSS modules then the styles are inlined correctly in pre-rendered non-root pages.

Here's a reduced test case. You can add the <EmotionCacheProvider> anywhere in the tree (typically it'd go in app.js), but I included it in the header/index.js so there's one less file to edit. Should I open an issue for this?

# Setup default Preact CLI project
npx preact-cli create default preact-emotion-demo
cd preact-emotion-demo

# Install Emotion
npm i @emotion/react @emotion/styled
npm i -D @emotion/babel-plugin

Setup URLs to pre-render

// src/prerender-urls.js (new file)
module.exports = [
  { url: '/' },
  { url: '/profile' },
]

Update the build npm script in package.json

"scripts": {
    "build": "preact build --prerenderUrls src/prerender-urls.js",

Create <Nav> Emotion component to give buttons in header a red background (it will replace <nav> in header)

// components/header/emotion-styles.js (new file)
import styled from '@emotion/styled';

export const Nav = styled.nav`
  background: red;
`

Wrap <Nav> in an <EmotionCacheProvider>. I think key: 'css' is the default config for createCache() (I tried many different options but this issue continued to show up no matter what I passed in).

// components/header/index.js (modified file)
import { h } from 'preact';
import { Link } from 'preact-router/match';
import style from './style.css';
import { Nav } from './emotion-styles';
import createCache from '@emotion/cache';
import { CacheProvider as EmotionCacheProvider } from '@emotion/react';

const emotionCache = createCache({ key: 'css' });

const Header = () => (
	<header class={style.header}>
		<h1>Preact App</h1>
		<EmotionCacheProvider value={emotionCache}>
			<Nav>
				<Link activeClassName={style.active} href="/">Home</Link>
				<Link activeClassName={style.active} href="/profile">Me</Link>
				<Link activeClassName={style.active} href="/profile/john">John</Link>
			</Nav>
		</EmotionCacheProvider>
	</header>
);

export default Header;

Run npm run build && npm run serve to build & pre-render both pages. View them with JavaScript disabled:

http://localhost:8080/ -> has red header buttons

http://localhost:8080/profile -> does not have red header buttons

Thanks again for your help with this!

[rschristian]

If you're using a CSS-in-JS lib, then this is beyond what Critters. Critters consumes from CSS files, which these libs tend to not create.

Run a build with --no-inline-css and take a glance at your output HTML doc (prettifying it helps). You'll see that your lib created a style tag in the middle of the content regardless:

...
<h1>Preact App</h1>
<style data-emotion="css 1mcldbr">
    .css-1mcldbr {
        background: red;
    }
</style>
<nav class="css-1mcldbr">
...

Critters (if enabled) will move & combine this with the critical styles it looks like, but actual creation of this isn't due to Critters.

I know absolutely nothing about these libs as I avoid them for perf & bundle reasons, but my guess would be that cache is causing issues? Likely the subsequent render doesn't force creation of the new style tag (however emotion does this), so it never gets onto the page.

[micahjon]

Gotcha, that makes sense.

Linking to discussion in Emotion repo I started about this:
emotion-js/emotion#2829

[rschristian]

One thing you could probably do is only create a cache in non-ssr builds (or submit a dummy for ssr).

Something like the following maybe:

// preact.config.js
export default (config, env, helpers) => {
    const { plugin } = helpers.getPluginsByName(config, 'DefinePlugin')[0];
    plugin.definitions['process.env.IS_SSR'] = JSON.stringify(env.isServer);
}

// components/header/index.js
const emotionCache = process.env.IS_SSR
    ? {}
    : createCache({ key: 'css' });

Not sure if this is semantically correct, but hopefully gives a good enough idea.

[rschristian]

Additionally, if Emotion needs that style tag listed above, Critters could be an issue to enable.

It seemingly merges styles but deletes the original enclosing tag, which might create issues on rehydration.

[micahjon]

You're right, it's possible to make the provider conditional like this:

const emotionCache = createCache({ key: 'css' });
const EmotionCacheProviderDisabledForSSR = ({ children }) => {
  if (process.env.IS_SSR) {
    return children;
  }
  return (
    <EmotionCacheProvider value={emotionCache}>{children}</EmotionCacheProvider>
  );
};

But then we have different CSS rendered via SSR vs on the client (due to a Stylis prefixing plugin that Emotion includes by default, disabled by the CacheProvider). And that appears to result in some janky loading (flash of white as styles are swapped out).

I've decided to just remove the EmotionCacheProvider altogether and live with the unnecessary prefixes. Down the road, I'll probably rip out Emotion and just use CSS Modules / vanilla-extract, but I don't want to delay my alpha release for that refactor (BTW, you can check it out here)

Thanks again for going down this long and windy road with me! I have used Preact for years and am so glad to see it becoming more widely used as folks start to care more about performance.