[css] new at-rules such as @property are not yet recognized

[C-Ezra-M]

Type: Bug

1. Copy-paste the following snippet to a CSS stylesheet (this example is taken from MDN):

@property --my-color {
  syntax: '<color>';
  inherits: false;
  initial-value: #c0ffee;
}

Expected: VSCode won't see @property as an unknown at-rule.
Actual: VSCode sees @property as an unknown at-rule.

VS Code version: Code 1.70.0 (da76f93, 2022-08-04T04:38:16.462Z)
OS version: Windows_NT x64 10.0.22000
Modes:

System Info

Item	Value
CPUs	Intel(R) Core(TM) i5-10300H CPU @ 2.50GHz (8 x 2496)
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
Load (avg)	undefined
Memory (System)	7.84GB (0.45GB free)
Process Argv	--crash-reporter-id 57c06a69-98ac-4fc4-8225-c3db59f39ccc
Screen Reader	no
VM	0%

Extensions (13)

Extension	Author (truncated)	Version
vscode-intelephense-client	bme	1.8.2
better-toml	bun	0.3.2
vscode-eslint	dba	2.2.6
rainbow-csv	mec	2.4.0
vscode-language-pack-pl	MS-	1.70.8030912
python	ms-	2022.12.0
vscode-pylance	ms-	2022.8.10
jupyter	ms-	2022.7.1002181843
material-icon-theme	PKi	4.19.0
LiveServer	rit	5.7.5
wikitext	Row	3.6.5
sass-indented	syl	1.8.22
open-in-github-desktop	wra	1.4.3

(3 theme extensions excluded)

A/B Experiments

vsliv368:30146709
vsreu685:30147344
python383:30185418
vspor879:30202332
vspor708:30202333
vspor363:30204092
vslsvsres303:30308271
pythonvspyl392:30443607
vserr242:30382549
pythontb:30283811
vsjup518:30340749
pythonvspyt551cf:30345471
pythonptprofiler:30281270
vshan820:30294714
vstes263:30335439
vscorecescf:30445987
pythondataviewer:30285071
vscod805cf:30301675
binariesv615:30325510
bridge0708:30335490
bridge0723:30353136
cmake_vspar411:30525688
vsaa593cf:30376535
vsc1dst:30438360
pythonvs932:30410667
wslgetstarted:30449410
vscscmwlcmt:30465135
cppdebug:30492333
pylanb8912cf:30529770
vsclangdf:30486550
c4g48928:30535728
hb751961:30541207
dsvsc012cf:30540253

[C-Ezra-M]

@property at MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/@property

[C-Ezra-M]

The following CSS properties should also receive syntax highlighting:

• @property's properties
  • syntax
  • inherits
  • initial-value
  • the custom property's name (just like for @counter-style)

This also applies to other new at-rules:

• @layer (can have other at-rules except @charset, @import and @namespace nested, including other @layers)
• @color-profile and its properties:
  • src
  • rendering-intent
• @import can now import layers as well through layer(<layer-name>)
• @scroll-timeline and its properties:
  • source
  • orientation
  • scroll-offsets

[aeschli]

Syntax highlighting issues need to be filed against https://github.com/atom/language-css

[C-Ezra-M]

This isn't just about syntax highlighting, but VSCode actually reporting these at-rules as unknown.