From bb9e80fa55d5c85562368cddb5c98ee99048d931 Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Thu, 13 Jul 2023 13:21:14 +0100
Subject: [PATCH] Better explain Babel config `browsersListEnv`

---
 docs/examples/webpack/babel.config.js   | 14 ++++++++------
 packages/govuk-frontend/babel.config.js | 14 ++++++++------
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/docs/examples/webpack/babel.config.js b/docs/examples/webpack/babel.config.js
index 4e9188906a..8ffc8da586 100644
--- a/docs/examples/webpack/babel.config.js
+++ b/docs/examples/webpack/babel.config.js
@@ -4,9 +4,11 @@
  * @type {import('@babel/core').ConfigFunction}
  */
 module.exports = function (api) {
-  const browserslistEnv = !api.env('test')
-    ? 'javascripts'
-    : 'node'
+  const isBrowser = !api.env('test')
+
+  // Apply Browserslist environment for supported targets
+  // https://github.com/browserslist/browserslist#configuring-for-different-environments
+  const browserslistEnv = isBrowser ? 'javascripts' : 'node'
 
   return {
     presets: [
@@ -17,10 +19,10 @@ module.exports = function (api) {
         bugfixes: true,
 
         // Apply smaller "loose" transforms for browsers
-        loose: browserslistEnv === 'javascripts',
+        loose: isBrowser,
 
-        // Transform ES modules for Node.js
-        modules: browserslistEnv === 'node' ? 'auto' : false
+        // Skip ES module transforms for browsers
+        modules: isBrowser ? false : 'auto'
       }]
     ]
   }
diff --git a/packages/govuk-frontend/babel.config.js b/packages/govuk-frontend/babel.config.js
index 4e9188906a..8ffc8da586 100644
--- a/packages/govuk-frontend/babel.config.js
+++ b/packages/govuk-frontend/babel.config.js
@@ -4,9 +4,11 @@
  * @type {import('@babel/core').ConfigFunction}
  */
 module.exports = function (api) {
-  const browserslistEnv = !api.env('test')
-    ? 'javascripts'
-    : 'node'
+  const isBrowser = !api.env('test')
+
+  // Apply Browserslist environment for supported targets
+  // https://github.com/browserslist/browserslist#configuring-for-different-environments
+  const browserslistEnv = isBrowser ? 'javascripts' : 'node'
 
   return {
     presets: [
@@ -17,10 +19,10 @@ module.exports = function (api) {
         bugfixes: true,
 
         // Apply smaller "loose" transforms for browsers
-        loose: browserslistEnv === 'javascripts',
+        loose: isBrowser,
 
-        // Transform ES modules for Node.js
-        modules: browserslistEnv === 'node' ? 'auto' : false
+        // Skip ES module transforms for browsers
+        modules: isBrowser ? false : 'auto'
       }]
     ]
   }