next.js webpack config for outputting AMP-specific Sass to separate file

withAmpSass.js

// Copied from @zeit/next-sass and modified to so that we can define AMP styles
// in *.amp.scss and normal styles in *.scss (excludes *.amp.scss). Normal
// styles are output as before; AMP styles are output to styles-amp.scss

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const cssLoaderConfig = require('@zeit/next-css/css-loader-config');
const commonsChunkConfig = require('@zeit/next-css/commons-chunk-config');

module.exports = (nextConfig = {}) =>
  Object.assign({}, nextConfig, {
    webpack: (config, options) => {
      if (!options.defaultLoaders) {
        throw new Error(
          'This plugin is not compatible with Next.js versions below 5.0.0 https://err.sh/next-plugins/upgrade'
        );
      }

      const { dev, isServer } = options;
      const {
        cssModules,
        cssLoaderOptions,
        sassLoaderOptions = {}
      } = nextConfig;

      // pass the same instance of ExtractTextPlugins to all css related modules
      // so that they compile to the same file in production
      let { extractCSSPlugin, extractCSSPluginAMP } = options;

      if (!extractCSSPlugin) {
        extractCSSPlugin = new ExtractTextPlugin('static/styles.css');
        extractCSSPluginAMP = new ExtractTextPlugin('static/styles-amp.css');

        config.plugins.push(extractCSSPlugin);
        config.plugins.push(extractCSSPluginAMP);

        options.extractCSSPlugin = extractCSSPlugin;
        options.extractCSSPluginAMP = extractCSSPluginAMP;

        if (!isServer) {
          // modify config.plugins -- specifically CommonsChunkPlugin.minChunks
          // for all sass files
          config = commonsChunkConfig(config, /\.(scss|sass)$/);
        }
      }

      const loaderConfigOpts = {
        cssModules,
        cssLoaderOptions,
        dev,
        isServer,
        loaders: [
          {
            loader: 'sass-loader',
            options: sassLoaderOptions
          }
        ]
      };

      // add CSS config to webpack. (server gets ignore-loader)
      options.defaultLoaders.sass = cssLoaderConfig(
        config,
        extractCSSPlugin,
        loaderConfigOpts
      );
      options.defaultLoaders.sassAMP = cssLoaderConfig(
        config,
        extractCSSPluginAMP,
        loaderConfigOpts
      );

      config.module.rules.push(
        {
          // negative lookbehind to specify everything but AMP SASS
          test: /(?<!\.amp)\.s[ca]ss$/,
          use: options.defaultLoaders.sass
        },
        {
          // only AMP SASS files
          test: /\.amp\.s[ca]ss$/,
          use: options.defaultLoaders.sassAMP
        }
      );

      if (typeof nextConfig.webpack === 'function') {
        return nextConfig.webpack(config, options);
      }

      return config;
    }
  });