addyosmani / addyosmani/critical
Merge classes of multiple pages in one file
- 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
Assessment
This issue has not been assessed yet.