webpackconfig/lib/styles.js

Helper for creating webpack configs

import path              from 'path';
import cssnano           from 'cssnano';
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import autoprefixer      from 'autoprefixer';


const configStyles = function (webpackConfig, config) {
  // debugger
  let cssLoader = !config.cssModules
                  ? ['css?sourceMap', 'css-loader'].join('&')
                  : [
                    'css?modules',
                    'sourceMap',
                    'css-loader',
                    'importLoaders=1',
                    'localIdentName=[name]__[local]___[hash:base64:5]'
                  ].join('&');


  //stylus
  if (config.stylus) {
    webpackConfig.module.resolve.push({
      extensions: ['', '.js', '.styl']
    });

    webpackConfig.module.loaders.push({
      test: /\.styl$/,
      include: /src/,
      loader: [
        'style-loader',
        cssLoader,
        'stylus-loader'
      ]

    });
  }

  //postCss
  if (config.postCss) {
    // let reInclude = new RegExp(config.srcPath);

    webpackConfig.module.loaders.push({
      test: /\.css$/,
      include: /src/,
      loaders: [
        'style',
        cssLoader,
        'postcss'
      ]
    });

    webpackConfig.module.loaders.push({
      test: /\.css$/,
      exclude: /src/,
      loaders: [
        'style',
        'css?sourceMap',
        'postcss'
      ]
    });

    //plugins
    if (config.isProduction) {
      webpackConfig.postcss = function () {
        return [
          cssnano({
            autoprefixer: {
              add: true,
              remove: true,
              browsers: ['last 2 versions']
            },
            discardComments: {
              removeAll: true
            },
            safe: true,
            sourcemap: true
          })
        ];
      };
    }else {
      webpackConfig.postcss = function () {
        return [autoprefixer];
      };
    }

  }


  //sass
  if (config.sass) {
    //push to loader
    webpackConfig.module.loaders.push({
      test: /\.scss$/,
      exclude: /src/,
      loaders: [
        'style',
        'css?sourceMap',
        cssLoader,
        'sass?sourceMap'
      ]
    });
    //loader
    webpackConfig.sassLoader = {
      includePaths: path.resolve(config.srcPath, config.stylesDir)
    };
  }


  if (!config.isDevelopment) {
    debugger

    webpackConfig.module.loader.filter(function (loader) {
      return loader.loaders && loader.loaders.find(function (name) {
        return /css/.test(name.split('?')[0]);
      });
    });

    webpackConfig.module.loader.forEach(function (loader) {
      const [first, ...rest] = loader.loaders;
      loader.loader = ExtractTextPlugin.extract(first, rest.join('!'));
      delete loader.loaders;
    });

    webpackConfig.plugins.push(
      new ExtractTextPlugin('[name].[contenthash].css', {
        allChunks: true
      })
    );

  }

  return webpackConfig;

};

export default configStyles;