Merge pull request #278 from GSA/sc_update-webpack

Update webpack style loaders

.pa11yci

@@ -1,6 +1,6 @@
 {
   "defaults": {
-  "timeout": 20000,
+  "timeout": 30000,
   "wait": 1000,
   "standard": "WCAG2AA",
   "ignore": [

config/webpack/webpack.dev.js

@@ -1,19 +1,17 @@
-const webpack = require('webpack');
-const merge = require('webpack-merge');
-const path = require('path');
-const shared = require('./webpack.shared');
+const webpack = require('webpack')
+const merge = require('webpack-merge')
+const path = require('path')
+const shared = require('./webpack.shared')
 
 const dev = {
   mode: 'development',
-  devtool: 'cheap-module-eval-source-map',
+  devtool: 'eval-source-map',
   devServer: {
     hot: true,
     publicPath: '/',
     historyApiFallback: true
   },
-  plugins: [
-    new webpack.HotModuleReplacementPlugin()
-  ]
-};
+  plugins: [new webpack.HotModuleReplacementPlugin()]
+}
 
-module.exports = merge(shared, dev);
+module.exports = merge(shared, dev)

config/webpack/webpack.shared.js

@@ -1,13 +1,15 @@
 const { copyFileSync, readFileSync } = require('fs')
 const { dirname, join } = require('path')
-const FaviconsWebpackPlugin = require('favicons-webpack-plugin')
+// const FaviconsWebpackPlugin = require('favicons-webpack-plugin')
 const CleanWebpackPlugin = require('clean-webpack-plugin')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
 const DefinePlugin = require('webpack/lib/DefinePlugin')
 const EnvironmentPlugin = require('webpack/lib/EnvironmentPlugin')
 const EventHooksPlugin = require('event-hooks-webpack-plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const sass = require('sass')
+const autoprefixer = require('autoprefixer')
+const mqpacker = require('css-mqpacker')
 const get = require('lodash.get')
 const { map } = require('@code.gov/cautious')
 
@@ -153,14 +155,30 @@ module.exports = {
         }
       },
       {
-        test: /\.scss$/,
+        test: /\.(s*)css$/,
         use: [
-          'style-loader', // creates style nodes from JS strings
+          {
+            loader: 'style-loader', // creates style nodes from JS strings
+            options: {
+              sourceMap: true
+            }
+          },
           'css-loader', // translates CSS into CommonJS
+          {
+            loader: 'postcss-loader', // adds vendor prefixing
+            options: {
+              indent: 'postcss',
+              parser: 'postcss-scss',
+              sourceMap: true,
+              plugins: [autoprefixer({ grid: true })],
+              mqpacker
+            }
+          },
           {
             loader: 'sass-loader', // compiles Sass to CSS
             options: {
-              implementation: sass
+              implementation: sass,
+              sourceMap: true
             }
           }
         ]
@@ -209,12 +227,12 @@ module.exports = {
     new EnvironmentPlugin(['CODE_GOV_API_BASE', 'CODE_GOV_API_KEY', 'CODE_GOV_TASKS_URL']),
     new CleanWebpackPlugin([OUTPUT_PATH], { root: rootDir }),
     new CopyWebpackPlugin(patterns),
-    new FaviconsWebpackPlugin({
-      logo: './assets/img/favicon.png',
-      icons: {
-        appleStartup: false
-      }
-    }),
+    // new FaviconsWebpackPlugin({
+    //   logo: './assets/img/favicon.png',
+    //   icons: {
+    //     appleStartup: false
+    //   }
+    // }),
     new HtmlWebpackPlugin({
       hash: true,
       template: 'index.html',