splitting css by media query

[qedric]

Hey, thanks a lot for putting this together!

I'm trying to only load only critical and mobile styles, and then conditionally load styles for larger screens, and to do that in my previous setup I was using this plugin:

https://github.com/SassNinja/media-query-plugin

However I've no idea how to integrate it with this webpack config, can you give me some pointers as to where I can put the loader, and the plugin?

I can then modify the style-tags.liquid to handle the new files,

Cheers!

[qedric]

Here is my prod.config.js. I think there may be an issue with the order things are executed in? Any help would be appreciated!

`

const MediaQueryPlugin = require('media-query-plugin');

// Modify default webpack production config using this file
const mergeProd = {
  plugins: [
        new MediaQueryPlugin({
            include: [
                'layout.theme',
                'template.index',
                'bundle.index'
            ],
            queries: {
                'only screen and (max-width: 899)': 'tablet-portrait-down',
                'only screen and (min-width: 600px) and (max-width: 899px)': 'tablet-portrait-only',
                'only screen and (min-width: 600px)': 'tablet-portrait-up',
                'only screen and (min-width: 900px) and (max-width: 1199px)': 'tablet-landscape-only',
                'only screen and (min-width: 900px)': 'tablet-landscape-up',
                'only screen and (min-width: 1200px)': 'desktop-up',
                'only screen and (min-width: 1600px)': 'large-desktop-only'
            }
        })
    ],
 	module: {
    rules: [
      {
        test: /\.css\.liquid$/,
        use: [
            MediaQueryPlugin.loader,
        ]
      },
    ],
	}
}
module.exports = mergeProd

[hayes0724]

Currently packer creates custom entrypoints for css/js based on templates and not media query. I think you would need to fork packer and edit the webpack html template and the production webpack config. It might be possible to do this through the above config file.

If you do modify the source from a fork the two files I would look at would be:

src/webpack/config/prod.config.js
src/webpack/style-tags.html