Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

CSS custom property breaks color parsing on code

Open
  • Is something wrong?
#2 5 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
38/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
css, html
Domain
tooling

Research direction

Reproduce the issue with the provided HTML and CSS snippet in the CSS TextMate grammar project, then inspect how the @property declaration is tokenized. Done means the declaration, closing style tag, and following HTML receive correct syntax highlighting without affecting later parsing.

Written by the indexing model from the issue text.

Description

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
Dominant language
JavaScript
Stars
27
Forks
25
Avg merge
2d 16h
Merged PRs (30d)
1

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from microsoft/vscode-css

All issues in microsoft/vscode-css

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.