microsoft / microsoft/vscode-css-languageservice
Using attr() function with type definition is not supported in css files
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 384
- Forks
- 217
- Avg merge
- 3d 16h
- Merged PRs (30d)
- 14
Description
Type: Bug
Look at this css:
div {
left: calc(300px * attr(data-i type(<number>)));
}
This is actually a complete valid css property value. I am using the attr() function to take the value of an attribute. But i'm also adding a type() function with the argument of <number> to convert this value to a number (so it can be multiplied by 300px) because by default it is a string. But vs code gives me a syntax error and i can't have autocompletion and stuff for the rest of the block. Please fix this issue.
Update:
I found a solution for this issue. Instead of directly using the attr() function for the value of a property, you could wrap it into a separate variable. This way there won't be any syntax errors. Example:
/* Syntax error: */
div {
left: calc(300px * attr(data-i type(<number>)));
}
/* Safe: */
div {
--i: attr(data-i type(<number>));
left: calc(300px * var(--i));
}
This solves the problem of syntax error. But still, it's an issue that needs to be fixed.
VS Code version: Code 1.107.1 (994fd12f8d3a5aa16f17d42c041e5809167e845a, 2025-12-17T14:15:14.850Z)
OS version: Windows_NT x64 10.0.19045
Modes:
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.