CSS syntax highlighting never terminates in HTML document when using multiple nested @ rules

From @aahancoc in https://github.com/microsoft/vscode/issues/91107

Issue Type: Bug

When using multiple nested @ rules in an inline tag is encountered.

Here's a minimal test document that exhibits the buggy behaviour. (Strangely, this seems to break in GitHub's syntax highlighter as well.)

<style>
    @page {
        @bottom-center { }
        @bottom-right { font-weight: bold; }
    }
</style>

<div class="example">
    Some page div
    span {font-size: 14pt;}
</div>

The span rule in the div tag is hilighted as if it was in the style tag, and the class attribute on the div tag is not higlighted.

Removing the font-weight rule fixes the issue, as does removing @bottom-center. This also works fine, for some reason:

<style>
    @page {
        @bottom-center { }
        @bottom-right { font-weight: bold;
        }
    }
</style>

<div class="example">
    Some page div
    span {font-size: 14pt;}
</div>
...

VS Code version: Code 1.42.1 (c47d83b293181d9be64f27ff093689e8e7aed054, 2020-02-11T14:45:59.656Z) OS version: Windows_NT x64 10.0.16299

System Info

|Item|Value| |---|---| |CPUs|Intel(R) Core(TM) i7-6700 CPU @ 3.40GHz (8 x 3408)| |GPU Status|2d_canvas: enabled
flash_3d: enabled
flash_stage3d: enabled
flash_stage3d_baseline: enabled
gpu_compositing: enabled
metal: disabled_off
multiple_raster_threads: enabled_on
oop_rasterization: disabled_off
protected_video_decode: unavailable_off
rasterization: enabled
skia_renderer: disabled_off
surface_control: disabled_off
surface_synchronization: enabled_on
video_decode: enabled
viz_display_compositor: enabled_on
viz_hit_test_surface_layer: disabled_off
webgl: enabled
webgl2: enabled| |Load (avg)|undefined| |Memory (System)|15.88GB (6.02GB free)| |Process Argv|| |Screen Reader|no| |VM|0%|

Extensions: none

atom / language-css

CSS syntax highlighting never terminates in HTML document when using multiple nested @ rules #168