Avoid stringifying undefined in scoped class attributes (#1014)

* Avoid stringifying `undefined` in scoped class attributes

* Add changeset

.changeset/red-crabs-cough.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/compiler': patch
+---
+
+Avoids stringifying `undefined` in scoped class attributes

internal/transform/scope-html.go

@@ -147,7 +147,7 @@ func injectScopedClass(n *astro.Node, opts TransformOptions) {
 					return
 				case astro.ExpressionAttribute:
 					// as an expression
-					attr.Val = fmt.Sprintf(`(%s) + " %s"`, attr.Val, scopedClass)
+					attr.Val = fmt.Sprintf(`((%s) ?? "") + " %s"`, attr.Val, scopedClass)
 					n.Attr[i] = attr
 					return
 				}

internal/transform/scope-html_test.go

@@ -38,17 +38,17 @@ func tests() []struct {
 		{
 			name:   "expression string",
 			source: `<div class={"test"} />`,
-			want:   `<div class={("test") + " astro-xxxxxx"}></div>`,
+			want:   `<div class={(("test") ?? "") + " astro-xxxxxx"}></div>`,
 		},
 		{
 			name:   "expression function",
 			source: `<div class={clsx({ [test]: true })} />`,
-			want:   `<div class={(clsx({ [test]: true })) + " astro-xxxxxx"}></div>`,
+			want:   `<div class={((clsx({ [test]: true })) ?? "") + " astro-xxxxxx"}></div>`,
 		},
 		{
 			name:   "expression dynamic",
 			source: "<div class={condition ? 'a' : 'b'} />",
-			want:   `<div class={(condition ? 'a' : 'b') + " astro-xxxxxx"}></div>`,
+			want:   `<div class={((condition ? 'a' : 'b') ?? "") + " astro-xxxxxx"}></div>`,
 		},
 		{
 			name:   "empty",
@@ -68,7 +68,7 @@ func tests() []struct {
 		{
 			name:   "component className expression",
 			source: `<Component className={"test"} />`,
-			want:   `<Component className={("test") + " astro-xxxxxx"}></Component>`,
+			want:   `<Component className={(("test") ?? "") + " astro-xxxxxx"}></Component>`,
 		},
 		{
 			name:   "component className shorthand",