pseudo class and pseudo element only selectors break scoped styles

[kagankan]

What version of astro are you using?

1.9.0

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

npm

What operating system are you using?

Windows 11

Describe the Bug

Current behavior

<a href=""></a>

<style>
  :any-link::after {
    content: "link";
  }
</style>

The style is converted to the CSS below:

:any-link:after:where(.astro-RJEN7MQD){content:"link"}

The style is not applied to the a element.

Expected behavior

:any-link:where(.astro-RJEN7MQD):after{content:"link"}
/* or */
:where(.astro-RJEN7MQD):any-link:after{content:"link"}

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-bqgpy9?file=src/pages/index.astro

Participation

• I am willing to submit a pull request for this issue.

[bluwy]

For reference, Svelte converts to something like :where(.astro-RJEN7MQD):any-link:after{content:"link"}, which I also think is the correct behaviour.

[jasikpark]

the problem here is that the scoped style class is selectively applied to elements depending on whether astro believes they will be styled, right? so if the <a> element got the class, it'd be fine

[bluwy]

The <a> element does get the class, but the generated scoped css doesn't reflect that:

:any-link::after:where(.astro-RJEN7MQD){content:"link"}

The scoped class is targetting the ::after pseudoselector instead of :any-link. And because there's no astro-RJEN7MQD attached to the pseudoselector (it can't have classes too), the style isn't applied properly.

[JakobJK]

I believe I am running into this issue as well. I cannot style images in markdown using the pseudo-classes.

[bluwy]

Closing this in favour of #794. That issue is a little newer, but it has more examples that should help us implement the proper tests for it.