nystudio107 / rollup-plugin-critical

Vite.js & Rollup plugin for generating critical CSS
MIT License
91 stars 11 forks source link

Added support to pass an array of url’s to criticalUrl property. #11

Open TomDeSmet opened 1 year ago

TomDeSmet commented 1 year ago

Description

Added support to pass a config array to the criticalUrl property which consists of a URL and an optional ID property. The ID property is used to create different filenames. If it's not passed, files will get overwritten. But I did not make it mandatory to be as backwards compatible as possible.

To come back to the comment I received in the issue this pull requests resolves: The idea for this may come from my usage of Craft CMS, but it does not assume that Craft is being used. Maybe other CMS's or other usage of this critical plugin may require something like this. It just may come in handy without breaking stuff.

The reason I propose a pull request instead of using my own script is that we wouldn't have to support two separate scripts. And it's just a small change.

Related issues

A (tested) proposition to support issue #3

khalwat commented 9 months ago

Sorry, somehow this fell off of my radar. What is the intent of being able to pass an array of URLs in? Is it to be able to generate critical CSS for a single template that can have a variety of CSS depending on the content in the CMS?

Antimated commented 8 months ago

Sorry, somehow this fell off of my radar. What is the intent of being able to pass an array of URLs in? Is it to be able to generate critical CSS for a single template that can have a variety of CSS depending on the content in the CMS?

@khalwat We use this internally to create critical CSS for multisite setups in Craft CMS like so

criticalUrl: [
    {
        url: process.env.PRIMARY_SITE_URL,
        id: "default"
    },
    {
        url: process.env.SECONDARY_SITE_URL,
        id: "otherSite"
    }
]

Would really be helpful for building critical CSS for multisites.

EDIT:

Something like this would also be helpful because then you have control what critical pages are being pushed out for each site group

critical({
    criticalSites: [
        {
            criticalUrl: process.env.PRIMARY_SITE_URL,
            criticalBase: './web/dist/criticalcss/primary-example',
            criticalPages: [
                {
                    uri: '',
                    template: 'home'
                },
            ],
        },
        {
            criticalUrl: process.env.SECONDARY_SITE_URL,
            criticalBase: './web/dist/criticalcss/secondary-example/',
            criticalPages: [
                {
                    uri: '',
                    template: 'home'
                },
                {
                    uri: 'page-only-on-secondary-site',
                    template: 'secondary-site-page'
                },
            ],
        }
    ],
    criticalConfig: ...
}),