Fix preferredLocaleList dropping object-form locale codes that differ in case

.changeset/dark-bobcats-do.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fixes `Astro.preferredLocaleList` returning an empty list when a locale is configured with the object form (`{ path, codes }`) and the browser sends the code with different casing or an underscore, such as `en-US` matching a configured `en-us`

packages/astro/src/i18n/utils.ts

@@ -131,7 +131,7 @@ export function computePreferredLocaleList(request: Request, locales: Locales):
 						}
 					} else {
 						for (const code of loopLocale.codes) {
-							if (code === browserLocale.locale) {
+							if (normalizeTheLocale(code) === normalizeTheLocale(browserLocale.locale)) {
 								result.push(code);
 							}
 						}

packages/astro/test/units/i18n/i18n-utils.test.ts

@@ -123,6 +123,56 @@ describe('computePreferredLocaleList', () => {
 		});
 		assert.deepEqual(computePreferredLocaleList(req, locales), []);
 	});
+
+	it('matches string locales case-insensitively', () => {
+		const req = new Request('http://example.com/', {
+			headers: { 'Accept-Language': 'EN' },
+		});
+		assert.deepEqual(computePreferredLocaleList(req, locales), ['en']);
+	});
+
+	it('matches object-form codes case-insensitively', () => {
+		const localesObject: Locales = [{ path: 'english', codes: ['en-us'] }, 'fr'];
+		const req = new Request('http://example.com/', {
+			headers: { 'Accept-Language': 'en-US' },
+		});
+		assert.deepEqual(computePreferredLocaleList(req, localesObject), ['en-us']);
+	});
+
+	it('matches object-form codes written with an underscore separator', () => {
+		const localesUnderscore: Locales = [{ path: 'english', codes: ['en_US'] }, 'fr'];
+		const req = new Request('http://example.com/', {
+			headers: { 'Accept-Language': 'en-US' },
+		});
+		assert.deepEqual(computePreferredLocaleList(req, localesUnderscore), ['en_US']);
+	});
+
+	it('returns the configured casing of an object-form code', () => {
+		const localesExact: Locales = [{ path: 'english', codes: ['en-US'] }, 'fr'];
+		const req = new Request('http://example.com/', {
+			headers: { 'Accept-Language': 'en-US' },
+		});
+		assert.deepEqual(computePreferredLocaleList(req, localesExact), ['en-US']);
+	});
+
+	it('sorts object-form matches by quality value', () => {
+		const localesMulti: Locales = [
+			{ path: 'english', codes: ['en-us'] },
+			{ path: 'french', codes: ['fr-fr'] },
+		];
+		const req = new Request('http://example.com/', {
+			headers: { 'Accept-Language': 'fr-FR;q=0.9,en-US;q=1.0' },
+		});
+		assert.deepEqual(computePreferredLocaleList(req, localesMulti), ['en-us', 'fr-fr']);
+	});
+
+	it('returns every configured code for a wildcard header', () => {
+		const localesObject: Locales = [{ path: 'english', codes: ['en-us'] }, 'fr'];
+		const req = new Request('http://example.com/', {
+			headers: { 'Accept-Language': '*' },
+		});
+		assert.deepEqual(computePreferredLocaleList(req, localesObject), ['en-us', 'fr']);
+	});
 });
 
 describe('getPathByLocale', () => {