[CSS] Add support for @property

[coolCucumber-cat]

Does this issue occur when all extensions are disabled?: Yes

• VS Code Version: 1.83.0
• OS Version: WIndows 11

The @property rule for CSS doesn't work. It's at 83% on CanIUse and allows you to transition custom properties, among other things.

[aeschli]

What doesn't work? Parsing support got added by #161842.
There's an open request for adding code completion support as well: #162030

[coolCucumber-cat]

What doesn't work? Parsing support got added by #161842. There's an open request for adding code completion support as well: #162030

The only thing that works is that it knows it's an at-rule. It highlights @Property as purple and that's it. No syntax highlighting, no Intellisense, no nothing. It also breaks all the Intellisense behind it, in that it's just randomly guessing. If you type display it will complete it, but for the value it has no clue because it's just guessing, it won't suggest the valid values, it will give suggestions like float: left. And in Vue SFCs it breaks all the syntax highlighting and completely break all the Intellisense behind it that isn't CSS the CSS in the same file. So if we had 3 elements where the middle one is the CSS, which has 3 declarations the middle one is the at-property rule, it will all be fine before the rule, the Intellisense will be half broken in the last CSS declaration and everything after that will be completely broken, including the closing tag for the CSS.

My question is why this doesn't work and why it takes so long to fix this. Same with the at-container rule. This is just another at-rule with some set properties, the at-container is the exact same as at-media, just with a different name. Even dumber with the at-container related properties where it's just another property, surely this isn't hard-coded in, right? Right?

[aeschli]

The parser knows @property and the structure. You can see there's code completion, validation and color boxes inside the body.
But yes it's not smart regarding completions or validation. Why is this taking so long? I don't have any time budget besides basic support. Help is welcome.
The issue for the syntax highlighting gaps is microsoft/vscode-css#18

Note that Vue is a different code base.

[aeschli]

Closing the issue.

• Smarter code completions for @Property covered by [css] CSS custom property completions #162030
• Syntax highlighting: Add support for @container vscode-css#18

[coolCucumber-cat]

The parser knows @property and the structure. You can see there's code completion, validation and color boxes inside the body. But yes it's not smart regarding completions or validation. Why is this taking so long? I don't have any time budget besides basic support. Help is welcome. The issue for the syntax highlighting gaps is microsoft/vscode-css#18 Note that Vue is a different code base.

It doesn't. There's no code completion, no validation, no colours for me at all. Only change is that it doesn't break Intellisense behind it anymore. That is all not in Vue. It should also not behave any differently in Vue. I bring Vue up because it shows how the parser can't actually understand it. I bring up the time complaint because it sounds like this is hard-coded in, when it definitely shouldn't be. It would be smart to be able to just have a single file with the names of the at-rules and their syntax. Then all the syntax highlighting and code-completion would already be done. Could literally be 5 lines of code.