Fix nested pre/code styles with TypographyStylesProvider

[dasveloper]

What package has an issue

@mantine/core

Describe the bug

When converting Markdown to HTML code blocks like this:

```
{
"firstName": "John",
"lastName": "Smith",
"age": 25
}
```

is converted to nested pre/code tags like this:

<pre>
  <code> 
    {
      "firstName": "John",
      "lastName": "Smith",
      "age": 25
    }
  </code>
</pre>

When that HTML is wrapped in a TypographyStylesProvider, inline code styles are applied to the code tags and then block code styles are applied to the pre tags, creating a broken looking nested styling like this:

Instead, any code tags wrapped in a pre tag should not have the inline styles applied.

What version of @mantine/hooks page do you have in package.json?

none

If possible, please include a link to a codesandbox with the reproduced problem

No response

Do you know how to fix the issue

No

Are you willing to participate in fixing this issue and create a pull request with the fix

No response

Possible fix

Issue is coming from here where code and pre are styled indepenently:

mantine/src/mantine-core/src/TypographyStylesProvider/TypographyStylesProvider.styles.ts

Line 92 in c7d080c

'& code': {

Possibly use CSS not selector to target code that isn't direct descendant of pre:
https://stackoverflow.com/questions/23853931/how-can-i-style-code-only-if-its-parent-is-not-pre

[rtivital]

Fixed in 5.2.4