Improve CHANGELOG, add tests for Babel and PostCSS with ESM configs

Author: Kocal

CHANGELOG.md

@@ -62,6 +62,14 @@ can adopt modern async APIs from the ecosystem without hacks**.
   // After (ESM)
   import path from 'path';
   ```
+  Similarly, `require.resolve()` becomes `import.meta.resolve()`:
+  ```js
+  // Before (CJS)
+  options.implementation = require.resolve('sass-embedded');
+
+  // After (ESM)
+  options.implementation = import.meta.resolve('sass-embedded');
+  ```
   If you need to require a CJS-only package, use `createRequire`:
   ```js
   import { createRequire } from 'module';
@@ -84,6 +92,16 @@ can adopt modern async APIs from the ecosystem without hacks**.
   };
   ```
 
+* With `"type": "module"`, webpack enables
+  [`resolve.fullySpecified`](https://webpack.js.org/configuration/module/#resolvefullyspecified)
+  by default. This means **file extensions are now required** in some imports that previously
+  worked without them:
+  - **Relative imports**: `import('./shelter_join')` → `import('./shelter_join.js')`
+  - **Deep package imports** from packages that do not have an `"exports"` field in their
+    `package.json` (e.g. `licia`, `jquery-ui`, `Hinclude`):
+    `import delegate from 'licia/delegate'` → `import delegate from 'licia/delegate.js'`
+    `import 'jquery-ui/ui/widgets/progressbar'` → `import 'jquery-ui/ui/widgets/progressbar.js'`
+
 * The package `"exports"` field is now restrictive: only `"@symfony/webpack-encore"` and
   `"@symfony/webpack-encore/lib/plugins/plugin-priorities.js"` are exposed as public entry points.
   If you were importing other internal modules directly, those imports will no longer work.

index.js

@@ -408,7 +408,7 @@ class Encore {
      * Or:
      *
      * ```
-     * const nodeExternals = require('webpack-node-externals');
+     * import nodeExternals from 'webpack-node-externals';
      *
      * Encore.addExternals(
      *     nodeExternals()

test/functional.js

@@ -1086,6 +1086,51 @@ module.exports = {
             });
         });
 
+        it('PostCSS works when enabled (ESM config)', function(done) {
+            const appDir = testSetup.createTestAppDir();
+
+            // Enable ESM so that postcss.config.js is treated as an ES module
+            fs.writeFileSync(
+                path.join(appDir, 'package.json'),
+                JSON.stringify({ private: true, type: 'module' })
+            );
+
+            fs.writeFileSync(
+                path.join(appDir, 'postcss.config.js'),
+                `
+export default {
+  plugins: {
+    'autoprefixer': {},
+  }
+}
+                `
+            );
+
+            // Force very old Safari to ensure that autoprefixer will prefix `backdrop-filter`
+            fs.writeFileSync(path.join(appDir, '.browserslistrc'), 'Safari 9');
+
+            const config = testSetup.createWebpackConfig(appDir, 'www/build', 'dev');
+            config.enableSingleRuntimeChunk();
+            config.setPublicPath('/build');
+            config.addStyleEntry('styles', ['./css/imports_autoprefixer.css']);
+            config.addStyleEntry('postcss', './css/postcss_extension.postcss');
+            config.enablePostCssLoader();
+
+            testSetup.runWebpack(config, (webpackAssert) => {
+                webpackAssert.assertOutputFileContains(
+                    'styles.css',
+                    '-webkit-backdrop-filter'
+                );
+
+                webpackAssert.assertOutputFileContains(
+                    'postcss.css',
+                    '-webkit-backdrop-filter'
+                );
+
+                done();
+            });
+        });
+
         it('less processes when enabled', function(done) {
             const config = createWebpackConfig('www/build', 'dev');
             config.setPublicPath('/build');
@@ -1174,6 +1219,46 @@ module.exports = {
             });
         });
 
+        it('Babel can be configured via babel.config.js (ESM)', function(done) {
+            const appDir = testSetup.createTestAppDir();
+
+            // Enable ESM so that babel.config.js is treated as an ES module
+            fs.writeFileSync(
+                path.join(appDir, 'package.json'),
+                JSON.stringify({ private: true, type: 'module' })
+            );
+
+            fs.writeFileSync(
+                path.join(appDir, 'babel.config.js'),
+                `
+export default {
+  presets: [
+    ["@babel/preset-env", {
+      targets: {
+        chrome: 52
+      }
+    }]
+  ]
+}
+`
+            );
+
+            const config = testSetup.createWebpackConfig(appDir, 'www/build', 'dev');
+            config.enableSingleRuntimeChunk();
+            config.setPublicPath('/build');
+            config.addEntry('main', './js/class-syntax');
+
+            testSetup.runWebpack(config, (webpackAssert) => {
+                // chrome 52 supports class, so it's not transpiled
+                webpackAssert.assertOutputFileContains(
+                    'main.js',
+                    'class A {}'
+                );
+
+                done();
+            });
+        });
+
         it('Babel can be configured via package.json browserlist', function(done) {
             const cwd = process.cwd();