Using attr() function with type definition is not supported in css files

[SomeTeaDude]

Type: Feature Request

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: