feat(decorateClientConfig): Upgrade to version 4 (#45)

BREAKING CHANGE: Removed the client decorator option `extractTextPlugin` in favour of `cssOutputLoader`. Also upgrading from webpack 3 to 4 so any plugins/loaders would need to be supported by 4.
seek-oss · Nov 16, 2018 · 002be06 · 002be06
1 parent bb310d3
commit 002be06
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 80 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -1,3 +1,4 @@
 {
-  "singleQuote": true
+  "singleQuote": true,
+  "tabWidth": 2
 }
diff --git a/README.md b/README.md
@@ -15,8 +15,7 @@ $ npm install --save-dev seek-style-guide-webpack
 First, decorate your server Webpack config:
 
 ```js
-const decorateServerConfig = require('seek-style-guide-webpack')
-  .decorateServerConfig;
+const { decorateServerConfig } = require('seek-style-guide-webpack');
 
 module.exports = decorateServerConfig({
   // Webpack config...
@@ -26,27 +25,41 @@ module.exports = decorateServerConfig({
 Then, decorate your client Webpack config:
 
 ```js
-const decorateClientConfig = require('seek-style-guide-webpack')
-  .decorateClientConfig;
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const { decorateClientConfig } = require('seek-style-guide-webpack');
 
-const extractCss = new ExtractTextPlugin({
-  filename: 'style.css'
+module.exports = decorateClientConfig({
+  // Webpack config...
 });
+```
+
+## Options
+
+### CSS Output Loader `{ cssOutputLoader: <webpack loader> | 'style-loader' }`
+
+By default the client decorator will use [`style-loader`](https://github.com/webpack-contrib/style-loader) to handle the styles emitted from the [`seek-style-guide`](https://github.com/seek-oss/seek-style-guide). Alternatively, you can
+pass in your own loader configuration, eg.
+
+```js
+const { decorateClientConfig } = require('seek-style-guide-webpack');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 const config = {
   // Webpack config...
+  plugins: [
+    new MiniCssExtractPlugin(
+      filename: 'style.css'
+    })
+  ]
 };
 
 module.exports = decorateClientConfig(config, {
-  // Ensure you pass your ExtractTextPlugin instance to the decorator, if required:
-  extractTextPlugin: extractCss
+  cssOutputLoader: MiniCssExtractPlugin.loader
 });
 ```
 
 Please note that, if your Webpack loaders aren't scoped to your local project files via the ["include" option](https://webpack.github.io/docs/configuration.html#module-loaders), the decorator will throw an error.
 
-### Extra includes
+### Extra includes (optional) `{ extraIncludePaths: Array<paths> }`
 
 If you have other external node_modules that need to be compiled in the same way as the seek-style-guide then you can pass an extra parameter to the decorators.
 
@@ -57,7 +70,7 @@ module.exports = decorateClientConfig(config, {
 });
 ```
 
-### CSS Selector Prefix
+### CSS Selector Prefix (optional) `{ cssSelectorPrefix: string }`
 
 This selector prefix is automatically prepended to all selectors to ensure styles don't leak out into the global scope.
 For example, this is used for generating the standalone header & footer in the style guide.

diff --git a/index.js b/index.js
@@ -1,5 +1,4 @@
 const path = require('path');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const nodeExternals = require('webpack-node-externals');
 const chalk = require('chalk');
 const incorrectStyleGuidePath = require('./incorrectStyleGuidePath');
@@ -13,7 +12,7 @@ const styleGuidePath = path.dirname(require.resolve('seek-style-guide'));
 const styleGuideModules = ['react', 'theme', 'fonts'];
 
 const getIncludePaths = options => {
-  const extraIncludePaths = (options && options.extraIncludePaths) || [];
+  const extraIncludePaths = options.extraIncludePaths || [];
 
   return {
     relative: [
@@ -119,7 +118,7 @@ const getCommonLoaders = includes => [
   {
     test: /\.raw\.js$/,
     include: includes,
-    use: [require.resolve('raw-loader'), require.resolve('uglify-loader')]
+    use: [require.resolve('raw-loader')]
   },
   {
     test: /\.svg$/,
@@ -138,7 +137,7 @@ const getCommonLoaders = includes => [
   }
 ];
 
-const decorateConfig = (config, includes, options) => {
+const decorateConfig = (config, includes, options = {}) => {
   const rules = options.rules || [];
   const plugins = options.plugins || [];
   const externals = options.externals;
@@ -197,7 +196,7 @@ const decorateConfig = (config, includes, options) => {
   return config;
 };
 
-const decorateServerConfig = (config, options) => {
+const decorateServerConfig = (config, options = {}) => {
   const { relative, absolute } = getIncludePaths(options);
 
   return decorateConfig(config, absolute, {
@@ -237,40 +236,18 @@ const postcssPlugins = ({ cssSelectorPrefix } = {}) =>
         ]
   );
 
-const decorateClientConfig = (config, options) => {
-  const extractTextPlugin = options && options.extractTextPlugin;
+const decorateClientConfig = (config, options = {}) => {
   const { absolute } = getIncludePaths(options);
 
-  if (extractTextPlugin === ExtractTextPlugin) {
-    error(
-      `
-      You appear to be passing in a reference to "ExtractTextPlugin"
-      directly, rather than creating an instance via
-      "new ExtractTextPlugin(...)". This causes incorrect CSS to be generated
-      since the style guide also uses extract-text-webpack-plugin to
-      generate its own CSS files for web fonts. As a result, it's
-      important that you create your own instance of ExtractTextPlugin and
-      pass it in instead. If you're not sure how to do this, you can see
-      the Webpack documentation at
-      https://github.com/webpack/extract-text-webpack-plugin/tree/webpack-1
-    `
-    );
-  }
-
-  const decorateStyleLoaders = extractTextPlugin
-    ? loaders =>
-        extractTextPlugin.extract({
-          fallback: require.resolve('style-loader'),
-          use: loaders
-        })
-    : loaders => [require.resolve('style-loader'), ...loaders];
+  const clientCssLoader = options.cssOutputLoader || 'style-loader';
 
   return decorateConfig(config, absolute, {
     rules: [
       {
         test: /\.less$/,
         include: absolute,
-        use: decorateStyleLoaders([
+        use: [
+          clientCssLoader,
           {
             loader: require.resolve('css-loader'),
             options: {
@@ -287,7 +264,7 @@ const decorateClientConfig = (config, options) => {
             }
           },
           require.resolve('less-loader')
-        ])
+        ]
       }
     ]
   });

diff --git a/package.json b/package.json
@@ -44,7 +44,7 @@
   "dependencies": {
     "autoprefixer": "^7.1.5",
     "babel-core": "^6.26.0",
-    "babel-loader": "^7.1.2",
+    "babel-loader": "^7.1.5",
     "babel-plugin-add-react-displayname": "^0.0.4",
     "babel-plugin-flow-react-proptypes": "^17.1.0",
     "babel-plugin-transform-class-properties": "^6.24.1",
@@ -56,30 +56,30 @@
     "chalk": "^2.1.0",
     "css-loader": "^0.28.7",
     "less": "^2.7.2",
-    "less-loader": "^4.0.5",
-    "postcss-loader": "^2.0.7",
+    "less-loader": "^4.1.0",
+    "postcss-loader": "^3.0.0",
     "postcss-prefix-selector": "^1.6.0",
     "raw-loader": "^0.5.1",
-    "style-loader": "^0.19.0",
-    "svgo": "^0.7.2",
-    "svgo-loader": "^1.2.1",
-    "uglify-loader": "^2.0.0",
+    "style-loader": "^0.23.1",
+    "svgo": "^1.1.1",
+    "svgo-loader": "^2.2.0",
     "webpack-node-externals": "^1.6.0"
   },
   "peerDependencies": {
     "seek-style-guide": "*"
   },
   "devDependencies": {
     "@commitlint/cli": "^7.2.1",
+    "babel-plugin-seek-style-guide": "^1.0.0",
     "classnames": "^2.2.6",
     "commitizen": "^3.0.4",
     "commitlint-config-seek": "^1.0.0",
     "cz-conventional-changelog": "^2.1.0",
-    "extract-text-webpack-plugin": "^3.0.1",
     "husky": "^1.1.4",
     "lint-staged": "^8.0.4",
     "lodash.omit": "^4.5.0",
     "lodash.range": "^3.2.0",
+    "mini-css-extract-plugin": "^0.4.4",
     "pad-left": "^2.1.0",
     "prettier": "^1.15.2",
     "react": "^16.0.0",
@@ -88,6 +88,7 @@
     "seek-style-guide": "^38.5.0",
     "semantic-release": "^15.11.0",
     "static-site-generator-webpack-plugin": "^3.4.1",
-    "webpack": "^3.6.0"
+    "webpack": "^4.25.1",
+    "webpack-cli": "^3.1.2"
   }
 }
diff --git a/test/src/webpack.config.js b/test/src/webpack.config.js
@@ -1,54 +1,61 @@
 const path = require('path');
 const webpack = require('webpack');
 const autoprefixer = require('autoprefixer');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const StaticSiteGeneratorPlugin = require('static-site-generator-webpack-plugin');
 const decorateClientConfig = require('../../index').decorateClientConfig;
 const decorateServerConfig = require('../../index').decorateServerConfig;
 
-const appCss = new ExtractTextPlugin({
+const appCss = new MiniCssExtractPlugin({
   filename: 'app.css'
 });
 
 // Must be absolute paths
 const appPaths = [path.resolve(__dirname, 'app')];
 
 const clientConfig = {
+  mode: 'production',
+
   entry: path.resolve(__dirname, 'app/client-render'),
 
   output: {
     path: path.resolve(__dirname, '../dist'),
     filename: 'index.js'
   },
 
+  optimization: {
+    nodeEnv: 'production',
+    minimize: true,
+    concatenateModules: true
+  },
+
   module: {
     rules: [
       {
         test: /\.js$/,
         use: {
           loader: 'babel-loader',
           options: {
-            presets: [['es2015', { modules: false }], 'react']
+            presets: [['es2015', { modules: false }], 'react'],
+            plugins: ['seek-style-guide']
           }
         },
         include: appPaths
       },
       {
         test: /\.less$/,
-        use: appCss.extract({
-          fallback: 'style-loader',
-          use: [
-            {
-              loader: 'css-loader',
-              options: {
-                modules: true,
-                localIdentName: '[name]__[local]___[hash:base64:5]'
-              }
-            },
-            'less-loader'
-          ]
-        }),
-        include: appPaths
+        include: appPaths,
+        use: [
+          MiniCssExtractPlugin.loader,
+          {
+            loader: 'css-loader',
+            options: {
+              modules: true,
+              localIdentName: '[name]__[local]___[hash:base64:5]'
+            }
+          },
+          'less-loader'
+        ]
       },
       {
         test: /\.svg$/,
@@ -68,15 +75,7 @@ const clientConfig = {
         NODE_ENV: JSON.stringify('production')
       }
     }),
-    appCss,
-    new webpack.optimize.UglifyJsPlugin({
-      output: {
-        comments: false
-      },
-      compress: {
-        warnings: false
-      }
-    })
+    appCss
   ],
 
   stats: { children: false }
@@ -87,6 +86,10 @@ const serverConfig = {
     render: path.resolve(__dirname, 'app/server-render')
   },
 
+  mode: 'production',
+
+  target: 'node',
+
   output: {
     path: path.resolve(__dirname, '../dist'),
     filename: 'render.js',
@@ -133,7 +136,7 @@ const serverConfig = {
 
 module.exports = [
   decorateClientConfig(clientConfig, {
-    extractTextPlugin: appCss
+    cssOutputLoader: MiniCssExtractPlugin.loader
   }),
   decorateServerConfig(serverConfig)
 ];