feat: new default

.changeset/neat-suns-search.md

@@ -1,13 +1,17 @@
 ---
-'astro': minor
+'astro': major
 ---
 
-Implements a new scope style strategy called `attribute`. When enabled, styles are applied using `data-*` attributes.
+Implements a new scope style strategy called `"attribute"`. When enabled, styles are applied using `data-*` attributes.
 
-```js
+The **default** value of `scopedStyleStrategy` is `"attribute"`.
+
+If you want to use the previous behaviour, you have to use the `"where"` option:
+
+```diff
 import { defineConfig } from 'astro/config';
 
 export default defineConfig({
-    scopedStyleStrategy: 'attribute',
++    scopedStyleStrategy: 'where',
 });
 ```

packages/astro/package.json

@@ -116,7 +116,7 @@
     "test:e2e:match": "playwright test -g"
   },
   "dependencies": {
-    "@astrojs/compiler": "^1.8.0",
+    "@astrojs/compiler": "^1.8.1",
     "@astrojs/internal-helpers": "workspace:*",
     "@astrojs/markdown-remark": "workspace:*",
     "@astrojs/telemetry": "workspace:*",

packages/astro/src/@types/astro.ts

@@ -20,10 +20,10 @@ import type { AstroConfigSchema } from '../core/config';
 import type { AstroTimer } from '../core/config/timer';
 import type { AstroCookies } from '../core/cookies';
 import type { LogOptions, LoggerLevel } from '../core/logger/core';
-import { AstroIntegrationLogger } from '../core/logger/core';
+import type { AstroIntegrationLogger } from '../core/logger/core';
 import type { AstroComponentFactory, AstroComponentInstance } from '../runtime/server';
 import type { SUPPORTED_MARKDOWN_FILE_EXTENSIONS } from './../core/constants.js';
-import { AstroIntegrationLogger } from '../core/logger/core';
+
 export type {
 	MarkdownHeading,
 	MarkdownMetadata,
@@ -610,19 +610,21 @@ export interface AstroUserConfig {
 	/**
 	 * @docs
 	 * @name scopedStyleStrategy
-	 * @type {('where' | 'class')}
+	 * @type {('where' | 'class' \ 'attribute')}
 	 * @default `'where'`
 	 * @version 2.4
 	 * @description
 	 *
 	 * Specify the strategy used for scoping styles within Astro components. Choose from:
-	 *   - `'where'` - Use `:where` selectors, causing no specifity increase.
-	 *   - `'class'` - Use class-based selectors, causing a +1 specifity increase.
+	 *   - `'where'` 		- Use `:where` selectors, causing no specifity increase.
+	 *   - `'class'` 		- Use class-based selectors, causing a +1 specifity increase.
+	 *   - `'attribute'` 	- Use `data-` attributes, causing no specifity increase.
 	 *
 	 * Using `'class'` is helpful when you want to ensure that element selectors within an Astro component override global style defaults (e.g. from a global stylesheet).
 	 * Using `'where'` gives you more control over specifity, but requires that you use higher-specifity selectors, layers, and other tools to control which selectors are applied.
+	 * Using `'attribute'` is useful in case there's manipulation of the class attributes, so the styling emitted by Astro doesn't go in conflict with the user's business logic.
 	 */
-	scopedStyleStrategy?: 'where' | 'class';
+	scopedStyleStrategy?: 'where' | 'class' | 'attribute';
 
 	/**
 	 * @docs

packages/astro/src/core/config/schema.ts

@@ -89,7 +89,7 @@ export const AstroConfigSchema = z.object({
 	scopedStyleStrategy: z
 		.union([z.literal('where'), z.literal('class'), z.literal('attribute')])
 		.optional()
-		.default('where'),
+		.default('attribute'),
 	adapter: z.object({ name: z.string(), hooks: z.object({}).passthrough().default({}) }).optional(),
 	integrations: z.preprocess(
 		// preprocess

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

@@ -3,14 +3,15 @@ import * as cheerio from 'cheerio';
 import { loadFixture } from './test-utils.js';
 
 describe('scopedStyleStrategy', () => {
-	describe('default', () => {
+	describe('scopedStyleStrategy: "where"', () => {
 		/** @type {import('./test-utils').Fixture} */
 		let fixture;
 		let stylesheet;
 
 		before(async () => {
 			fixture = await loadFixture({
 				root: './fixtures/scoped-style-strategy/',
+				scopedStyleStrategy: 'where',
 			});
 			await fixture.build();
 
@@ -58,15 +59,14 @@ describe('scopedStyleStrategy', () => {
 		});
 	});
 
-	describe('scopedStyleStrategy: "attribute"', () => {
+	describe('default', () => {
 		/** @type {import('./test-utils').Fixture} */
 		let fixture;
 		let stylesheet;
 
 		before(async () => {
 			fixture = await loadFixture({
 				root: './fixtures/scoped-style-strategy/',
-				scopedStyleStrategy: 'attribute',
 			});
 			await fixture.build();
 
@@ -86,7 +86,7 @@ describe('scopedStyleStrategy', () => {
 		});
 
 		it('includes the data attribute hash', () => {
-			expect(stylesheet).to.include('h1[data-astro-hash-');
+			expect(stylesheet).to.include('h1[data-astro-cid-');
 		});
 	});
 });