extract mediaquery feature

[SassNinja]

In the course of a meeting with Google I've got the recommendation to split the CSS by media queries into separate files.

I'm trying to find a webpack solution to this for some days but without any success so far.
I've found postcss plugins such as css-mqpacker or webpack plugins such as css-magic-split-webpack-plugin. But none of them seem to be a real solution.

The goal is that webpack transforms the following code

example.css

.foo { color: blue; }
@media screen and (max-width: 40em) {
  .foo { color: red; }
}
.bar { font-size: 1rem; }
@media screen and (max-width: 40em) {
  .bar { font-size: 2rem; }
}
.test { z-index: 1; }

into

example.css

.foo { color: blue; }
.bar { font-size: 1rem; }
.test { z-index: 1; }

example-tablet.css (or any other name)

@media screen and (max-width: 40em) {
  .foo { color: red; }
  .bar { font-size: 2rem; }
}

@evilebottnawi is this something that belong to the mini-css-extract-plugin or would you rather see it as a new plugin?

[alexander-akait]

@SassNinja idea is good, i think it is possible solve using splitChunks, need try, feel free to search solution and we documented this.

Idea: we should slit our build chunk on chunk contains only media queries and then extract from this chunk css. I would help with this, but at the moment there is no time.

Maybe perhaps we need more and we can send PR to webpack.

Any splitting should be done in splitChunks, it is good practice.

[SassNinja]

Idea: we should slit our build chunk on chunk contains only media queries and then extract from this chunk css. I would help with this, but at the moment there is no time.

Interesting idea @evilebottnawi but I'm afraid splitChunks doesn't support this usage or maybe I didn't understand you.

According to the docs you can define a pattern which modules belong to a specific cacheGroup. But I don't see a possibility to treat the @media block as module so that it becomes an own chunk.

This doesn't work:

optimization: {
    splitChunks: {
        cacheGroups: {
            tablet: {
                test: /@media/,
                chunks: 'all',
                name: 'tablet'
            }
        }
    }
}

Were you talking about this or did you have something else in mind?

[alexander-akait]

@SassNinja inside bundle all in js, you css is just js module what insert css in you page, test is function where you can define group(s). But looks splitChunks doesn't have features to splitting module on modules. I ask sokra to find best solution for this.

[alexander-akait]

Looks like we already do something for @import https://github.com/webpack-contrib/mini-css-extract-plugin/blob/master/src/index.js#L382

[alexander-akait]

Example:

.foo { color: blue; }
@media screen and (max-width: 40em) {
  .foo { color: red; }
}
.bar { font-size: 1rem; }
@media screen and (max-width: 40em) {
  .bar { font-size: 2rem; }
}
.test { z-index: 1; }

Should be modify to

@import url('example-tablet.css') screen and (max-width: 40em);

.foo { color: blue; }
.bar { font-size: 1rem; }
.test { z-index: 1; }

Need tests, i just write this based on looking logic. If my example works. We can implement this using postcss plugin

[alexander-akait]

Plugin already exists https://github.com/Ghostavio/postcss-extract-media, maybe need rewrite

[alexander-akait]

Main problem what css is not module language and it is hard to solve this using bundle algorithms

[SassNinja]

@evilebottnawi nice finding 👍

But I have to ask

Need tests, i just write this based on looking logic. If my example works. We can implement this using postcss plugin

What exactly do you mean?
Transforming the @media blocks into import url('example...?

Plugin already exists https://github.com/Ghostavio/postcss-extract-media, maybe need rewrite

Yup probably needs a major rewrite.
I've tested it without success. The problem is line 8 because result.opts.to is undefined when using it with webpack what breaks everything.
https://github.com/Ghostavio/postcss-extract-media/blob/master/index.js#L8

Seems to me it's meant to be used with grunt or gulp.
However it's a starting point. I'll think about it and try some ideas...

[alexander-akait]

@SassNinja we need split our one css on multiple css - main contain css code other based on media, feel free to experiments and ask question

[SassNinja]

@evilebottnawi I've now the impression it's impossible with webpack itself (or rather splitChunks) due to the way it handles chunks.
The problem is it always requires some kind of import within the code.

Your example with @import url('example-tablet.css') screen and (max-width: 40em) requires there's already an example-tablet.css which doesn't exist.
So anything with import can't be used here but the separate files have to be extracted based on something else.

After digging again into the postcss-extract-media plugin I think the only way is to split and emit the file within the postcss plugin.
I'll try to rewrite the postcss-extract-media plugin to get a working draft.

[alexander-akait]

@SassNinja yep, splitChunks doesn't work for this because css in not module system as js. Feel free to rewrite plugin and add example here and docs 👍

[SassNinja]

Some time has passed and I've got now a working plugin for the extraction
https://github.com/SassNinja/media-query-plugin

and add example here and docs – @evilebottnawi

So would it be ok if I adjust the README of this repo and add a section about using my plugin together with the mini-css-extract-plugin? Or did I get you wrong?

[alexander-akait]

@SassNinja PR welcome, please add example too