Bundle some output files together?

[stevepiron]

Hi,

Really like the plugin, it works like a charm and even helped me notice some weird media queries I had in my CSS due to Sass mixins I didn't fully control up until now :tada:

My question is: would it be possible to bundle some output file together? Right now I have 12 CSS files. This is not really an issue. However, I'm trying to reduce the Critical Rendering Path to a minimum.

When performing a Lighthouse performance audit, I need to load three CSS files to render the page on mobile:

• main.css
• only-screen-and-max-width-699px.css
• only-screen-and-max-width-959px.css

One way to reduce the number of files would be to not use max-width media queries. But those two files contain styles that should be there only on mobile, and it seems easier to maintain like so than overriding CSS in min-width media queries. That's the reason I ask. If that's not possible, I'll simply stay away from max-width media queries :)

Thanks for this great plugin!

[stevepiron]

I've reduced the number of CSS files to 8 and got rid of max-width media queries, so I have no need for that bundle feature anymore, but I'm curious to see if it's included in the plugin, that might be useful to some devs :)

[unlight]

I think it's possible without adding new functionality to plugin, but it may looks complicated. Something like that (did not tested this code):

var gulp = require("gulp");
var g = require("gulp-load-plugins")();

gulp.task("design.build", function() {
    gulp.src("src/design/style.css")
        .pipe(g.extractMediaQueries())
        .pipe(g.if(file => {
            return ['only-screen-and-max-width-699px.css', 'only-screen-and-max-width-959px.css'].includes(file.path);
         }, g.concat()))
        .pipe(gulp.dest("build"));
});