Invalid &:only-child selector in compiled Swiper CSS

[Simonyellowpeach]

Check that this is really a bug

• I confirm

Reproduction link

https://codesandbox.io/p/sandbox/gp743r?file=/index.html

Bug description

The Swiper CSS contains invalid SCSS-style &:only-child selectors, When compiled as-is, it ends up targeting the root element (or nothing) in the browser.

Expected Behavior

No response

Actual Behavior

The output CSS contains invalid SCSS-style selectors (&:only-child), which the browser ignores, and targeting the html element with a display: none;

Swiper version

12

Platform/Target and Browser Versions

MacOS, Chrome 141.0.7390.108

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

• I'm willing to open a PR

[cbieser]

In Commit 118ec66, the files were renamed to CSS, but their content remained LESS. For example, & references are still present.
pagination.css for example:

.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 300ms opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10;
  &.swiper-pagination-hidden {
    opacity: 0;
  }
  .swiper-pagination-disabled > &,
  &.swiper-pagination-disabled {
    display: none !important;
  }
}