One group for all chunks

[Kshatra]

I'd like to have an option to extract all media queries into a certain group without specifying a list of chunks for it. So if i specify in webpack config

new MediaQueryPlugin({
    include: true,
    queries: {
        '(min-width: 1024px)': 'desktop'
    },
    groups: {
        'app-bundle': 'ALL_CHUNKS'
    }
}),

I would receive app-bundle.css and app-bundle-desktop.css after the build. I think it can be done in src/postcss.js:26 just by adding a check like:

if (group === 'ALL_CHUNKS') {
    return groupName;
}

Thank you for an awesome plugin!

[SassNinja]

Hi @Kshatra

thanks for your issue!

I understand your use case but I don't like such a magic chunk name to target all chunks. However I'm thinking about adding regex support what would make the groups options much more powerful.

With such an option you'd be able to do the following

new MediaQueryPlugin({
    include: true,
    queries: {
        '(min-width: 1024px)': 'desktop'
    },
    groups: {
        'app-bundle': /.*/
    }
}),

What do you think?

[Kshatra]

That would be even better, as we will be able to have full controll even in case of many groups. Though i'm not sure about the cases where one chunk name will pass test in more than one regex group. Guess it's the user responcibility to make regex "explosions" to not overlap.

[karolisgrinkevicius-home24]

Hey @SassNinja.

I didn't want to create a new issue for the following question. Is this possible to merge extracted css into only one bundle? For clarification I have app-desktop.css, app-mobile.css and app.css bundles. Is this possible to merge app.css onto both app-desktop.css and app-mobile.css to avoid making two potential http requests in case of using mini-css-extract-plugin?

[SassNinja]

@karolisgrinkevicius-home24 I'm afraid I didn't get it.

You've got an app.css and the extracted app-desktop.css & app-mobile.css – what do you wanna merge? If you mean you wanna all extracted CSS in one app-extracted.css you can simply do

queries: {
  'mobile query': 'extracted',
  'desktop query': 'extracted'
}

[SassNinja]

I've released the groups option update now.

@Kshatra

Though i'm not sure about the cases where one chunk name will pass test in more than one regex group.

The first matching group will be taken.

Guess it's the user responcibility to make regex "explosions" to not overlap.

For sure! Whoever uses regex here should be aware of what he's doing.