Monaco Editor disliking valid "modern" CSS

Core Development Feature Requests
1

Hi, would it be possible in the next release to batter Monaco over the head a bit so that it recognises slightly newer CSS?

At the moment, it certainly does not like nested selectors which are valid in all mainstream browsers since late 2023.

Example:

ul#shoplist { /* ul with id of shoplist */
    padding-left: 0;
    cursor: pointer;

    & li {
        /* Turn off normal list entry icons so we can control them */
        list-style-type: none;
        /* top/bottom, left/right - add padding so easier for user to touch on a phone */
        padding: 0.5em 0;
        border-top: 3px solid var(--surface2);
    }

    & li.success { /* list entry with class of success */
        font-weight: bold;
    }

    /* Manually add a list entry icon so we can resize it - this is the default (not selected) version  */
    & li::before {
        content: "✖️";
        font-size: 2rem;
        vertical-align: middle;
        /* line-height: 20px; */
        padding-right: 0.5em;
    }

    /* this is the selected version */
    & li.success::before {
        content: "âś…";
    }
}
2

Support for nested CSS was added ~mid 2024 in Monaco 0.50.0

You can see a demo of your CSS in monaco here

Monaco 0.52.0 was compiled and a PR was raised and has already been merged into the dev branch back in Nov 2024

TBF, that was my fault as I targeted the dev branch (I should probably have targeted the main branch to get it into 4.0.9) so it will be in 4.1.0 or 5.0.0 whichever comes first.

1 Like
3

Thanks Steve, looking forward to it. I've only just started playing with the new features of CSS because I try to mostly target feature sets from early 2019 so that repurposed earlier iPads and iPhones still work. But now that I've discovered LightningCSS, that is much less of an issue as it will convert newer features. But I have to say that nested selectors are a massive game changer.