fix: parse CSS data-type tokens in attr() type() notation (#4371)

[sarathfrancis90]

What:

Fixes #4371. CSS attr() with the level-5 type() notation (and bare angle-bracket data-type tokens) now parses instead of throwing.

img {
  aspect-ratio: attr(width type(<number>)) / attr(height type(<number>));
}

Before, this threw Could not parse call arguments or missing ')'. Now it compiles to the same CSS.

Why:

Inside function-call arguments, values go through the entity parser, which had no rule for the <...> data-type token (e.g. <number>, <length-percentage>). So type(<number>) — and anything containing it, like attr(name type(<number>)) — failed to parse even though it's valid CSS. I added a small dataType entity that matches <ident> and emits it verbatim, so the surrounding CSS function is preserved as-is. Guard conditions (when (@x < 1)) and media range syntax ((200px <= width)) are unaffected since those go through their own parsers, not entity().

Added a fixture pair under tests-unit/css-attr/ covering the type() notation, fallbacks, and a bare data-type value.

Checklist:

• Documentation N/A
• Added/updated unit tests
• Code complete

Summary by CodeRabbit

• New Features
  • Parser now recognizes CSS data type tokens (e.g., <length-percentage>) in value contexts, enabling support for advanced CSS features like custom property syntax declarations and attribute functions with type notation.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 7474045c-fc43-417e-97e6-95bdd0a0009b

📥 Commits

Reviewing files that changed from the base of the PR and between 7787557 and 227bd03.

📒 Files selected for processing (3)

• packages/less/lib/less/parser/parser.js
• packages/test-data/tests-unit/css-attr/css-attr.css
• packages/test-data/tests-unit/css-attr/css-attr.less

---

📝 Walkthrough

Walkthrough

The Less parser gains a new entities.dataType() rule that recognizes CSS angle-bracket data type names (e.g., <length-percentage>) as tree.Anonymous nodes. The rule is wired into the entity() dispatcher. Two new test fixtures exercise attr() with type(<...>) notation.

Changes

CSS Data Type Entity Parsing

Layer / File(s)	Summary
entities.dataType() rule and entity() dispatch packages/less/lib/less/parser/parser.js	Adds entities.dataType() that matches <...>-style tokens and emits tree.Anonymous nodes, then registers it in the entity() dispatch chain so these tokens are no longer rejected as unrecognized input.
Test fixtures for attr() with type() notation packages/test-data/tests-unit/css-attr/css-attr.less, packages/test-data/tests-unit/css-attr/css-attr.css	Adds .less input and .css expected output covering aspect-ratio with attr(type(<number>)), a width with fallback, content from a string attribute, and a bare <length-percentage> custom property syntax token.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested labels

size:S

Poem

🐇 A bracket opened, left and right,
<length-percentage> gleamed in light.
The parser once stumbled and threw an error,
Now entities.dataType() makes the path clearer!
No more "could not parse" to cause a fright —
The bunny hops on, and the types compile right. ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the main change: parsing CSS data-type tokens in attr() type() notation, which directly addresses the root cause of issue #4371.
Linked Issues check	✅ Passed	The code changes implement the required fix: a new dataType entity parser that recognizes <...> patterns in function arguments, allowing attr() declarations with type() notation to compile successfully.
Out of Scope Changes check	✅ Passed	All changes are directly related to fixing the parsing of CSS data-type tokens in attr() type() notation as specified in issue #4371; no unrelated modifications detected.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}