Build error in carousel.scss when using $color-mode-type: media-query

[vinc]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

When I add $color-mode-type: media-query; to my app with Bootstrap v5.3.0-alpha2 I get the following error:

| Error: Top-level selectors may not contain the parent selector "&".
|     ╷
| 233 │ ┌     .carousel,
| 234 │ │     &.carousel {
|     │ └───────────────^
|     ╵
|   node_modules/bootstrap/scss/_carousel.scss 233:5          @content
|   node_modules/bootstrap/scss/mixins/_color-mode.scss 12:9  color-mode()
|   node_modules/bootstrap/scss/_carousel.scss 232:3          @import
|   bootstrap/scss/bootstrap.scss 42:9                        @import
|   app/assets/stylesheets/application.bootstrap.scss 9:9     root stylesheet

This change in carousel.scss was introduced by #38209 and when I revert the change locally I can build the CSS of my app and the dark mode works.

Reduced test cases

See here: https://github.com/vinc/runa.sh/blob/558b9df43203f6744a76e8b90166dc50bdea8312/app/assets/stylesheets/application.bootstrap.scss#L7

Fix: remove line 234 of carousel.scss (but this could break what #38209 was trying to fix)

What operating system(s) are you seeing the problem on?

Linux

What browser(s) are you seeing the problem on?

Firefox

What version of Bootstrap are you using?

v5.3.0-alpha2

[julien-deramond]

Thanks for reporting this issue @vinc and sorry for the inconvenience.
We'll try to fix it asap.
I'm also suggesting via #38326 an improvement in our automatic tests to be able to check this use case and not having the same kind of issues for the next releases.