CSS custom property breaks color parsing on code

[davidaspden]

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]

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

[romainmenke]

• 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]

Just ran into this. Still occurring on most recent version

[davidaspden]

27th May 2025 still a problem!

[jacobcassidy]

PR #30 should fix this.