Preserve authored CSS specificity

[natemoo-re]

Changes

• Follow-up to Zero-specificity Scoping compiler#330, implements RFC0012
• Updated Astro's scoping approach to use :where(.astro-XXXXXX) instead of .astro-XXXXXX

- div.astro-XXXXXX {
+ div:where(.astro-XXXXXX) {
  color: red;
}

• In effect, this behavior will preserve the specificity of your selectors as authored, leading to much more stable default behavior.
• If you were relying on the specificity increase provided by the previous behavior, please update your selectors to include an additional class. This will match the old behavior.

<style>
- div {
+ div.my-class {
  color: red;
}
</style>

Testing

Using CI

Docs

Will be added to migration guide

[changeset-bot]

🦋 Changeset detected

Latest commit: ce34ed6

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 12 packages

Name	Type
astro	Patch
@e2e/astro-component	Patch
@e2e/error-react-spectrum	Patch
@e2e/error-sass	Patch
@e2e/errors	Patch
@e2e/lit-component	Patch
@e2e/preact-component	Patch
@e2e/react-component	Patch
@e2e/solid-component	Patch
@e2e/svelte-component	Patch
@e2e/e2e-tailwindcss	Patch
@e2e/ts-resolution	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[natemoo-re]

Giving myself approval to merge this once tests pass, since withastro/compiler#330 (the actual change) was approved.