CSS :where Selector in Mantine 7.6.0 causing specificity conflict with Styles API

[Stuj1]

Dependencies check up

• I have verified that I use latest version of all @mantine/* packages

What version of @mantine/* packages do you have in package.json?

7.6.2

What package has an issue?

@mantine/core

What framework do you use?

Next.js

In which browsers you can reproduce the issue?

All

Describe the bug

Hello 👋🏻

Issue:
The usage of the :where pseudo-class selectors introduced in 7.6.0 has inadvertently resulted in a specificity conflict with styles defined using the Styles API. As a result, styles defined with the Styles API can be overridden by the underlying Mantine component styles.

This only applies if classes defined in CSS modules are at the root level of the file, which is valid in CSS modules.
Nesting classes in a top level class increases specificity and resolves the issue, but could require extensive code changes for users.

Context:
The release notes for Mantine 7.6.0 mentioned that these changes should not impact the usage of Mantine components. However, this seems to contradict that statement.

Example:
This example shows the Carousel component using Styles API for indicators.

Indicator styles are not applied.
Previous versions of Mantine (e.g. 7.5.x) does not display the issue.

You can see the rules being overridden in dev tools:

Expected behavior:
I would expect that styles defined using the Styles API would override the underlying Mantine component styles.

Actual behavior:
Styles defined using Styles API are overridden by Mantine component styles:

If possible, include a link to a codesandbox with a minimal reproduction

https://codesandbox.io/p/sandbox/mantine-7-6-specificity-issue-retro-drygyy?file=%2Fsrc%2Fcarousel.module.css%3A11%2C16

Possible fix

Suggested Resolution:
To address this issue, it's recommended to either adjust the specificity of the :where selectors to avoid conflicts with styles defined using the Styles API, or provide a workaround for users to apply their styles effectively.

Workarounds:
As this is a specificity conflict it is possible to get around the issue by increasing the specificity of classes used by Styles API.
This can be done with the selector hack && { } but it could also be done by nesting classes in a root class within components.

e.g.

.carousel {
  .slide {
    ...
  }

  .indicators {
    ...
  }
}

At the moment the components experiencing issues have a flat css module structure:

.carousel {
  ...
}

.slide {
  ...
}

.indicators {
  ...
}

This would require users to potentially rewrite their code however.

Self-service

• I would be willing to implement a fix for this issue

[rtivital]

Fixed in 7.1.1