test: update tests

internal/transform/scope-html_test.go

@@ -17,57 +17,52 @@ func TestScopeHTML(t *testing.T) {
 		{
 			name:   "none",
 			source: "<div />",
-			want:   `<div class="astro-XXXXXX"></div>`,
+			want:   `<div data-astro-scope="XXXXXX"></div>`,
 		},
 		{
 			name:   "quoted",
 			source: `<div class="test" />`,
-			want:   `<div class="test astro-XXXXXX"></div>`,
+			want:   `<div class="test" data-astro-scope="XXXXXX"></div>`,
 		},
 		{
 			name:   "quoted no trim",
-			source: `<div class="test " />`,
-			want:   `<div class="test  astro-XXXXXX"></div>`,
+			source: `<div data-astro-scope="test " />`,
+			want:   `<div data-astro-scope="test  XXXXXX"></div>`,
 		},
 		{
 			name:   "expression string",
-			source: `<div class={"test"} />`,
-			want:   `<div class={("test") + " astro-XXXXXX"}></div>`,
+			source: `<div data-astro-scope={"test"} />`,
+			want:   `<div data-astro-scope={("test") + " XXXXXX"}></div>`,
 		},
 		{
 			name:   "expression function",
-			source: `<div class={clsx({ [test]: true })} />`,
-			want:   `<div class={(clsx({ [test]: true })) + " astro-XXXXXX"}></div>`,
+			source: `<div data-astro-scope={clsx({ [test]: true })} />`,
+			want:   `<div data-astro-scope={(clsx({ [test]: true })) + " XXXXXX"}></div>`,
 		},
 		{
 			name:   "expression dynamic",
-			source: "<div class={condition ? 'a' : 'b'} />",
-			want:   `<div class={(condition ? 'a' : 'b') + " astro-XXXXXX"}></div>`,
+			source: "<div data-astro-scope={condition ? 'a' : 'b'} />",
+			want:   `<div data-astro-scope={(condition ? 'a' : 'b') + " XXXXXX"}></div>`,
 		},
 		{
 			name:   "empty",
-			source: "<div class />",
-			want:   `<div class="astro-XXXXXX"></div>`,
+			source: "<div data-astro-scope />",
+			want:   `<div data-astro-scope="XXXXXX"></div>`,
 		},
 		{
 			name:   "template literal",
-			source: "<div class=`${value}` />",
-			want:   "<div class=`${value} astro-XXXXXX`></div>",
+			source: "<div data-astro-scope=`${value}` />",
+			want:   "<div data-astro-scope=`${value} XXXXXX`></div>",
 		},
 		{
 			name:   "component className not scoped",
-			source: `<Component className="test" />`,
-			want:   `<Component className="test astro-XXXXXX"></Component>`,
+			source: `<Component data-astro-scope="test" />`,
+			want:   `<Component data-astro-scope="test XXXXXX"></Component>`,
 		},
 		{
 			name:   "component className expression",
-			source: `<Component className={"test"} />`,
-			want:   `<Component className={("test") + " astro-XXXXXX"}></Component>`,
-		},
-		{
-			name:   "component className shorthand",
-			source: "<Component {className} />",
-			want:   `<Component className={className + " astro-XXXXXX"}></Component>`,
+			source: `<Component data-astro-scope={"test"} />`,
+			want:   `<Component data-astro-scope={("test") + " XXXXXX"}></Component>`,
 		},
 	}
 	for _, tt := range tests {

internal/transform/transform_test.go

@@ -19,7 +19,7 @@ func TestTransformScoping(t *testing.T) {
 				<style>div { color: red }</style>
 				<div />
 			`,
-			want: `<div class="astro-XXXXXX"></div>`,
+			want: `<div data-astro-scope="XXXXXX"></div>`,
 		},
 		{
 			name: "global empty",
@@ -60,7 +60,7 @@ func TestTransformScoping(t *testing.T) {
 				<style>div { color: green }</style>
 				<div />
 			`,
-			want: `<div class="astro-XXXXXX"></div>`,
+			want: `<div data-astro-scope="XXXXXX"></div>`,
 		},
 		{
 			name: "global multiple",
@@ -78,7 +78,7 @@ func TestTransformScoping(t *testing.T) {
 				<style is:global>div { color: green }</style>
 				<div />
 			`,
-			want: `<div class="astro-XXXXXX"></div>`,
+			want: `<div data-astro-scope="XXXXXX"></div>`,
 		},
 		{
 			name: "multiple scoped :global",
@@ -87,7 +87,7 @@ func TestTransformScoping(t *testing.T) {
 				<style>:global(test-1) {}</style>
 				<div />
 			`,
-			want: `<div class="astro-XXXXXX"></div>`,
+			want: `<div data-astro-scope="XXXXXX"></div>`,
 		},
 		{
 			name: "inline does not scope",