Highlighting issues with grid-template

[astridlyre]

I've noticed some weird highlighting issues with the grid-template shorthand:

.grid {
  display: grid;
  grid-template:
    [header-left] "header header header" 8rem [header-right]
    [main-left]   "nav article aside"    1fr  [main-right]
    [footer-left] "footer footer footer" 8rem [footer-right]
    / 20% 60% 20%;
  min-height: 100vh;
  max-width: 100vw;
}

The grid-template shorthand makes highlighting go funky through to the rest of the block. I think perhaps it's the line names that are causing it? I don't think it likes the square brackets.

[astridlyre]

Here is a picture, for reference, to show the weird highlighting.