@glitchr/media-query-plugin 1.5.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,200 @@
+# Media Query Plugin
+
+[![Npm Version](https://badge.fury.io/js/media-query-plugin.svg)](https://www.npmjs.com/package/media-query-plugin) 
+[![Build Status](https://travis-ci.com/SassNinja/media-query-plugin.svg?branch=master)](https://travis-ci.com/SassNinja/media-query-plugin) 
+[![Month Downloads](https://img.shields.io/npm/dm/media-query-plugin.svg)](http://npm-stat.com/charts.html?package=media-query-plugin)
+
+Have you ever thought about extracting your media queries from your CSS so a mobile user doesn't have to load desktop specific CSS?
+If so this plugin is what you need!
+
+When writing CSS with the help of a framework (such as [Bootstrap](https://getbootstrap.com/) or [Foundation](https://get.foundation/sites.html)) and with a modular design pattern you'll mostly end up with CSS that contains all media queries. Using this plugin lets you easily extract the media queries from your CSS and load it async.
+
+So instead of forcing the user to load this
+
+```css
+.foo { color: red }
+@media print, screen and (min-width: 75em) {
+    .foo { color: blue }
+}
+.bar { font-size: 1rem }
+```
+
+he only has to load this always
+
+```css
+.foo { color: red }
+.bar { font-size: 1rem }
+```
+
+and on desktop viewport size this in addition
+
+```css
+@media print, screen and (min-width: 75em) {
+    .foo { color: blue }
+}
+```
+
+
+## Prerequisites
+
+You should already have a working webpack configuration before you try to use this plugin. If you haven't used webpack yet please go through the [webpack guide](https://webpack.js.org/guides/) first and start using this awesome tool for your assets mangement!
+
+## Installation
+
+Simply install the package with your prefered package manager.
+
+- npm
+```bash
+npm install media-query-plugin --save-dev
+```
+
+- yarn
+```bash
+yarn add media-query-plugin --dev
+```
+
+## Let's get started
+
+### 1. Loader
+
+The plugin comes together with a loader which takes care of the CSS extraction from the source and provides it for the injection afterwards.
+
+**Important:** make sure the loader receives plain CSS so place it between the css-loader and the sass-loader/less-loader.
+
+```javascript
+const MediaQueryPlugin = require('media-query-plugin');
+
+module.exports = {
+    module: {
+        rules: [
+            {
+                test: /\.scss$/,
+                use: [
+                    MiniCssExtractPlugin.loader,
+                    'css-loader',
+                    MediaQueryPlugin.loader,
+                    'postcss-loader',
+                    'sass-loader'
+                ]
+            }
+        ]
+    }
+};
+```
+
+### 2. Plugin
+
+Add the plugin to your webpack config. It will inject the extracted CSS of the loader after the compilation. To identify the target file for the injection it'll look for `[name]-[query]`. So if CSS with the query `desktop` is extracted from `example.scss`, it'll look for `example-desktop` to do the injection. In case there's no match the extracted CSS gets simply emited as CSS file (it doesn't disappear in nirvana :wink:).
+
+```javascript
+const MediaQueryPlugin = require('./plugins/media-query-plugin');
+
+module.exports = {
+    plugins: [
+        new MediaQueryPlugin({
+            include: [
+                'example'
+            ],
+            queries: {
+                'print, screen and (min-width: 75em)': 'desktop'
+            }
+        })
+    ]
+};
+```
+
+### 3. Use Extracted Files
+
+If you import the extracted CSS (mostly as dynamic import with viewport condition), webpack will try to resolve that import and throw an error if the file does not exist. Thus you have to create those files manually before running webpack. Empty files as placeholder do the job (the get filled later by the plugin).
+
+**Important:** as mentioned above the name of those files must follow the pattern `[name]-[query]` so an example file could be `example-desktop.scss`
+
+```javascript
+import './example.scss';
+
+if (window.innerWidth >= 960) {
+    import(/* webpackChunkName: 'example-desktop' */ './example-desktop.scss');
+}
+```
+
+## Options
+
+The following options are available.
+
+| name        | mandatory |
+| ----------- | --------- |
+| include     | yes       |
+| queries     | yes       |
+| groups      | no        |
+
+### include
+
+Each chunk (which uses the loader) gets checked if its name matches this option. In case of a match each query specified in the `queries` options gets extracted from the chunk.
+
+Possible types
+- array (e.g. `['example']`)
+- regex (e.g. `/example/`)
+- boolean (e.g. `true`)
+
+### queries
+
+This option tells the plugin which media queries are supposed to get extracted. If a media query doesn't match it'll stay untouched. Otherwise it gets extracted and afterwards injected.
+
+**Important:** make sure the queries match 100% the source CSS rule excl the `@media`.
+
+**Tip:** you can use the same name for different media queries to concatenate them (e.g. desktop portrait and desktop landscape)
+
+```javascript
+queries: {
+    'print, screen and (max-width: 60em) and (orientation: portrait)': 'desktop',
+    'print, screen and (max-width: 60em) and (orientation: landscape)': 'desktop'
+}
+```
+
+### groups
+
+By default the name of the extracted CSS file(s) is `[chunk]-[query]`. This option lets you map chunk names to a specific group name what results in `[group]-[query]`.
+So the following code would generate a `app-desktop.css` instead of `exampleA-desktop.css` and `exampleB-desktop.css`. This can be useful when working with [splitChunks](https://webpack.js.org/plugins/split-chunks-plugin/).
+
+```javascript
+groups: {
+    app: ['exampleA', 'exampleB']
+}
+```
+
+**Tip:** you can also use regex to target chunks
+```javascript
+groups: {
+    app: /^example/
+}
+```
+
+## Other Webpack Plugins
+
+This plugin plays together well with the following other webpack plugins.
+
+### mini-css-extract-plugin
+
+If you don't want the CSS included in your JS but emit it as external files, you can use the [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin). The media query plugin automatically recognizes the additional CSS chunks and even takes over the plugins filename option!
+
+### html-webpack-plugin
+
+If you're using the hash feature of webpack (e.g. `[name].[hash].js`) you might also be using the [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) to inject the hashed files into your templates. Good news – the media query plugin supports it! It hooks into the plugin and makes extracted files available in your HTML template via `htmlWebpackPlugin.files.extracted.js` or `htmlWebpackPlugin.files.extracted.css`.
+
+This let you inject something as `<link rel="stylesheet" href="..." media="...">` so that the extracted files get downloaded but not applied if not necessary (reduces render blocking time). However most of the time it's better to use dynamic imports for the extracted CSS to achieve best performance.
+
+Compared to the regular files (`htmlWebpackPlugin.files.js` or `htmlWebpackPlugin.files.css`) the extracted files object does not have the structure `[file, file]` but `[{file:file,query:query}, {file:file,query:query}]`. Keep this in mind when using it (or check out the example [template](examples/webpack/src/index.hbs)).
+
+## Not using webpack?
+
+This plugin is built for webpack only and can't be used with other module bundlers (such as [FuseBox](https://fuse-box.org/)) or task runners (such as [Gulp](https://gulpjs.com/)). However if you can't or don't want to use webpack but nevertheless want to extract media queries you should check out my [PostCSS plugin](https://github.com/SassNinja/postcss-extract-media-query) which supports much more tools.
+
+However it also breaks out of the bundler/runner and emits files within the PostCSS plugin which will ignore all other pipes in your task.
+So it's highly recommended to use this webpack plugin instead of the PostCSS alternative!
+
+## Contribution
+
+This plugin has been built because I wasn't able to find a webpack solution for such a trivial task of splitting files by media query and loading them async. It works for my use cases by I'm pretty sure it can get more improved. So if you miss any feature don't hesitate to create an issue as feature request or to create a PR to do the job.
+
+**And last but not least, if you like this plugin please give it a star on github and share it!**
+

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@glitchr/media-query-plugin",
+  "version": "1.5.3",
+  "description": "Webpack plugin for media query extraction.",
+  "license": "MIT",
+  "access": "public",
+  "main": "src/index.js",
+  "scripts": {
+    "test": "mocha --timeout 10000"
+  },
+  "keywords": [
+    "webpack",
+    "plugin",
+    "loader",
+    "mediaquery",
+    "extract",
+    "split",
+    "css"
+  ],
+  "dependencies": {
+    "loader-utils": "^2.0.0",
+    "postcss": "^7.0.32",
+    "webpack": "^5.21.2",
+    "webpack-sources": "^2.2.0"
+  },
+  "devDependencies": {
+    "chai": "^4.2.0",
+    "css-loader": "^4.3.0",
+    "mini-css-extract-plugin": "^0.11.1",
+    "mocha": "^8.1.3",
+    "rimraf": "^3.0.2",
+    "sass": "^1.26.10",
+    "sass-loader": "^10.0.2",
+    "style-loader": "^1.2.1",
+    "webpack-merge": "^5.1.4"
+  },
+  "repository": {
+    "type": "git",
+    "url": "ssh://git@gitlab.glitchr.dev:public-repository/javascript/media-query-plugin.git"
+  }
+}

package/src/index.js

@@ -0,0 +1,12 @@
+/**
+ * Bootstraper that exports the plugin and provides easy access to the loader.
+ */
+
+const loader = require('./loader');
+const plugin = require('./plugin');
+
+// provide easy access to the loader
+plugin.loader = require.resolve('./loader');
+
+// export default webpack plugin
+module.exports = plugin;

package/src/loader.js

@@ -0,0 +1,48 @@
+/**
+ * The loader component is supposed to extract the media CSS from the source chunks.
+ * To do this it uses a custom PostCSS plugin. 
+ * In the course of this the original media CSS gets removed.
+ */
+
+const { getOptions, interpolateName } = require('loader-utils');
+const postcss = require('postcss');
+const store = require('./store');
+const plugin = require('./postcss');
+
+module.exports = function(source) {
+
+    // make loader async
+    const cb = this.async();
+
+    // merge loader's options with plugin's options from store
+    const options = Object.assign(store.options, getOptions(this));
+
+    // basename gets used later to build the key for media query store
+    options.basename = interpolateName(this, '[name]', {});
+
+    // path gets used later to invalidate store (watch mode)
+    // (don't use options.filename to avoid name conflicts)
+    options.path = interpolateName(this, '[path][name].[ext]', {});
+
+    let isIncluded = false;
+
+    // check if current file should be affected
+    if (options.include instanceof Array && options.include.indexOf(options.basename) !== -1) {
+        isIncluded = true;
+    } else if (options.include instanceof RegExp && options.basename.match(options.include)) {
+        isIncluded = true;
+    } else if (options.include === true) {
+        isIncluded = true;
+    }
+
+    // return (either modified or not) source
+    if (isIncluded === true) {
+        postcss([ plugin(options) ])
+            .process(source, { from: options.basename })
+            .then(result => {
+                cb(null, result.toString())
+            });
+    } else {
+        cb(null, source);
+    }
+};

package/src/plugin.js

@@ -0,0 +1,286 @@
+/**
+ * The plugin component is supposed to inject the extracted media CSS (from store) into the file(s).
+ */
+
+const pluginName = 'MediaQueryPlugin';
+
+const { OriginalSource, ConcatSource } = require('webpack-sources');
+const { interpolateName } = require('loader-utils');
+const Chunk = require('webpack/lib/Chunk');
+const Compilation = require('webpack/lib/Compilation');
+
+const store = require('./store');
+const escapeUtil = require('./utils/escape');
+
+module.exports = class MediaQueryPlugin {
+
+    constructor(options) {
+        this.options = Object.assign({
+            include: [],
+            queries: {},
+            groups: {}
+        }, options);
+    }
+
+    getFilenameOption(compiler) {
+        const plugins = compiler.options.plugins;
+        let MiniCssExtractPluginOptions = {};
+
+        for (const plugin of plugins) {
+            if (plugin.constructor.name === 'MiniCssExtractPlugin') {
+                MiniCssExtractPluginOptions = plugin.options || {};
+            }
+        }
+
+        return MiniCssExtractPluginOptions.filename || compiler.options.output.filename;
+    }
+
+    apply(compiler) {
+
+        // if no filename option set, use default
+        this.options.filename = this.options.filename || this.getFilenameOption(compiler);
+
+        // save options in store to provide to loader
+        store.options = this.options;
+
+        // reset store for every webpack instance
+        // required for unit testing because the store is shared
+        compiler.hooks.entryOption.tap(pluginName, () => {
+            store.resetMedia();
+        });
+
+        // if a filename has become invalid (watch mode)
+        // remove all related data from store
+        compiler.hooks.invalid.tap(pluginName, (fileName, changeTime) => {
+            store.removeMediaByFilename(fileName);
+        });
+
+        compiler.hooks.thisCompilation.tap(pluginName, (compilation) => {
+
+            const hasDeprecatedChunks = (compilation.chunks instanceof Set) === false; // webpack < 5
+
+            if (hasDeprecatedChunks) {
+                console.warn('\n\n[WARNING] media-query-plugin is going to drop webpack 4 support with the next major version so you should consider upgrading asap!\n\n');
+            }
+
+            const processAssets = (compilationAssets, cb) => {
+
+                const chunks = compilation.chunks;
+                const chunkIds = [...chunks].map(chunk => chunk.id);
+                const assets =  hasDeprecatedChunks ? compilation.assets : compilationAssets;
+
+                store.getMediaKeys().forEach(mediaKey => {
+
+                    const css = store.getMedia(mediaKey);
+                    const queries = store.getQueries(mediaKey);
+
+                    // generate hash and use for [hash] within basename
+                    const hash = interpolateName({}, `[hash:${compiler.options.output.hashDigestLength}]`, { content: css });
+
+                    // compute basename according to filename option
+                    // while considering hash
+                    const basename = this.options.filename
+                                        .replace('[name]', mediaKey)
+                                        .replace(/\[(content|chunk)?hash\]/, hash)
+                                        .replace(/\.[^.]+$/, '');
+
+                    // if there's no chunk for the extracted media, create one
+                    if (chunkIds.indexOf(mediaKey) === -1) {
+                        const mediaChunk = new Chunk(mediaKey);
+                        mediaChunk.id = mediaKey;
+                        mediaChunk.ids = [mediaKey];
+
+                        if (hasDeprecatedChunks) {
+                            chunks.push(mediaChunk);
+                        } else {
+                            chunks.add(mediaChunk);
+                        }
+                    }
+
+                    const chunk = [...chunks].filter(chunk => chunk.id === mediaKey)[0];
+
+                    // add query to chunk data if available
+                    // can be used to determine query of a chunk (html-webpack-plugin)
+                    if (queries) {
+                        chunk.query = queries[0];
+                    }
+
+                    // find existing js & css files of this chunk
+                    let existingFiles = { js: [], css: [] };
+                    [...chunk.files].forEach(file => {
+                        if (file.match(/\.js$/)) {
+                            existingFiles.js.push(file);
+                        } else if (file.match(/\.css$/)) {
+                            existingFiles.css.push(file);
+                        }
+                    });
+
+                    // if css included in js (style-loader), inject into js
+                    if (existingFiles.js.length > 0 && existingFiles.css.length === 0) {
+                        let content;
+                        const extractedContent = new OriginalSource(`\nexports.push([module.i, ${escapeUtil(css)}, ""]);\n\n\n`, `${basename}.css`);
+
+                        for (let i = 0; i < existingFiles.js.length; i++) {
+                            const file = existingFiles.js[i];
+
+                            if (assets[file]) {
+                                if (i === 0) {
+                                    // since I've to inject the extracted content somewhere into the existing JS code (after `// module`)
+                                    // I can't simply use ConcatSource here but need to split the raw source code first
+                                    // This is only necessary for the first file/iteration
+                                    const originalSource = assets[file].source();
+                                    const aboveContent = new OriginalSource(originalSource.match(/[\s\S]*\/\/ module/gim)[0], `${basename}.js`);
+                                    const belowContent = new OriginalSource(originalSource.match(/(\/\/\s)?exports[\s\S]*/gm)[0], `${basename}.js`);
+
+                                    content = new ConcatSource(aboveContent, extractedContent, belowContent);
+                                } else {
+                                    content = new ConcatSource(assets[file], content);
+                                }
+                                if (hasDeprecatedChunks) {
+                                    chunk.files.splice(chunk.files.indexOf(file), 1);
+                                } else {
+                                    chunk.files.delete(file);
+                                }
+                                delete assets[file];
+                            }
+                        }
+
+                        if (hasDeprecatedChunks) {
+                            chunk.files.push(`${basename}.js`);
+                        } else {
+                            chunk.files.add(`${basename}.js`);
+                        }
+                        assets[`${basename}.js`] = content;
+                    }
+
+                    // else create additional css asset (new chunk)
+                    // or replace existing css assert (mini-css-extract-plugin)
+                    else {
+
+                        let content = new OriginalSource(css, `${basename}.css`);
+                        existingFiles.css.forEach(file => {
+                            if (assets[file]) {
+                                content = new ConcatSource(assets[file], content);
+
+                                if (hasDeprecatedChunks) {
+                                    chunk.files.splice(chunk.files.indexOf(file), 1);
+                                } else {
+                                    chunk.files.delete(file);
+                                }
+                                delete assets[file];
+                            }
+                        });
+
+                        if (hasDeprecatedChunks) {
+                            chunk.files.push(`${basename}.css`);
+                        } else {
+                            chunk.files.add(`${basename}.css`);
+                        }
+                        assets[`${basename}.css`] = content;
+                    }
+
+                });
+
+                // sort assets object for nicer stats and correct order
+                // bcz due to our injection the order got changed
+                const chunksCompareFn = (a, b) => {
+                    if (a.id > b.id)
+                        return 1;
+                    else if (a.id < b.id)
+                        return -1;
+                    else
+                        return 0;
+                };
+                const sortedChunks = [...chunks].sort(chunksCompareFn);
+
+                compilation.chunks = hasDeprecatedChunks ? sortedChunks : new Set(sortedChunks);
+
+                const assetsCompareFn = (a, b) => {
+                    // take file extension out of sort
+                    a = a.replace(/\.[^.]+$/, '');
+                    b = b.replace(/\.[^.]+$/, '');
+
+                    if (a > b)
+                        return 1;
+                    else if (a < b)
+                        return -1;
+                    else
+                        return 0;
+                };
+                const sortedAssets = Object.keys(assets).sort(assetsCompareFn).reduce((res, key) => (res[key] = assets[key], res), {});
+
+                if (hasDeprecatedChunks) {
+                    compilation.assets = sortedAssets;
+                } else {
+                    compilationAssets = sortedAssets;
+                }
+
+                cb();
+            };
+
+            // Since webpack 4 doesn't have the processAssets hook, we need the following condition.
+            // In future (once webpack 4 support has been dropped) this can be simplified again.
+            if (hasDeprecatedChunks) {
+                compilation.hooks.additionalAssets.tapAsync(pluginName, (cb) => {
+                    processAssets(compilation.assets, cb);
+                });
+            } else {
+                compilation.hooks.processAssets.tapAsync({
+                    name: pluginName,
+                    stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL
+                }, (assets, cb) => {
+                    processAssets(assets, cb);
+                });
+            }
+
+            // consider html-webpack-plugin and provide extracted files
+            // which can be accessed in templates via htmlWebpackPlugin.files.extracted
+            // { css: [{file:'',query:''},{file:'',query:''}] }
+
+            try {
+                const htmlWebpackPlugin = require('html-webpack-plugin');
+
+                compilation.hooks.afterOptimizeChunkAssets.tap(pluginName, (chunks) => {
+
+                    const hookFn = (pluginArgs, cb) => {
+                        const assetJson = [];
+                        const extracted = {};
+
+                        chunks.forEach(chunk => {
+                            const query = chunk.query;
+
+                            chunk.files.forEach(file => {
+                                const ext = file.match(/\w+$/)[0];
+
+                                if (query) {
+                                    extracted[ext] = extracted[ext] || [];
+                                    extracted[ext].push({
+                                        file: file,
+                                        query: query
+                                    });
+                                }
+                                assetJson.push(file);
+                            });
+                        });
+
+                        pluginArgs.assets.extracted = extracted;
+                        pluginArgs.plugin.assetJson = JSON.stringify(assetJson);
+                        cb();
+                    };
+
+                    if (htmlWebpackPlugin.getHooks) {
+                        htmlWebpackPlugin.getHooks(compilation).beforeAssetTagGeneration.tapAsync(pluginName, hookFn);
+                    } else if (compilation.hooks.htmlWebpackPluginBeforeHtmlGeneration) {
+                        compilation.hooks.htmlWebpackPluginBeforeHtmlGeneration.tapAsync(pluginName, hookFn);
+                    }
+                });
+            } catch (err) {
+                if (err.code !== 'MODULE_NOT_FOUND') {
+                    throw err;
+                }
+            }
+
+        });
+
+    }
+};

package/src/postcss.js

@@ -0,0 +1,64 @@
+/**
+ * The PostCSS plugin component is supposed to extract the media CSS from the source chunks.
+ * The CSS get saved in the store.
+ */
+
+const postcss = require('postcss');
+const store = require('./store');
+const normalize = require('./utils/normalize');
+
+module.exports = postcss.plugin('MediaQueryPostCSS', options => {
+
+    function addToStore(name, atRule) {
+
+        const css = postcss.root().append(atRule).toString();
+        const query = atRule.params;
+        
+        store.addMedia(name, css, options.path, query);
+    }
+
+    function getGroupName(name) {
+        const groupNames = Object.keys(options.groups);
+
+        for (let i = 0; i < groupNames.length; i++) {
+            const groupName = groupNames[i];
+            const group = options.groups[groupName];
+
+            if (group instanceof RegExp) {
+                if (name.match(group)) {
+                    return groupName;
+                }
+            } else if (Array.isArray(group)) {
+                if (group.includes(name)) {
+                    return groupName;
+                }
+            }
+        }
+    }
+
+    function getQueryName(query) {
+        const queries = Object.keys(options.queries);
+
+        for (let i = 0; i < queries.length; i++) {
+            if (normalize(query) === normalize(queries[i])) {
+                return options.queries[queries[i]];
+            }
+        }
+    }
+
+    return (css, result) => {
+
+        css.walkAtRules('media', atRule => {
+
+            const queryname = getQueryName(atRule.params);
+
+            if (queryname) {
+                const groupName = getGroupName(options.basename);
+                const name = groupName ? `${groupName}-${queryname}` : `${options.basename}-${queryname}`;
+                
+                addToStore(name, atRule);
+                atRule.remove();
+            }
+        });
+    };
+});

package/src/store.js

@@ -0,0 +1,60 @@
+/**
+ * The store component is supposed to transfer the extracted CSS from the loader to the plugin.
+ * Besides it also provides the plugin's options to the loader (as default options).
+ */
+
+class MediaQueryStore {
+
+    constructor() {
+        this.media = {};
+        this.options = {};
+    }
+
+    addMedia(key, css, filename, query) {
+        const data = {
+            css: css,
+            filename: filename,
+            query: query
+        };
+
+        if (typeof this.media[key] !== 'object') {
+            this.media[key] = [];
+        }
+        this.media[key].push(data);
+    }
+
+    getMedia(key) {
+        // create css array from media[key] data
+        // which has the structure [{css:'',filename:'',query:''},{css:'',filename:'',query:''}]
+        const css = this.media[key].map(data => data.css);
+
+        return css.join('\n');
+    }
+
+    getQueries(key) {
+        // create queries array from media[key] data
+        // which can be used to determine the used query for a key
+        const queries = this.media[key].map(data => data.query);
+
+        return queries;
+    }
+
+    removeMediaByFilename(filename) {
+        this.getMediaKeys().forEach(key => {
+            this.media[key] = this.media[key].filter(media => media.filename !== filename);
+            if (this.media[key].length === 0) {
+                delete this.media[key];
+            }
+        });
+    }
+
+    resetMedia() {
+        this.media = {};
+    }
+
+    getMediaKeys() {
+        return Object.keys(this.media);
+    }
+};
+
+module.exports = new MediaQueryStore();

package/src/utils/escape.js

@@ -0,0 +1,20 @@
+// Utility to escape a string.
+// Taken over from css-loader
+// https://github.com/webpack-contrib/css-loader/blob/master/lib/url/escape.js
+
+module.exports = function escape(url) {
+    if (typeof url !== 'string') {
+        return url
+    }
+    // If url is already wrapped in quotes, remove them
+    if (/^['"].*['"]$/.test(url)) {
+        url = url.slice(1, -1);
+    }
+    // Should url be wrapped?
+    // See https://drafts.csswg.org/css-values-3/#urls
+    if (/["'() \t\n]/.test(url)) {
+        return '"' + url.replace(/"/g, '\\"').replace(/\n/g, '\\n') + '"'
+    }
+
+    return url
+}

package/src/utils/normalize.js

@@ -0,0 +1,6 @@
+// Utility to normalize a query for more tolerant comparison.
+// normalize('@media (min-width: 1000px)') === normalize('@media(min-width:1000px)')
+
+module.exports = function normalize(query) {
+  return query.toLowerCase().replace(/\s/g, '');
+}

package/test/configs/index.js

@@ -0,0 +1,6 @@
+
+module.exports = {
+    'only-javascript-output': require('./webpack/only-javascript-output'),
+    'external-css-output': require('./webpack/external-css-output'),
+    'groups-option-output': require('./webpack/groups-option-output')
+};

package/test/configs/webpack/base.js

@@ -0,0 +1,11 @@
+
+module.exports = {
+    mode: 'development',
+    devtool: false,
+    entry: {
+        example: './test/data/example.js'
+    },
+    stats: {
+        children: false
+    }
+};

package/test/configs/webpack/external-css-output.js

@@ -0,0 +1,39 @@
+
+const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const MediaQueryPlugin = require('../../../src');
+const { merge } = require('webpack-merge');
+const baseConfig = require('./base');
+
+module.exports = merge(baseConfig, {
+    output: {
+        filename: '[name].js',
+        path: path.resolve(__dirname, `../../output/external-css-output`)
+    },
+    module: {
+        rules: [
+            {
+                test: /\.scss$/,
+                use: [
+                    MiniCssExtractPlugin.loader,
+                    'css-loader',
+                    MediaQueryPlugin.loader,
+                    'sass-loader'
+                ]
+            }
+        ]
+    },
+    plugins: [
+        new MiniCssExtractPlugin({
+            filename: '[name].css'
+        }),
+        new MediaQueryPlugin({
+            include: [
+                'example'
+            ],
+            queries: {
+                'print, screen and (max-width: 60em)': 'desktop'
+            }
+        })
+    ]
+});

package/test/configs/webpack/groups-option-output.js

@@ -0,0 +1,45 @@
+
+const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const MediaQueryPlugin = require('../../../src');
+
+module.exports = {
+    mode: 'development',
+    entry: {
+        app: './test/data/app.js'
+    },
+    output: {
+        filename: '[name].js',
+        path: path.resolve(__dirname, `../../output/groups-option-output`)
+    },
+    module: {
+        rules: [
+            {
+                test: /\.scss$/,
+                use: [
+                    MiniCssExtractPlugin.loader,
+                    'css-loader',
+                    MediaQueryPlugin.loader,
+                    'sass-loader'
+                ]
+            }
+        ]
+    },
+    plugins: [
+        new MiniCssExtractPlugin({
+            filename: '[name].css'
+        }),
+        new MediaQueryPlugin({
+            include: true,
+            queries: {
+                'print, screen and (max-width: 60em)': 'desktop'
+            },
+            groups: {
+                app: /^example/
+            }
+        })
+    ],
+    stats: {
+        children: false
+    }
+};

package/test/configs/webpack/only-javascript-output.js

@@ -0,0 +1,35 @@
+
+const path = require('path');
+const MediaQueryPlugin = require('../../../src');
+const { merge } = require('webpack-merge');
+const baseConfig = require('./base');
+
+module.exports = merge(baseConfig, {
+    output: {
+        filename: '[name].js',
+        path: path.resolve(__dirname, `../../output/only-javascript-output`)
+    },
+    module: {
+        rules: [
+            {
+                test: /\.scss$/,
+                use: [
+                    'style-loader',
+                    'css-loader',
+                    MediaQueryPlugin.loader,
+                    'sass-loader'
+                ]
+            }
+        ]
+    },
+    plugins: [
+        new MediaQueryPlugin({
+            include: [
+                'example'
+            ],
+            queries: {
+                'print, screen and (max-width: 60em)': 'desktop'
+            }
+        })
+    ]
+});

package/test/data/app.js

@@ -0,0 +1,4 @@
+
+// testing groups option
+import './exampleA.scss';
+import './exampleB.scss';

package/test/data/example-desktop.scss

@@ -0,0 +1 @@
+// wrapper

package/test/data/example.js

@@ -0,0 +1,6 @@
+
+import './example.scss';
+
+if (window.innerWidth >= 960) {
+    import(/* webpackChunkName: 'example-desktop' */ './example-desktop.scss');
+}

package/test/data/example.scss

@@ -0,0 +1,11 @@
+.foo {
+    color: red;
+}
+@media print, screen and (max-width: 60em) {
+    .foo {
+        color: green;
+    }
+}
+.bar {
+    font-size: 1rem;
+}

package/test/data/exampleA.scss

@@ -0,0 +1,8 @@
+.foo {
+    color: red;
+}
+@media print, screen and (max-width: 60em) {
+    .foo {
+        color: green;
+    }
+}

package/test/data/exampleB.scss

@@ -0,0 +1,8 @@
+.bar {
+    font-size: 1rem;
+}
+@media print, screen and (max-width: 60em) {
+    .bar {
+        font-size: 2rem;
+    }
+}

package/test/webpack-integration.js

@@ -0,0 +1,88 @@
+
+const assert = require('chai').assert;
+const rimraf = require('rimraf');
+const webpack = require('webpack');
+const configs = require('./configs');
+
+describe('Webpack Integration', function() {
+
+    // clear output before starting any test
+    afterEach(function clearOutput(done) {
+        rimraf('./test/output', done);
+    });
+
+    // test style-loader
+    it('should only emit js files when using style-loader', function(done) {
+
+        const expected = {
+            assets: ['example.js', 'example-desktop.js'],
+            chunks: ['example', 'example-desktop']
+        };
+
+        webpack(configs['only-javascript-output'], (err, stats) => {
+
+            if (err)
+                done(err);
+            else if (stats.hasErrors())
+                done(stats.toString());
+
+            const assets = Object.keys(stats.compilation.assets);
+            const chunks = [...stats.compilation.chunks].map(chunk => chunk.id);
+
+            assert.deepEqual(assets, expected.assets);
+            assert.deepEqual(chunks, expected.chunks);
+            done();
+        });
+
+    });
+
+    // test mini-css-extract-plugin
+    it('should emit css files when using mini-css-extract-plugin', function(done) {
+
+        const expected = {
+            assets: ['example.css', 'example.js', 'example-desktop.js', 'example-desktop.css'],
+            chunks: ['example', 'example-desktop']
+        };
+
+        webpack(configs['external-css-output'], (err, stats) => {
+
+            if (err)
+                done(err);
+            else if (stats.hasErrors())
+                done(stats.toString());
+
+            const assets = Object.keys(stats.compilation.assets);
+            const chunks = [...stats.compilation.chunks].map(chunk => chunk.id);
+
+            assert.deepEqual(assets, expected.assets);
+            assert.deepEqual(chunks, expected.chunks);
+            done();
+        });
+
+    });
+
+    it('should use groups option for extraxted file name', function(done) {
+
+        const expected = {
+            assets: ['app.css', 'app.js', 'app-desktop.css'],
+            chunks: ['app', 'app-desktop']
+        };
+
+        webpack(configs['groups-option-output'], (err, stats) => {
+
+            if (err)
+                done(err);
+            else if (stats.hasErrors())
+                done(stats.toString());
+
+            const assets = Object.keys(stats.compilation.assets);
+            const chunks = [...stats.compilation.chunks].map(chunk => chunk.id);
+
+            assert.deepEqual(assets, expected.assets);
+            assert.deepEqual(chunks, expected.chunks);
+            done();
+        });
+
+    });
+
+});