SplitCssByMediaPlugin.js

const RawSource = require('webpack-sources').RawSource;

class SplitCssByMediaPlugin {
  apply(compiler) {
    // wait until compilation becomes available
    compiler.hooks.compilation.tap(
      'SplitByCssMediaPlugin',
      (compilation) => {
        // hook into additionalAssets phase
        compilation.hooks.additionalAssets.tap(
          'SplitByCssMediaPlugin',
          () => {
            // get all about-to-be-emitted css files
            const cssFiles = Object.keys(compilation.assets)
              .filter(key => key.endsWith('.css'));

            cssFiles.forEach((filename) => {
              const rawSource = compilation.assets[filename];
              // extract CSS string
              const css = rawSource.source();
              
              // create device-type specific css
              const deviceSpecificCss = '..';
              
              // add output back to compilation
              compilation.assets[name] = new RawSource(deviceSpecificCss);
            });
          }
        )
      }
    );
  }
}

module.exports = SplitCssByMediaPlugin;