Incorrect implementation of prefixCssSelectors

[a-ignatov-parc]

The current implementation of prefixCssSelectors (ref) doesn't properly handle prefixing css rules in media queries, which results in broken layouts during the initial render until the hydration is finished and styles are re-rendered with JS.

Here's an example of how the current implementation handles media queries

html:not([data-theme='dark']) .jdZmzL {
    z-index: 1;
    position: relative;
    overflow: hidden;
    width: calc(100% - 300px);
    contain: layout;
}

@media print,html:not([data-theme='dark']) screen and (max-width: 50rem) {
    .jdZmzL {
        width:100%;
    }
}

The issue is that the jdZmzL class in the media query has a lower specificity than the initial one, which results in ignoring its styles.

The correct result would be as follows

html:not([data-theme='dark']) .jdZmzL {
    z-index: 1;
    position: relative;
    overflow: hidden;
    width: calc(100% - 300px);
    contain: layout;
}

@media print, screen and (max-width: 50rem) {
    html:not([data-theme='dark']) .jdZmzL {
        width:100%;
    }
}

[rohit-gohri]

Thanks for figuring this out, maybe this finally fixes #215

Would be great if you can open a PR too

[a-ignatov-parc]

Would be great if you can open a PR too

@rohit-gohri, I've discussed this task with my team, and we've agreed to provide a fix either later this week or early next week. Will keep you posted 👍

[rohit-gohri]

Released as https://github.com/rohit-gohri/redocusaurus/releases/tag/v2.1.2

[a-ignatov-parc]

@rohit-gohri, nice! Thank you 👍