bug #440 updating css-loader dep and ts-loader dev dep (weaverryan)

This PR was squashed before being merged into the master branch (closes #440).

Discussion
----------

updating css-loader dep and ts-loader dev dep

Fixes #438 and fixes #431 and I believe fixes #432

This PR is more interesting than I expected! The latest version of `css-loader` (1.0) does not have the `minimize` option. Even though (until now) the older version was locked on our `package.json`, it may have been possible for users to be using a new version (I believe that should not be possible, but node deps can do strange things).

Commits
-------

8f7ac59 updating css-loader dep and ts-loader dev dep

index.js

@@ -226,6 +226,28 @@ class Encore {
         return this;
     }
 
+    /**
+     * Allows you to configure the options passed to the optimize-css-assets-webpack-plugin.
+     * A list of available options can be found at https://github.com/NMFR/optimize-css-assets-webpack-plugin
+     *
+     * For example:
+     *
+     *      Encore.configureOptimizeCssPlugin((options) => {
+     *          options.cssProcessor = require('cssnano');
+     *          options.cssProcessorPluginOptions = {
+     *              preset: ['default', { discardComments: { removeAll: true } }],
+     *          }
+     *      })
+     *
+     * @param {function} optimizeCssPluginOptionsCallback
+     * @returns {Encore}
+     */
+    configureOptimizeCssPlugin(optimizeCssPluginOptionsCallback = () => {}) {
+        webpackConfig.configureOptimizeCssPlugin(optimizeCssPluginOptionsCallback);
+
+        return this;
+    }
+
     /**
      * Adds a JavaScript file that should be webpacked:
      *

lib/WebpackConfig.js

@@ -110,6 +110,7 @@ class WebpackConfig {
         this.loaderOptionsPluginOptionsCallback = () => {};
         this.manifestPluginOptionsCallback = () => {};
         this.terserPluginOptionsCallback = () => {};
+        this.optimizeCssPluginOptionsCallback = () => {};
         this.notifierPluginOptionsCallback = () => {};
     }
 
@@ -217,6 +218,14 @@ class WebpackConfig {
         this.terserPluginOptionsCallback = terserPluginOptionsCallback;
     }
 
+    configureOptimizeCssPlugin(optimizeCssPluginOptionsCallback = () => {}) {
+        if (typeof optimizeCssPluginOptionsCallback !== 'function') {
+            throw new Error('Argument 1 to configureOptimizeCssPlugin() must be a callback function');
+        }
+
+        this.optimizeCssPluginOptionsCallback = optimizeCssPluginOptionsCallback;
+    }
+
     /**
      * Returns the value that should be used as the publicPath,
      * which can be overridden by enabling the webpackDevServer

lib/config-generator.js

@@ -33,6 +33,7 @@ const variableProviderPluginUtil = require('./plugins/variable-provider');
 const cleanPluginUtil = require('./plugins/clean');
 const definePluginUtil = require('./plugins/define');
 const terserPluginUtil = require('./plugins/terser');
+const optimizeCssAssetsUtil = require('./plugins/optimize-css-assets');
 const vuePluginUtil = require('./plugins/vue');
 const friendlyErrorPluginUtil = require('./plugins/friendly-errors');
 const assetOutputDisplay = require('./plugins/asset-output-display');
@@ -388,7 +389,8 @@ class ConfigGenerator {
 
         if (this.webpackConfig.isProduction()) {
             optimization.minimizer = [
-                terserPluginUtil(this.webpackConfig)
+                terserPluginUtil(this.webpackConfig),
+                optimizeCssAssetsUtil(this.webpackConfig)
             ];
         } else {
             // see versioning.js: this gives us friendly module names,

lib/plugins/optimize-css-assets.js

@@ -0,0 +1,37 @@
+/*
+ * This file is part of the Symfony Webpack Encore package.
+ *
+ * (c) Fabien Potencier <fabien@symfony.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+'use strict';
+
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const applyOptionsCallback = require('../utils/apply-options-callback');
+
+/**
+ * @param {WebpackConfig} webpackConfig
+ * @return {object}
+ */
+module.exports = function(webpackConfig) {
+    const optimizePluginOptions = {
+        // see: https://github.com/NMFR/optimize-css-assets-webpack-plugin/issues/53#issuecomment-400294569
+        // we always use annotations: true, which is the setting if you're
+        // outputting to a separate file because this plugin is only
+        // used in production, and, in production, we always use the
+        // source-map option (a separate file) in config-generator.
+        cssProcessorOptions: {
+            map: {
+                inline: false,
+                annotation: true,
+            }
+        }
+    };
+
+    return new OptimizeCSSAssetsPlugin(
+        applyOptionsCallback(webpackConfig.optimizeCssPluginOptionsCallback, optimizePluginOptions)
+    );
+};

lib/webpack/delete-unused-entries-js-plugin.js

@@ -22,15 +22,17 @@ DeleteUnusedEntriesJSPlugin.prototype.apply = function(compiler) {
                 let fileDeleteCount = 0;
 
                 // loop over the output files and find the 1 that ends in .js
-                chunk.files.forEach((filename) => {
+                // loop in reverse, to avoid issues as we remove items from chunk.files
+                for (let i = chunk.files.length - 1; i >= 0; --i) {
+                    let filename = chunk.files[i];
                     if (/\.js(\.map)?(\?[^.]*)?$/.test(filename)) {
                         fileDeleteCount++;
                         // remove the output file
                         delete compilation.assets[filename];
                         // remove the file, so that it does not dump in the manifest
                         chunk.files.splice(chunk.files.indexOf(filename), 1);
                     }
-                });
+                }
 
                 // sanity check: make sure 1 or 2 files were deleted
                 // if there's some edge case where more .js files

package.json

@@ -32,14 +32,15 @@
     "babel-loader": "^8.0.0",
     "chalk": "^2.4.1",
     "clean-webpack-plugin": "^0.1.19",
-    "css-loader": "^0.28.10",
+    "css-loader": "^1.0.0",
     "fast-levenshtein": "^2.0.6",
     "file-loader": "^1.1.10",
     "friendly-errors-webpack-plugin": "^1.7.0",
     "fs-extra": "^2.0.0",
     "loader-utils": "^1.1.0",
     "lodash": ">=3.5 <5",
     "mini-css-extract-plugin": ">=0.4.0 <0.4.3",
+    "optimize-css-assets-webpack-plugin": "^5.0.1",
     "pkg-up": "^1.0.0",
     "pretty-error": "^2.1.1",
     "resolve-url-loader": "^2.3.0",
@@ -82,7 +83,7 @@
     "sinon": "^2.3.4",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.2",
-    "ts-loader": "^4.3.0",
+    "ts-loader": "^5.3.0",
     "typescript": "^2.3.4",
     "url-loader": "^1.0.1",
     "vue": "^2.3.4",

test/WebpackConfig.js

@@ -299,6 +299,24 @@ describe('WebpackConfig object', () => {
         });
     });
 
+    describe('configureOptimizeCssPlugin', () => {
+        it('Setting callback', () => {
+            const config = createConfig();
+            const callback = () => {};
+            config.configureOptimizeCssPlugin(callback);
+
+            expect(config.optimizeCssPluginOptionsCallback).to.equal(callback);
+        });
+
+        it('Setting invalid callback argument', () => {
+            const config = createConfig();
+
+            expect(() => {
+                config.configureOptimizeCssPlugin('foo');
+            }).to.throw('Argument 1 to configureOptimizeCssPlugin() must be a callback function');
+        });
+    });
+
     describe('addEntry', () => {
         it('Calling with a duplicate name throws an error', () => {
             const config = createConfig();

test/index.js

@@ -405,6 +405,15 @@ describe('Public API', () => {
 
     });
 
+    describe('configureOptimizeCssPlugin', () => {
+
+        it('should return the API object', () => {
+            const returnedValue = api.configureOptimizeCssPlugin(() => {});
+            expect(returnedValue).to.equal(api);
+        });
+
+    });
+
     describe('Runtime environment proxy', () => {
         beforeEach(() => {
             api.clearRuntimeEnvironment();