feature #1033 Allowing new major versions of outdated dependencies (weaverryan)

This PR was squashed before being merged into the main branch.

Discussion
----------

Allowing new major versions of outdated dependencies

Fixes #1029

~~A bit more work to do. For now, I'm focused only on the main dependencies (not the `devDependencies`).~~

~~You could argue that this will require a new major version of webpack-encore. However, there is a precedence for allowing major dependency upgrades on minor versions in the past: https://github.com/symfony/webpack-encore/releases/tag/v1.2.0. Assuming none of the libraries have underlying changes that are likely to affect users, I'd like to do that again.~~ Edit: likely we should have a new major release.

## Dependencies

* ~`chalk`~: kept at v4 because v5 requires esm. v4 is stable.
* `clean-webpack-plugin`: `3->4` No breaking changes
* `css-loader`: `5->6`: Min node to 12.3.0,  other changes: [CHANGELOG](https://github.com/webpack-contrib/css-loader/blob/master/CHANGELOG.md#-breaking-changes)
* `css-minimizer-webpack-plugin`: `2->3` Min node to 12.3.0
* `loader-utils`: REMOVED
* mini-css-extract-plugin `1.5->2.2.1` Min node to 12.13.0, Webpack to 5.0.0, other changes: [CHANGELOG](https://github.com/webpack-contrib/mini-css-extract-plugin/blob/master/CHANGELOG.md#-breaking-changes)
- ~`pkg-up`~: Keeping version `3.1` because `4` requires esm.
- `pretty-error`: `3.0->4.0` Min node to 12.0
- `resolve-url-loader` `3.0->5.0` Min node to 12.0, postcss ^8.0, remove `rework` engine,  other changes: [CHANGELOG](https://github.com/bholloway/resolve-url-loader/blob/v4-maintenance/packages/resolve-url-loader/CHANGELOG.md)
- `style-loader`: `2->3` Min node to 12.13, Min webpack to 5.0 other changes: [CHANGELOG](https://github.com/webpack-contrib/style-loader/blob/master/CHANGELOG.md#-breaking-changes)
- `yargs-parser`: `20.2->21` Min node to 12.0

## Dev Dependencies
- `eslint`: `7->8` Min node to `12.22`
- `eslint-webpack-plugin`: `2.5->3` min node to `12`. Min webpack `5`
- `fork-ts-checker-webpack-plugin`: `5->6` [CHANGELOG](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin/releases/tag/v6.0.0)
- `fs-extra`: `9->10` Min node to `12`. Potentially breaking changes: [CHANGELOG](https://github.com/jprichardson/node-fs-extra/blob/master/CHANGELOG.md#breaking-changes****)
- `http-server`: `0.12->14` Min node to `12`.
- `less-loader`: `7->10`: Min node to `12`. Min webpack to `5`. `less.webpackLoaderContext` was removed, please use `pluginManager.webpackLoaderContext`
- `mocha`: `8->9`: min node to `12`. [CHANGELOG](https://github.com/mochajs/mocha/blob/master/CHANGELOG.md#boom-breaking-changes)
- `postcss-loader`: `4-5->6`: min node to `12`. min webpack to `5`.
- `preact`: `8->10`: [CHANGELOG](https://github.com/preactjs/preact/releases/tag/10.0.0)
- `sass-loader`: `9-10-11->12` min node to `12.13`. Min webpack to `5`
- `sinon`: `9->12`
- ~`strip-ansi`~: Need to keep `6` because `7` is esm only. Min node to `12`
- `stylus`: `0.54->0.56`
- `stylus-loader`: `3-4-5->6`: Min node to `12.13`. Min webpack to `5`. Other breaking changes: [CHANGELOG](https://github.com/webpack-contrib/stylus-loader/blob/master/CHANGELOG.md#400-2020-09-29)
* `vue-loader`: `16-17` No important changes: https://github.com/vuejs/vue-loader/blob/next/CHANGELOG.md#1700-2021-12-12

TODOs:

* [x] A) Check CHANGELOG of each library to see what changes, if any, we need.
* [x] B) Bump *our* CHANGELOG for changes people should watch out for
* [x] C) Get tests passing

Commits
-------

f1a1db6 Updating Changelog for #960
e8c6d25 bumping preact min to fix test
e4495aa upgrading babel to work with eslint plugin
e853d9e Bumping eslint-webpack-plugin support to fix bugs
a7d817d Writing out babel.config.js for users when using eslint plugin
a4aec57 Converting warning to error, which is consistent with babel env config method
1dc344c dropping Node 10 in CI
c4351d8 removing already unused, deprecated option
69ecce9 Removing deprecated Encore.enableEslintLoader()
993e364 allowing new major versions of outdated dependencies

Author: weaverryan

.github/workflows/high-depends.yml

@@ -14,7 +14,7 @@ jobs:
             fail-fast: false
             matrix:
                 os: [ubuntu-latest, windows-2019]
-                node-versions: [ '10', '16']
+                node-versions: [ '12', '16']
 
         steps:
             -   name: Checkout
@@ -30,11 +30,6 @@ jobs:
 
             -   name: Install Yarn Dependencies
                 run: yarn install
-                if: matrix.node-versions != 10
-
-            -   name: Install Yarn Dependencies Ignore Engines (Node 10)
-                run: yarn install --ignore-engines
-                if: matrix.node-versions == 10
 
             -   name: Show Installed Versions
                 run: yarn list --depth=0

.github/workflows/low-depends.yml

@@ -14,7 +14,7 @@ jobs:
             fail-fast: false
             matrix:
                 os: [ubuntu-latest, windows-2019]
-                node-versions: [ '10', '16']
+                node-versions: [ '12', '16']
 
         steps:
             -   name: Checkout
@@ -33,11 +33,6 @@ jobs:
 
             -   name: Install Yarn Dependencies
                 run: yarn install
-                if: matrix.node-versions != 10
-
-            -   name: Install Yarn Dependencies Ignore Engines (Node 10)
-                run: yarn install --ignore-engines
-                if: matrix.node-versions == 10
 
             -   name: Show Installed Versions
                 run: yarn list --depth=0

.github/workflows/stable-tests.yml

@@ -14,7 +14,7 @@ jobs:
             fail-fast: false
             matrix:
                 os: [ubuntu-latest, windows-2019]
-                node-versions: [ '10', '12', '14', '16']
+                node-versions: [ '12', '14', '16']
 
         steps:
             -   name: Checkout
@@ -27,11 +27,6 @@ jobs:
 
             -   name: Install Yarn Dependencies
                 run: yarn install
-                if: matrix.node-versions != 10
-
-            -   name: Install Yarn Dependencies Ignore Engines (Node 10)
-                run: yarn install --ignore-engines
-                if: matrix.node-versions == 10
 
             -   name: Show Installed Versions
                 run: yarn list --depth=0

CHANGELOG.md

@@ -1,5 +1,59 @@
 # CHANGELOG
 
+## [v2.0.0](https://github.com/symfony/webpack-encore/releases/tag/v2.0.0)
+
+*TBD, 2022*
+
+This is a new major version that contains several backwards-compatibility breaks.
+
+### BC Breaks
+
+The following dependencies were upgraded a major version. It's unlikely
+these will cause problems, unless you were further configuring this part
+of Encore:
+
+* `clean-webpack-plugin` Version `3` to `4`: dropped old Node & Webpack version support
+* `css-loader` Version `5` to `6`: dropped old Node version support & [CHANGELOG](https://github.com/webpack-contrib/css-loader/blob/master/CHANGELOG.md#-breaking-changes)
+* `css-minimizer-webpack-plugin` Version `2` to `3`: dropped old Node version support
+* `loader-utils` REMOVED
+* `mini-css-extract-plugin` Version `1.5` to `2.2.1`: dropped old Node & Webpack version support & [CHANGELOG](https://github.com/webpack-contrib/mini-css-extract-plugin/blob/master/CHANGELOG.md#-breaking-changes)
+* `pretty-error` Version `3.0` to `4.0`: dropped old Node version support 
+* `resolve-url-loader` Version `3.0` to `5.0`: dropped old Node version support, requires postcss `^8.0`, remove `rework` engine & [CHANGELOG](https://github.com/bholloway/resolve-url-loader/blob/v4-maintenance/packages/resolve-url-loader/CHANGELOG.md)
+* `style-loader` Version `2` to `3`: dropped old Node and Webpack version support & [CHANGELOG](https://github.com/webpack-contrib/style-loader/blob/master/CHANGELOG.md#-breaking-changes)
+* `yargs-parser` Version `20.2` to `21`: dropped old Node version support
+
+Additionally, Encore changed the supported versions of the following packages,
+which you may have installed to enable extra features:
+
+* `eslint` Minimum version increased from `7` to `8`
+* `eslint-webpack-plugin` Minimum version increased from `2.5` to `3`
+* `fork-ts-checker-webpack-plugin` Minimum version increased from `5` to `6` [CHANGELOG](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin/releases/tag/v6.0.0)
+* `less-loader` Minimum version increased from `7` to `10`
+* `postcss-loader` Minimum version increased from `4` to `6`
+* `preact` Minimum version increased from `8` to `10` [CHANGELOG](https://github.com/preactjs/preact/releases/tag/10.0.0)
+* `sass-loader` Minimum version increased from `9` to `12`
+* `stylus` Minimum version increased from `0.54` to `0.56`
+* `stylus-loader` Minimum version increased from `3` to `6` [CHANGELOG](https://github.com/webpack-contrib/stylus-loader/blob/master/CHANGELOG.md#400-2020-09-29)
+* `vue-loader` Minimum version increased from `16` to `17` [CHANGELOG](https://github.com/vuejs/vue-loader/blob/next/CHANGELOG.md#1700-2021-12-12)
+
+* Removed `Encore.enableEslintLoader()`: use `Encore.enableEslintPlugin()`.
+
+* If using `enableEslintPlugin()` with the `@babel/eslint-parser` parser,
+  you may now need to create an external Babel configuration file. To see
+  an example, temporarily delete your `.eslintrc.js` file and run Encore.
+  The error will show you a Babel configuration file you can use.
+
+* With `configureDefinePlugin()`, the `options['process.env']` key format
+  passed to the callback has changed (see #960). If you are using `configureDefinePlugin()`
+  to add more items to `process.env`, your code will need to change:
+
+```diff
+Encore.configureDefinePlugin((options) => {
+-    options['process.env']['SOME_VAR'] = JSON.stringify('the value');
++    options['process.env.SOME_VAR'] = JSON.stringify('the value');
+})
+````
+
 ## [v1.8.2](https://github.com/symfony/webpack-encore/releases/tag/v1.8.2)
 
 *Mar 17th, 2022*

index.js

@@ -1260,53 +1260,6 @@ class Encore {
         return this;
     }
 
-    /**
-     * If enabled, the eslint-loader is enabled.
-     *
-     * https://github.com/MoOx/eslint-loader
-     *
-     * ```
-     * // enables the eslint loaded using the default eslint configuration.
-     * Encore.enableEslintLoader();
-     *
-     * // You can also pass in an object of options
-     * // that will be passed on to the eslint-loader
-     * Encore.enableEslintLoader({
-     *     emitWarning: false
-     * });
-     *
-     * // For a more advanced usage you can pass in a callback
-     * // https://github.com/webpack-contrib/eslint-loader#options
-     * Encore.enableEslintLoader((options) => {
-     *      options.extends = 'airbnb';
-     *      options.emitWarning = false;
-     * });
-     *
-     * // configure Encore-specific options
-     * Encore.enableEslintLoader(() => {}, {
-     *     // set optional Encore-specific options, for instance:
-     *
-     *     // lint `.vue` files
-     *     lintVue: true
-     * });
-     * ```
-     *
-     * Supported options:
-     *      * {boolean} lintVue (default=false)
-     *              Configure the loader to lint `.vue` files
-     * ```
-     *
-     * @deprecated Prefer using "Encore.enableEslintPlugin()" instead.
-     * @param {string|object|function} eslintLoaderOptionsOrCallback
-     * @param {object} encoreOptions
-     * @returns {Encore}
-     */
-    enableEslintLoader(eslintLoaderOptionsOrCallback = () => {}, encoreOptions = {}) {
-        webpackConfig.enableEslintLoader(eslintLoaderOptionsOrCallback, encoreOptions);
-
-        return this;
-    }
-
     /**
      * If enabled, the eslint-webpack-plugin is enabled.
      *
@@ -1546,15 +1499,11 @@ class Encore {
      *
      * https://webpack.js.org/concepts/loaders/#configuration
      *
-     * For example, if you are using Vue and ESLint loader,
-     * this is how you can configure ESLint to lint Vue files:
-     *
      * ```
      * Encore
-     *     .enableEslintLoader()
      *     .enableVueLoader()
-     *     .configureLoaderRule('eslint', (loaderRule) => {
-     *          loaderRule.test = /\.(jsx?|vue)/;
+     *     .configureLoaderRule('vue', (loaderRule) => {
+     *         // some custom config for vue-loader
      *     });
      * ```
      *

lib/WebpackConfig.js

@@ -119,7 +119,6 @@ class WebpackConfig {
         this.useReact = false;
         this.usePreact = false;
         this.useVueLoader = false;
-        this.useEslintLoader = false;
         this.useEslintPlugin = false;
         this.useTypeScriptLoader = false;
         this.useForkedTypeScriptTypeChecking = false;
@@ -133,10 +132,6 @@ class WebpackConfig {
             resolveUrlLoader: true,
             resolveUrlLoaderOptions: {}
         };
-        /** @deprecated */
-        this.stimulusOptions = {
-            controllerJsonPath: null,
-        };
         this.preactOptions = {
             preactCompat: false
         };
@@ -151,9 +146,6 @@ class WebpackConfig {
             version: null,
             runtimeCompilerBuild: null
         };
-        this.eslintOptions = {
-            lintVue: false,
-        };
         this.persistentCacheBuildDependencies = {};
 
         // Features/Loaders options callbacks
@@ -171,7 +163,6 @@ class WebpackConfig {
         this.watchOptionsConfigurationCallback = () => {};
         this.devServerOptionsConfigurationCallback = () => {};
         this.vueLoaderOptionsCallback = () => {};
-        this.eslintLoaderOptionsCallback = () => {};
         this.eslintPluginOptionsCallback = () => {};
         this.tsConfigurationCallback = () => {};
         this.handlebarsConfigurationCallback = () => {};
@@ -419,7 +410,7 @@ class WebpackConfig {
             }
 
             if (this.doesBabelRcFileExist()) {
-                logger.warning('The "callback" argument of configureBabel() will not be used because your app already provides an external Babel configuration (e.g. a ".babelrc" or "babel.config.js" file or "babel" key in "package.json"). Use null as a first argument to remove that warning.');
+                throw new Error('The "callback" argument of configureBabel() will not be used because your app already provides an external Babel configuration (e.g. a ".babelrc" or "babel.config.js" file or "babel" key in "package.json"). Use null as the first argument to remove this error.');
             }
         }
 
@@ -691,7 +682,6 @@ class WebpackConfig {
             this.addEntry(name, rootDir + '/' + controllersData.entrypoints[name]);
         }
 
-        this.stimulusOptions.controllersJsonPath = controllerJsonPath;
         this.addAliases({
             '@symfony/stimulus-bridge/controllers.json': path.resolve(controllerJsonPath),
         });
@@ -804,46 +794,7 @@ class WebpackConfig {
         }
     }
 
-    enableEslintLoader(eslintLoaderOptionsOrCallback = () => {}, eslintOptions = {}) {
-        logger.deprecation('Encore.enableEslintLoader() is deprecated, please use Encore.enableEslintPlugin() instead.');
-
-        if (this.useEslintPlugin) {
-            throw new Error('Encore.enableEslintLoader() can not be called when Encore.enableEslintPlugin() has been called.');
-        }
-
-        this.useEslintLoader = true;
-
-        if (typeof eslintLoaderOptionsOrCallback === 'function') {
-            this.eslintLoaderOptionsCallback = eslintLoaderOptionsOrCallback;
-        } else if (typeof eslintLoaderOptionsOrCallback === 'string') {
-            logger.deprecation('enableEslintLoader: Extending from a configuration is deprecated, please use a configuration file instead. See https://eslint.org/docs/user-guide/configuring for more information.');
-
-            this.eslintLoaderOptionsCallback = (options) => {
-                options.extends = eslintLoaderOptionsOrCallback;
-            };
-        } else if (typeof eslintLoaderOptionsOrCallback === 'object') {
-            this.eslintLoaderOptionsCallback = (options) => {
-                Object.assign(options, eslintLoaderOptionsOrCallback);
-            };
-        } else {
-            throw new Error('Argument 1 to enableEslintLoader() must be either a string, object or callback function.');
-        }
-
-        // Check allowed keys
-        for (const key of Object.keys(eslintOptions)) {
-            if (!(key in this.eslintOptions)) {
-                throw new Error(`"${key}" is not a valid key for enableEslintLoader(). Valid keys: ${Object.keys(this.eslintOptions).join(', ')}.`);
-            }
-        }
-
-        this.eslintOptions = eslintOptions;
-    }
-
     enableEslintPlugin(eslintPluginOptionsOrCallback = () => {}) {
-        if (this.useEslintLoader) {
-            throw new Error('Encore.enableEslintPlugin() can not be called when Encore.enableEslintLoader() has been called.');
-        }
-
         this.useEslintPlugin = true;
 
         if (typeof eslintPluginOptionsOrCallback === 'function') {

lib/config-generator.js

@@ -22,7 +22,6 @@ const babelLoaderUtil = require('./loaders/babel');
 const tsLoaderUtil = require('./loaders/typescript');
 const vueLoaderUtil = require('./loaders/vue');
 const handlebarsLoaderUtil = require('./loaders/handlebars');
-const eslintLoaderUtil = require('./loaders/eslint');
 // plugins utils
 const miniCssExtractPluginUtil = require('./plugins/mini-css-extract');
 const deleteUnusedEntriesPluginUtil = require('./plugins/delete-unused-entries');
@@ -400,16 +399,6 @@ class ConfigGenerator {
             }));
         }
 
-        if (this.webpackConfig.useEslintLoader) {
-            rules.push(applyRuleConfigurationCallback('eslint', {
-                test: eslintLoaderUtil.getTest(this.webpackConfig),
-                loader: require.resolve('eslint-loader'), //eslint-disable-line node/no-unpublished-require
-                exclude: /node_modules/,
-                enforce: 'pre',
-                options: eslintLoaderUtil.getOptions(this.webpackConfig)
-            }));
-        }
-
         if (this.webpackConfig.useTypeScriptLoader) {
             rules.push(applyRuleConfigurationCallback('typescript', {
                 test: /\.tsx?$/,

lib/features.js

@@ -117,15 +117,6 @@ const features = {
         ],
         description: 'use Vue with JSX support'
     },
-    eslint: {
-        method: 'enableEslintLoader()',
-        // eslint is needed so the end-user can do things
-        packages: [
-            { name: 'eslint' },
-            { name: 'eslint-loader', enforce_version: true },
-        ],
-        description: 'Enable ESLint checks'
-    },
     eslint_plugin: {
         method: 'enableEslintPlugin()',
         // eslint is needed so the end-user can do things