Align the browser-support floor with classroom and ml-trainer

Raises Safari/iOS from 14/14 to 14.1/14.5, which is a correctness fix rather
than a tidy-up: flexbox `gap` landed in exactly those two versions, and this
app's layout is built on the Panda stack patterns, which are gap-based. The
built CSS has 18 gap declarations against 24 display:flex, so on Safari 14.0 or
iOS 14.0–14.4 that spacing collapses to zero — nothing can polyfill it. The
floor claimed support the layout could not honour, and no device is stranded
there anyway: Safari 14.1 shipped for the same macOS range as 14.0, and every
iOS 14.0 device can reach 14.5.

Chrome/Edge come down from 98 to 90 to match the other two apps. The 98 was not
load-bearing: it arrived wholesale in the CRA→Vite switch (4425d16), replacing
CRA's usage-share default, with no stated reason, and Chrome 98 predates that
commit by two years. Nothing in src uses a Chrome 91–98 era API — no
structuredClone, .at(), findLast, Object.hasOwn or error.cause; the only modern
method is replaceAll, which is Chrome 85. The device-connection code lives in a
dependency and feature-detects, so it was never governed by this floor.

The two lists also disagreed with each other, which is what let them drift:
browserslist entries are OR'd, so with no explicit Firefox entry `defaults`
supplied Firefox 140 while the build targeted firefox104, and the Vite switch
had dropped CRA's `not op_mini all` / `not ie >0`, leaving Opera Mini and KaiOS
in the resolved set. There is now one BUILD_TARGETS const mirrored into
build.target and build.cssTarget, with browserslist as documentation pointing at
it — the same shape as the other two apps.

Deliberately not aligned: cssMinify stays esbuild rather than lightningcss.
That is a rendering change, not a support declaration — lightningcss rewrites
logical border-radius longhands into fragile :lang()-based physical rules — and
this app's PostCSS chain is documented around the current choice.

Verified: typecheck, lint, production build, and the production CSS still has
its logical shorthands expanded (421 longhands, no var()-bearing shorthands),
its layers flattened, and its 18 gap rules intact.

Author: microbit-matt-hillsdon

package.json

@@ -114,19 +114,13 @@
     "typecheck": "tsc --noEmit",
     "typecheck:watch": "tsc --noEmit --watch"
   },
-  "browserslist": {
-    "production": [
-      "defaults",
-      "Chrome >= 98",
-      "Edge >= 98",
-      "ChromeAndroid >= 95",
-      "Safari >= 14",
-      "iOS >= 14"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
+  "//browserslist": "Keep in sync with BUILD_TARGETS in vite.config.ts, which is what the build actually uses.",
+  "browserslist": [
+    "safari >= 14.1",
+    "ios_saf >= 14.5",
+    "chrome >= 90",
+    "edge >= 90",
+    "firefox >= 88",
+    "not dead"
+  ]
 }

postcss.config.cjs

@@ -6,12 +6,11 @@
  * PostCSS runs because vite.config.ts keeps Vite's default CSS transformer
  * (not lightningcss, which would disable PostCSS).
  *
- * This app targets Safari/iOS 14 (see package.json "browserslist"), below the
- * 15.4 floor where Panda's output works natively, so two TEMPORARY downleveling
- * plugins run in PRODUCTION builds only (dev browsers are modern, and the
- * flattened @layer output makes devtools tracing painful). Drop both — and
- * raise the vite.config.ts build target — once support rises past those
- * browsers.
+ * This app targets Safari 14.1 / iOS 14.5 (BUILD_TARGETS in vite.config.ts),
+ * below the 15.4 floor where Panda's output works natively, so two TEMPORARY
+ * downleveling plugins run in PRODUCTION builds only (dev browsers are modern,
+ * and the flattened @layer output makes devtools tracing painful). Drop both —
+ * and raise BUILD_TARGETS — once support rises past those browsers.
  *
  * 1. expandLogicalShorthands (@microbit/ui/postcss-legacy-safari) — Safari 14.x
  *    silently drops logical *shorthands* whose value contains var()

vite.config.ts

@@ -12,6 +12,23 @@ import { VitePWA } from "vite-plugin-pwa";
 import svgr from "vite-plugin-svgr";
 import { configDefaults, defineConfig, UserConfig } from "vitest/config";
 
+// Browser-support floor (esbuild/lightningcss target syntax) for JS
+// (build.target) and CSS (build.cssTarget). Keep in sync with the
+// "browserslist" field in package.json, which is documentation — this is what
+// the build actually uses.
+//
+// safari14.1/ios14.5 rather than 14/14 is deliberate: flexbox `gap` landed in
+// exactly those versions, and the Panda stack patterns this app is built on
+// depend on it. See postcss.config.cjs for the two Safari <15.4 fixes that go
+// with this floor.
+const BUILD_TARGETS = [
+  "chrome90",
+  "edge90",
+  "firefox88",
+  "safari14.1",
+  "ios14.5",
+];
+
 // Support optionally pulling in external branding if the module is installed.
 const theme = "@microbit-foundation/python-editor-v3-microbit";
 const external = `node_modules/${theme}`;
@@ -88,7 +105,8 @@ export default defineConfig(({ mode }) => {
     build: {
       outDir: "build",
       sourcemap: true,
-      target: ["chrome98", "edge98", "safari14", "ios14", "firefox104"],
+      target: BUILD_TARGETS,
+      cssTarget: BUILD_TARGETS,
     },
     server: {
       port: 3000,