Skip to content

🐛 BUG: [REGRESSION] Scoped CSS wrongly generated since [email protected] #1128

@mr-wildcard

Description

@mr-wildcard

What version of @astrojs/compiler are you using?

2.12.3

What package manager are you using?

pnpm

What operating system are you using?

Mac

Describe the Bug

Hello,

I have a website using Astro 5.15.5 and I'm unable to upgrade it to 5.15.9 because the CSS generated in the production build contains invalid selectors.
I believe that this issue is in Astro since version 5.15.6, the one who comes with the @astrojs/compiler bump to 2.12.3.

Working version ✅ [email protected] Broken version 💥 [email protected]
Link Link
Image Image

The working version is using a correct CSS selector:

div[data-astro-cid-daii5eay] .curve:last-of-type {
    transform: scaleY(-1)
}

But the broken version uses an invalid selector:

div[data-astro-cid-daii5eay] .curve[data-astro-cid-daii5eay]:last-of-type {
    transform: scaleY(-1)
}

How to reproduce:

$ git clone [email protected]:mr-wildcard/team-ux.com.git
$ corepack use
$ pnpm i
$ pnpm why @astrojs/compiler // should output 2.12.3
$ pnpm build && pnpm preview 

and open http://localhost:4322/nos-deux-profils : you should see the working version ✅

To reproduce the bug, bump astro to 5.15.6:

$ pnpm i [email protected]
$ pnpm build && pnpm preview 

and open http://localhost:4322/nos-deux-profils : you should see the broken version ❌

Now to fix it while keeping [email protected] we need @astrojs/compiler version to remain at 2.12.2:

Create pnpm-workspace.yaml file at the root of the project with the following content:

overrides:
  "@astrojs/compiler": "2.12.2"

Then run:

$ git checkout pnpm-lock.yaml // reset dependencies resolution
$ rm -rf node_modules
$ pnpm i
$ pnpm build && pnpm preview 

and open http://localhost:4322/nos-deux-profils : you should see the working version again ✅

I'm no Golang expert but reading the latest release changelog, it seems that the following change might be the root cause? 🤷

Patch Changes
1264286: Fixes a CSS scoping issue when a selector contains only pseudo selectors.

Link to Minimal Reproducible Example

https://7e2a0fae.team-ux-com.pages.dev/nos-deux-profils/

Metadata

Metadata

Assignees

No one assigned

    Labels

    needs triageIssue needs to be triaged

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions