fix: Security vulnerabilities in dev dependencies + upgrade dev depen…

…dencies (#6) * chore: Add development setup section to the contributing docs. * fix: npm audit fix (auto) 758 of 779 vulnerabilities by updating dependencies * chore: Remove measure-text as a DLL vendor dependency. * chore: Bump [email protected] * chore: Bump [email protected] * chore: Bump [email protected] * chore: Bump [email protected]. Add [email protected] * chore: Remove extract-text-plugin. Add mini-css-extract-plugin. * chore: Bump [email protected] * chore: Upgrade to Babel 7
matt-d-rat · Aug 19, 2019 · 6575007 · 6575007
1 parent 3104743
commit 6575007
Show file tree

Hide file tree

Showing 5 changed files with 16,390 additions and 12,952 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,32 +1,44 @@
 {
   "presets": [
-    "react",
-    ["env", {
-      "targets": {
-        "browsers": ["last 2 versions", "safari >= 7"]
-      },
-      "modules": false
-    }]
+    "@babel/preset-react",
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "browsers": [
+            "last 2 versions",
+            "safari >= 7"
+          ]
+        },
+        "modules": false
+      }
+    ]
   ],
   "plugins": [
-    "syntax-object-rest-spread",
-    "transform-object-rest-spread",
-    "transform-class-properties"
+    "@babel/plugin-syntax-object-rest-spread",
+    "@babel/plugin-proposal-object-rest-spread",
+    "@babel/plugin-proposal-class-properties"
   ],
   "env": {
     "test": {
       "presets": [
-        "react",
-        ["env", {
-          "targets": {
-            "browsers": ["last 2 versions", "safari >= 7"]
+        "@babel/preset-react",
+        [
+          "@babel/preset-env",
+          {
+            "targets": {
+              "browsers": [
+                "last 2 versions",
+                "safari >= 7"
+              ]
+            }
           }
-        }]
+        ]
       ],
       "plugins": [
-        "syntax-object-rest-spread",
-        "transform-object-rest-spread",
-        "transform-class-properties"
+        "@babel/plugin-syntax-object-rest-spread",
+        "@babel/plugin-proposal-object-rest-spread",
+        "@babel/plugin-proposal-class-properties"
       ]
     }
   }

diff --git a/config/project.js b/config/project.js
@@ -24,7 +24,6 @@ module.exports = {
   vendor: [
     'classnames',
     'lodash',
-    'measure-text',
     'react',
     'react-dom',
     'units-css'

diff --git a/config/webpack.base.config.js b/config/webpack.base.config.js
@@ -1,6 +1,7 @@
 const webpack = require('webpack');
 const autoprefixer = require('autoprefixer');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const cssNano = require('cssnano');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const path = require('path');
 const project = require('./project');
 
@@ -51,40 +52,46 @@ module.exports = {
       {
         test: /\.scss$/,
         exclude: [/node_modules/],
-        use: ExtractTextPlugin.extract({
-          fallback: 'style-loader',
-          use: [
-            {
-              loader: 'css-loader',
-              options: {
-                minimize: process.env.NODE_ENV === 'production',
-                sourceMap: true,
-                modules: true,
-                importLoaders: 1,
+        use: [
+          {
+            loader: MiniCssExtractPlugin.loader,
+            options: {
+              hmr: process.env.NODE_ENV === 'development' // only enable hot in development
+            }
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              sourceMap: true,
+              importLoaders: 1,
+              modules: {
                 localIdentName: (process.env.NODE_ENV === 'production')
                   ? '[hash:base64:5]'
                   : project.name + '_[name]_[local]---[hash:base64:5]'
               }
-            },
-            {
-              loader: 'postcss-loader',
-              options: {
-                sourceMap: true,
-                plugins: function() {
-                  return [
-                    autoprefixer('last 2 versions')
-                  ];
-                }
-              }
-            },
-            {
-              loader: 'sass-loader',
-              options: {
-                outputStyle: 'expanded'
+            }
+          },
+          {
+            loader: 'postcss-loader',
+            ident: 'postcss',
+            options: {
+              sourceMap: true,
+              plugins: function() {
+                return [
+                  cssNano(),
+                  autoprefixer('last 2 versions')
+                ];
               }
             }
-          ]
-        })
+          },
+          {
+            loader: 'sass-loader',
+            options: {
+              sourceMap: true,
+              outputStyle: 'expanded'
+            }
+          }
+        ]
       },
       {
         test: /\.(png|jpg|jpeg|gif|svg)$/,
@@ -126,11 +133,10 @@ module.exports = {
     new webpack.DefinePlugin(GLOBALS),
 
     // Extracts the imported Sass dependencies into a single CSS file
-    new ExtractTextPlugin({
-      filename: 'assets/css/[name].css',
-      allChunks: true,
+    new MiniCssExtractPlugin({
       ignoreOrder: false,
-      disable: process.env.NODE_ENV !== 'production'
+      filename: process.env.NODE_ENV !== 'production' ? '[name].css' : '[name].[hash].css',
+      chunkFilename: process.env.NODE_ENV !== 'production' ? '[id].css' : '[id].[hash].css'
     })
   ]
 };