CSS custom property breaks color parsing on code

davidaspden commented 1 year ago

Type: Bug

Include this in the body of an html document. The whole 'at property' declaration breaks the code highlighting.

<style>
        @property --angle {
            syntax: "<angle>";
            inherits: false;
            initial-value: 0deg;
        }
    </style>

The bottom style closing tag isn't the same color and further html inside the file is parsed wrong.

VS Code version: Code 1.74.3 (97dec172d3256f8ca4bfb2143f3f76b503ca0534, 2023-01-09T16:59:02.252Z) OS version: Windows_NT x64 10.0.19044 Modes: Sandboxed: No

System Info

|Item|Value| |---|---| |CPUs|Intel(R) Core(TM) i7-4710MQ CPU @ 2.50GHz (8 x 2494)| |GPU Status|2d_canvas: enabled
canvas_oop_rasterization: disabled_off
direct_rendering_display_compositor: disabled_off_ok
gpu_compositing: enabled
multiple_raster_threads: enabled_on
opengl: enabled_on
rasterization: enabled
raw_draw: disabled_off_ok
skia_renderer: enabled_on
video_decode: enabled
video_encode: enabled
vulkan: disabled_off
webgl: enabled
webgl2: enabled
webgpu: disabled_off| |Load (avg)|undefined| |Memory (System)|15.93GB (5.00GB free)| |Process Argv|--crash-reporter-id 1ca5aa89-25bb-4d9d-a1b5-6d26d638af53| |Screen Reader|no| |VM|0%|

Extensions (8)

Extension|Author (truncated)|Version ---|---|--- vscode-npm-script|eg2|0.3.29 rainbow-csv|mec|3.5.0 isort|ms-|2022.8.0 python|ms-|2022.20.2 vscode-pylance|ms-|2023.1.40 jupyter|ms-|2022.11.1003412109 vscode-jupyter-cell-tags|ms-|0.1.6 vscode-jupyter-slideshow|ms-|0.1.5

A/B Experiments

``` vsliv368cf:30146710 vsreu685:30147344 python383:30185418 vspor879:30202332 vspor708:30202333 vspor363:30204092 vstes516:30244333 vslsvsres303:30308271 pythonvspyl392:30443607 vserr242:30382549 pythontb:30283811 vsjup518:30340749 pythonptprofiler:30281270 vshan820:30294714 vstes263:30335439 pythondataviewer:30285071 vscod805cf:30301675 binariesv615:30325510 bridge0708:30335490 bridge0723:30353136 cmake_vspar411:30581797 vsaa593:30376534 pythonvs932:30410667 cppdebug:30492333 vsclangdf:30486550 c4g48928:30535728 dsvsc012:30540252 azure-dev_surveyone:30548225 pyindex848:30577860 nodejswelcome1cf:30587006 2e4cg342:30602488 89544117:30613380 a9j8j154:30646983 ```

davidaspden commented 1 year ago

Still an issue, 17 April. Tested all whitespace possibilities.

romainmenke commented 1 year ago

specification : https://drafts.css-houdini.org/css-properties-values-api/#at-property-rule
wpt : https://wpt.fyi/results/css/css-properties-values-api?label=master&label=experimental&aligned&q=property
mdn docs : https://developer.mozilla.org/en-US/docs/Web/CSS/@property
shipped in Chrome and Safari, shipping in Firefox (nightly at this time)

MrSimmmons commented 1 month ago

Just ran into this. Still occurring on most recent version

microsoft / vscode-css

CSS custom property breaks color parsing on code #2