addyosmani / addyosmani/critical

Merge classes of multiple pages in one file

Open
#595 1 comment 0 reactions 0 assignees View on GitHub
awaiting reply
Dominant language
JavaScript
Stars
10.3k
Forks
390
PR merge metrics
No merged PRs in 30d

Description

For a very large project with over 2k pages and 30+ layouts, we use [critical](https://github.com/nystudio107/rollup-plugin-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:
```javascript
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:
```javascript
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 :)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.