CSS with nested styles doesnt hightlight the nested styles correctly

[ulikoehler]

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

With CSS nested rules, the nested rules are not displayed correctly whereas the outer rule is displayed correctly. Some color themes don't show this as prominently, monokailight is one of the more extreme ones

To Reproduce

Direct playground link: https://swapoff.org/chroma/playground/#eyJsYW5ndWFnZSI6IkNTUyIsInN0eWxlIjoibW9ub2thaWxpZ2h0IiwidGV4dCI6IlxuLmtpY2FkLXNjaGVtYXRpYyB7XG4gICAgLnRvb2xiYXIge1xuICAgICAgICBidXR0b24ge1xuICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogIzMwMzRlYztcbiAgICAgICAgfVxuXG4gICAgICAgIGJ1dHRvbjpob3ZlciB7XG4gICAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiBkYXJrYmx1ZTtcbiAgICAgICAgfVxuICAgIH1cblxuICAgIC5pbWFnZS1jb250YWluZXIge1xuICAgICAgICBpbWcge1xuICAgICAgICAgICAgZGlzcGxheTogYmxvY2s7XG4gICAgICAgICAgICBtYXJnaW4tbGVmdDogYXV0bztcbiAgICAgICAgICAgIG1hcmdpbi1yaWdodDogYXV0bztcbiAgICAgICAgfVxuICAgIH1cbn0iLCJjbGFzc2VzIjpmYWxzZX0

Steps to reproduce

On the playground, enter the following CSS, select language CSS and theme monokailight

.kicad-schematic {
    .toolbar {
        button {
            background-color: #3034ec;
        }

        button:hover {
            background-color: darkblue;
        }
    }

    .image-container {
        img {
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
    }
}

Output

Expectation: That the nested rules be displayed similar to the outer rule, furthermore that matching brackets be displayed correctly.

This is not W3 standardized CSS, however it is supported by 83% of current browsers globally already: https://caniuse.com/css-nesting and many postprocessors such as PostCSS have a plugin to un-nest the code automatically. Furthermore, there is a draft for the CSS nesting module at the CSSWG, so this is expected to be standardized at some point in the near future.

https://w3c.github.io/csswg-drafts/css-nesting/

Therefore, I think even if not standardized yet, one is likely to encounter this type of nesting in the wild and it would be great if Chroma could at least not highlight it in a broken way (red-on-black).

Thank you for your support!

[jmooring]

Workaround until this is addressed... use the scss lexer. That may not be perfect, but probably better than what we have now.