feat: attribute scope style strategy

.changeset/neat-suns-search.md

@@ -0,0 +1,13 @@
+---
+'astro': minor
+---
+
+Implements a new scope style strategy called `attribute`. When enabled, styles are applied using `data-*` attributes.
+
+```js
+import { defineConfig } from 'astro/config';
+
+export default defineConfig({
+    scopedStyleStrategy: 'attribute',
+});
+```

packages/astro/test/scoped-style-strategy.test.js

@@ -57,4 +57,36 @@ describe('scopedStyleStrategy', () => {
 			expect(stylesheet).to.match(/h1\.astro/);
 		});
 	});
+
+	describe('scopedStyleStrategy: "attribute"', () => {
+		/** @type {import('./test-utils').Fixture} */
+		let fixture;
+		let stylesheet;
+
+		before(async () => {
+			fixture = await loadFixture({
+				root: './fixtures/scoped-style-strategy/',
+				scopedStyleStrategy: 'attribute',
+			});
+			await fixture.build();
+
+			const html = await fixture.readFile('/index.html');
+			const $ = cheerio.load(html);
+			const $link = $('link[rel=stylesheet]');
+			const href = $link.attr('href');
+			stylesheet = await fixture.readFile(href);
+		});
+
+		it('does not include :where pseudo-selector', () => {
+			expect(stylesheet).to.not.match(/:where/);
+		});
+
+		it('does not include the class name directly in the selector', () => {
+			expect(stylesheet).to.not.match(/h1\.astro/);
+		});
+
+		it('includes the data attribute hash', () => {
+			expect(stylesheet).to.include('h1[data-astro-hash-');
+		});
+	});
 });