fix(issue#4316): color calc inside from expression

[puckowski]

What:

• Fix color calc() inside from expression parsing issues.
• Add tests for Bug when using the plus symbol on calc calls inside from expressions for colors #4316.

Validate that:

div {
  background: rgb(from blue calc(r + 100) g b);
}

does not result in Could not parse call arguments or missing ')'

and make sure the following:

div {
  background: rgb(from blue calc(100 - r) g b);
}

has the correct output.

Why:

The above examples should be valid Less but previously causing parsing issues or failed silently.

Checklist:

• Documentation
• Added/updated unit tests
• Code complete

Summary by CodeRabbit

• Tests

  • Added test cases for rgb(from <color> ... ) expressions with arithmetic operations on color channels.

• Bug Fixes

  • Improved color operand parsing logic to correctly handle whitespace boundaries and delimiters in color function syntax.

[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: 76792615-59ae-42fe-a601-930f12f0ca1c

📥 Commits

Reviewing files that changed from the base of the PR and between ea62d74 and 08733a7.

📒 Files selected for processing (3)

• packages/less/lib/less/parser/parser.js
• packages/test-data/tests-unit/color-functions/modern.css
• packages/test-data/tests-unit/color-functions/modern.less

---

📝 Walkthrough

Walkthrough

A parsing logic fix updates the colorOperand regex pattern from consuming whitespace to using a lookahead assertion for proper operand boundary detection, paired with new test cases exercising RGB color functions with arithmetic operations.

Changes

Cohort / File(s)	Summary
Parser Logic packages/less/lib/less/parser/parser.js	Refactored colorOperand pattern from /^[lchrgbs]\s+/ to `/^([lchrgbs])(?=\s
Test Data packages/test-data/tests-unit/color-functions/modern.css, packages/test-data/tests-unit/color-functions/modern.less	Added two new test classes (.color-rgb-sub-right-operand, .color-rgb-add-left-operand) exercising rgb(from blue ...) with calc() arithmetic expressions on color channels.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 Whiskers twitching with glee
A regex refined, now lookahead's free,
No whitespace swallowed, boundaries clear,
RGB tests hop forth without fear! 🌈
Colors parse crisply, calculation flows true,
Parsing's now perfect—hip-hip-hooray for the crew! 🥕

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'fix(issue#4316): color calc inside from expression' directly and specifically describes the main change: fixing a parser issue with calc() expressions inside rgb(from ...) color expressions.
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

---

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

Tip

You can customize the tone of the review comments and chat replies.

Configure the tone_instructions setting to customize the tone of the review comments and chat replies. For example, you can set the tone to Act like a strict teacher, Act like a pirate and more.

[Copilot]

Pull request overview

Fixes Less parsing for modern color rgb(from …) syntax when calc() expressions include channel identifiers at boundaries (notably right-operands like 100 - r), addressing issue #4316 and preventing erroneous parse failures/operator dropping.

Changes:

• Updated colorOperand parsing to recognize channel operands (l/c/h/r/g/b/s) when followed by whitespace or common delimiters (e.g., )).
• Added unit fixtures covering calc(100 - r) and calc(r + 100) inside rgb(from …).

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.

File	Description
packages/test-data/tests-unit/color-functions/modern.less	Adds Less inputs reproducing #4316 scenarios for rgb(from … calc(...)).
packages/test-data/tests-unit/color-functions/modern.css	Adds expected CSS outputs ensuring operators are preserved and parsing succeeds.
packages/less/lib/less/parser/parser.js	Broadens colorOperand matching to allow delimiter lookahead (incl. )), fixing boundary parsing in calc() within from color syntax.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[matthew-dean]

Some automated Copilot feedback that apparently it couldn't post here, reposting:

---

Review comment — on packages/less/lib/less/parser/parser.js, lines 2285–2290

Suggestion (inline code suggestion):

The character class [lchrgbs] is missing a (the a-channel in lab() / oklab()) and w (whiteness in hwb()). Complete set of single-letter channel keywords across all CSS relative color functions:

Letters | Function(s) -- | -- r g b | rgb() h s l | hsl() h w b | hwb() l a b | lab(), oklab() l c h | lch(), oklch()

Unique set: a b c g h l r s w

suggestion

                // Single-letter channel keywords used in relative color syntax:
                // r, g, b (rgb), h, s, l (hsl), h, w, b (hwb),
                // l, a, b (lab/oklab), l, c, h (lch/oklch)
                const match = parserInput.$re(/^([abcghlrsw])(?=\s|[,/*)]|$)/);

---

Review comment — on packages/test-data/tests-unit/color-functions/modern.less, after the last line

The tests cover the two reported rgb cases, but the same bugs affect other color functions. Please add regression tests for the two channels that were previously missing from the character class:

suggestion

.color-rgb-sub-right-operand {
  background: rgb(from blue calc(100 - r) g b);
}
.color-rgb-add-left-operand {

background: rgb(from blue calc(r + 100) g b);

}
// lab/oklab 'a' channel (was missing from character class)

.color-lab-calc-a-add {

background: lab(from blue l calc(a + 5) b);

}
.color-lab-calc-a-sub {

background: lab(from blue l calc(5 - a) b);

}
// hwb 'w' channel (was missing from character class)

.color-hwb-calc-w-add {

background: hwb(from blue h calc(w + 10) b);

}
.color-hwb-calc-w-sub {

background: hwb(from blue h calc(10 - w) b);

}

And the matching expected output in modern.css:

suggestion

.color-rgb-sub-right-operand {

background: rgb(from blue calc(100 - r) g b);

}

.color-rgb-add-left-operand {

background: rgb(from blue calc(r + 100) g b);

}

.color-lab-calc-a-add {

background: lab(from blue l calc(a + 5) b);

}

.color-lab-calc-a-sub {

background: lab(from blue l calc(5 - a) b);

}

.color-hwb-calc-w-add {

background: hwb(from blue h calc(w + 10) b);

}

.color-hwb-calc-w-sub {

background: hwb(from blue h calc(10 - w) b);

}