replace custom class:list implementation with clsx

.changeset/soft-steaks-sell.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Replace custom class:list implementation with clsx package

packages/astro/package.json

@@ -99,6 +99,7 @@
     "ast-types": "^0.14.2",
     "boxen": "^6.2.1",
     "ci-info": "^3.3.1",
+    "clsx": "^1.2.1",
     "common-ancestor-path": "^1.0.1",
     "debug": "^4.3.4",
     "diff": "^5.1.0",

packages/astro/src/runtime/server/hydration.ts

@@ -1,12 +1,12 @@
+import clsx from 'clsx';
 import type {
 	AstroComponentMetadata,
 	SSRElement,
 	SSRLoadedRenderer,
-	SSRResult,
+	SSRResult
 } from '../../@types/astro';
 import { escapeHTML } from './escape.js';
 import { serializeProps } from './serialize.js';
-import { serializeListValue } from './util.js';
 
 const HydrationDirectives = ['load', 'idle', 'media', 'visible', 'only'];
 
@@ -86,7 +86,7 @@ export function extractDirectives(inputProps: Record<string | number, any>): Ext
 			}
 		} else if (key === 'class:list') {
 			// support "class" from an expression passed into a component (#782)
-			extracted.props[key.slice(0, -5)] = serializeListValue(value);
+			extracted.props[key.slice(0, -5)] = clsx(value);
 		} else {
 			extracted.props[key] = value;
 		}

packages/astro/src/runtime/server/index.ts

@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import type {
 	APIContext,
 	AstroComponentMetadata,
@@ -6,27 +7,24 @@ import type {
 	Params,
 	SSRElement,
 	SSRLoadedRenderer,
-	SSRResult,
+	SSRResult
 } from '../../@types/astro';
-
 import { escapeHTML, HTMLString, markHTMLString } from './escape.js';
 import { extractDirectives, generateHydrateScript } from './hydration.js';
 import { createResponse } from './response.js';
 import {
 	determineIfNeedsHydrationScript,
 	determinesIfNeedsDirectiveScript,
 	getPrescripts,
-	PrescriptType,
+	PrescriptType
 } from './scripts.js';
 import { serializeProps } from './serialize.js';
 import { shorthash } from './shorthash.js';
-import { serializeListValue } from './util.js';
-
 export {
 	escapeHTML,
 	HTMLString,
 	markHTMLString,
-	markHTMLString as unescapeHTML,
+	markHTMLString as unescapeHTML
 } from './escape.js';
 export type { Metadata } from './metadata';
 export { createMetadata } from './metadata.js';
@@ -545,7 +543,7 @@ Make sure to use the static attribute syntax (\`${key}={value}\`) instead of the
 
 	// support "class" from an expression passed into an element (#782)
 	if (key === 'class:list') {
-		const listValue = toAttributeString(serializeListValue(value));
+		const listValue = toAttributeString(clsx(value));
 		if (listValue === '') {
 			return '';
 		}