Support for uri array with one template

[samuelreichor]

Is your feature request related to a problem? Please describe.

For a very large project with over 2k pages and 20+ layouts, we use critical css at layout level. 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.

Describe the solution you would like

It would be cool if something like this were possible:

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

And the CSS classes could then be merged into a single stylesheet. The problem would then be a possibly larger file that would have to be loaded, but I think that would be within reason if it is not exaggerated :D

Describe alternatives you have considered

Alternatively, that would also be fine:

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

Additional context

I know that normally the Critical Css should be generated at page level, but this is difficult to achieve and maintain for large projects. A workaround would also be to create Critical CSS at 90% layout level and in special cases where it does not work well to go back to page level

[khalwat]

The underlying critical library that this package uses does not support this, so it would be better served filing the PR here: https://github.com/addyosmani/critical

However, what you can do is create a "kitchen sink" page that has all X variants of your header on it, and use that as the URL to pull CSS from. Set this page to not be indexed by Google for completeness.

This is described here: https://nystudio107.com/blog/implementing-critical-css