Support for the media option

Author: jeffposnick

README.md

@@ -221,6 +221,22 @@ For the async chunks mentioned earlier, the plugin would update your HTML to the
 <link rel="prefetch" href="chunk.d15e7fdfc91b34bb78c4.js">
 ```
 
+## Including media
+
+`<link>` elements have the ability to accept media attributes. These can accept media types or full-blown media queries, allowing you to do responsive preloading.
+
+You can pass the value for the media attribute in the `media` option:
+
+```javascript
+plugins: [
+  new HtmlWebpackPlugin(),
+  new PreloadWebpackPlugin({
+    rel: 'preload',
+    media: '(min-width: 600px)'
+  })
+]
+```
+
 ## Support
 
 If you've found an error or run into problems, please [file an issue](https://github.com/googlechrome/preload-webpack-plugin/issues).

src/index.js

@@ -70,6 +70,11 @@ class PreloadPlugin {
         rel: options.rel,
       };
 
+      // See https://github.com/GoogleChromeLabs/preload-webpack-plugin/issues/69
+      if (options.media) {
+        attributes.media = options.media;
+      }
+
       // If we're preloading this resource (as opposed to prefetching),
       // then we need to set the 'as' attribute correctly.
       if (options.rel === 'preload') {

test/spec.js

@@ -329,6 +329,45 @@ module.exports = ({descriptionPrefix, webpack, HtmlWebpackPlugin}) => {
       });
       compiler.outputFileSystem = new MemoryFileSystem();
     });
+
+    it('should use the value for the media attribute passed in the configuration', (done) => {
+      const compiler = webpack({
+        entry: path.join(__dirname, 'fixtures', 'file.js'),
+        output: {
+          path: OUTPUT_DIR,
+          filename: 'bundle.js',
+          chunkFilename: 'chunk.[chunkhash].css',
+          publicPath: '/',
+        },
+        plugins: [
+          new HtmlWebpackPlugin(),
+          new PreloadPlugin({
+            rel: 'preload',
+            media: '(min-width: 600px)',
+            include: 'allChunks'
+          }),
+        ]
+      }, function(err, result) {
+        expect(err).toBeFalsy(err);
+        expect(result.compilation.errors.length).toBe(0,
+            result.compilation.errors.join('\n=========\n'));
+
+        const html = result.compilation.assets['index.html'].source();
+        const dom = new JSDOM(html);
+
+        const links = dom.window.document.head.querySelectorAll('link');
+        expect(links.length).toBe(2);
+        expect(links[0].getAttribute('rel')).toBe('preload');
+        expect(links[0].getAttribute('media')).toBe('(min-width: 600px)');
+        expect(links[0].getAttribute('href')).toBe('/bundle.js');
+        expect(links[1].getAttribute('rel')).toBe('preload');
+        expect(links[1].getAttribute('media')).toBe('(min-width: 600px)');
+        expect(links[1].getAttribute('href')).toMatch(new RegExp('^/chunk\\.'));
+
+        done();
+      });
+      compiler.outputFileSystem = new MemoryFileSystem();
+    });
   });
 
   describe(`${descriptionPrefix} When passed normal chunks, it`, function() {