diff --git a/.changeset/neat-suns-search.md b/.changeset/neat-suns-search.md new file mode 100644 index 000000000000..da743c9c750e --- /dev/null +++ b/.changeset/neat-suns-search.md @@ -0,0 +1,17 @@ +--- +'astro': major +--- + +Implements a new scope style strategy called `"attribute"`. When enabled, styles are applied using `data-*` attributes. + +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: 'where', +}); +``` diff --git a/packages/astro/package.json b/packages/astro/package.json index 0e1f5700d20f..8e505e8b0991 100644 --- a/packages/astro/package.json +++ b/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:*", diff --git a/packages/astro/src/@types/astro.ts b/packages/astro/src/@types/astro.ts index 4c51a7eaf663..2cba086f5485 100644 --- a/packages/astro/src/@types/astro.ts +++ b/packages/astro/src/@types/astro.ts @@ -20,9 +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'; + export type { MarkdownHeading, MarkdownMetadata, @@ -609,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 diff --git a/packages/astro/src/core/config/schema.ts b/packages/astro/src/core/config/schema.ts index 282f7844e03d..417f918bb6b8 100644 --- a/packages/astro/src/core/config/schema.ts +++ b/packages/astro/src/core/config/schema.ts @@ -87,9 +87,9 @@ export const AstroConfigSchema = z.object({ .optional() .default('static'), scopedStyleStrategy: z - .union([z.literal('where'), z.literal('class')]) + .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 diff --git a/packages/astro/test/0-css.test.js b/packages/astro/test/0-css.test.js index 76bfba296f3c..9a05074fb906 100644 --- a/packages/astro/test/0-css.test.js +++ b/packages/astro/test/0-css.test.js @@ -39,15 +39,27 @@ describe('CSS', function () { it('HTML and CSS scoped correctly', async () => { const el1 = $('#dynamic-class'); const el2 = $('#dynamic-vis'); - const classes = $('#class').attr('class').split(' '); - const scopedClass = classes.find((name) => /^astro-[A-Za-z0-9-]+/.test(name)); + const classes = $('#class'); + let scopedAttribute; + for (const [key] of Object.entries(classes[0].attribs)) { + if (/^data-astro-cid-[A-Za-z0-9-]+/.test(key)) { + // Ema: this is ugly, but for reasons that I don't want to explore, cheerio + // lower case the hash of the attribute + scopedAttribute = key + .toUpperCase() + .replace('data-astro-cid-'.toUpperCase(), 'data-astro-cid-'); + } + } + if (!scopedAttribute) { + throw new Error("Couldn't find scoped attribute"); + } // 1. check HTML - expect(el1.attr('class')).to.equal(`blue ${scopedClass}`); - expect(el2.attr('class')).to.equal(`visible ${scopedClass}`); + expect(el1.attr('class')).to.equal(`blue`); + expect(el2.attr('class')).to.equal(`visible`); // 2. check CSS - const expected = `.blue:where(.${scopedClass}){color:#b0e0e6}.color\\:blue:where(.${scopedClass}){color:#b0e0e6}.visible:where(.${scopedClass}){display:block}`; + const expected = `.blue[${scopedAttribute}],.color\\:blue[${scopedAttribute}]{color:#b0e0e6}.visible[${scopedAttribute}]{display:block}`; expect(bundledCSS).to.include(expected); }); @@ -60,8 +72,12 @@ describe('CSS', function () { expect($('#no-scope').attr('class')).to.equal(undefined); }); - it('Child inheritance', async () => { - expect($('#passed-in').attr('class')).to.match(/outer astro-[A-Z0-9]+ astro-[A-Z0-9]+/); + it('Child inheritance', (done) => { + for (const [key] of Object.entries($('#passed-in')[0].attribs)) { + if (/^data-astro-cid-[A-Za-z0-9-]+/.test(key)) { + done(); + } + } }); it('Using hydrated components adds astro-island styles', async () => { @@ -70,11 +86,11 @@ describe('CSS', function () { }); it('