CSS3
CSS3 copied to clipboard
Bug: Highlighting breaks after nesting more than 2 levels of parentheses
The syntax highlighting breaks if any calculations are nested within more than 2 sets of parentheses. A minimal reproducible example can be produced like this:
.foo {
--foo: calc(((1)));
}
In case you'd like some more examples to add to unit tests, here are some real world cases that I've come across in my current project:
--breakpoint: calc(
var(--min-column-size) * var(--column-count) + (var(--gap) * (var(--column-count) - 1))
);
flex-basis: calc(((var(--_main-min-width) - (100% - var(--_sidebar-size) - var(--_gap))) * 9999));