Merge classes of multiple pages in one file

[samuelreichor]

For a very large project with over 2k pages and 30+ layouts, we use critical and that uses your library under the hood. Basically, it is possible to define uris and the template path. Critical css gets generated from the uri and the template path is just for including it into the right template.

Such a config looks like that:

critical({
      criticalUrl: env.VITE_PRIMARY_SITE_URL,
      criticalBase: 'web/dist/criticalcss',
      criticalPages: [
        { uri: '/', template: '_layouts/home' },
        { uri: '/content-guidelines/default-pagebuilder', template: '_layouts/default_pageBuilder' },
      ],
      criticalConfig: {
        width: 1680,
        height: 1200,
        user: env.VITE_BASIC_AUTH_KEY,
        pass: env.VITE_BASIC_AUTH_KEY,
        request: {
          https: {
            rejectUnauthorized: false,
          },
        },
      },
    }),

Problem

The problem is that layout 1, for example, is used for 500 pages. If layout 1 looks different for 100 pages due to e.g. a different hero variant, the critical css will be generated correctly for either 100 or 400 pages. Because I can't use two urls with different heros for one style sheet.

Solution

It would be cool if something like this would be possible:

criticalPages: [
        { uri: ['/slug1', '/slug2'], template: '_layouts/default_teasers' },
      ],

And the CSS classes could then be merged into a single stylesheet.

If you need more information feel free to ask :)

[bezoerb]

There are some difficulties when generating critical css for multiple pages. See https://github.com/addyosmani/critical/issues/111

Even without the asset inlining problem described in #111, i don't see a robust way of generating critical css working for multiple pages which might also have conflicting styles. This might not be a problem for pages using a design system and with different components used on the page but we can't take it as granted.

Imagine there are two pages with a hero component using different styles coming from different stylesheets for example. Very unlikely in modern web development but definitely possible. One of those pages might break when the critical styles are merged into one.

Open for suggestions, though ;)