microsoft / microsoft/vscode-css-languageservice

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

Open
#470 2 comments 4 reactions 1 assignee View on GitHub

Nobody has claimed this yet.

bug
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.

Image

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

  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.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.