fix(issue#4356): parenthesis in media query

[puckowski]

What:

• Fix issue Small media query parsing bug #4356 issue with parenthesis in media query.
• Add tests for issue Small media query parsing bug #4356.

Why:

This Less:

@media ((color) and (hover)), all { 
  body {
    background: green;
  }
}

results in Parsing error, missing closing ')',

The syntax is valid CSS so it should be supported. (Per: https://jigsaw.w3.org/css-validator/validator)

Checklist:

• Documentation
• Added/updated unit tests
• Code complete

Summary by CodeRabbit

• Bug Fixes

  • Improved media query parsing to better handle nested parentheses and provide clearer error messages for malformed media queries.

• Tests

  • Added test cases for complex media queries with multiple nested conditions.

[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: 04760417-3c7e-4a33-90c5-ae6519200e60

📥 Commits

Reviewing files that changed from the base of the PR and between 48a386f and 1541220.

📒 Files selected for processing (3)

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

---

📝 Walkthrough

Walkthrough

The changes enhance media feature parsing in the LESS parser with more robust closing parenthesis tracking using a local closed flag, and introduce corresponding test cases for complex nested media query conditions combining color and hover states.

Changes

Cohort / File(s)	Summary
Parser Logic packages/less/lib/less/parser/parser.js	Enhanced media feature parsing with a closed flag to track parenthesis closure. Falls back to nested mediaFeature parsing if inner parse doesn't close, and conditionally constructs either Paren/QueryInParens or Paren/Expression nodes based on closure state. Improves error signaling for malformed media feature definitions.
Test Cases packages/test-data/tests-unit/media/media.css, packages/test-data/tests-unit/media/media.less	Added test cases for complex nested media queries: @media ((color) and (hover)), all { body { background: green; } } to validate the enhanced parser behavior with combined media conditions.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Suggested labels

size:S

Poem

🐰 Parentheses nested deep and wide,
With flags to track what's closed inside,
Media queries dance with grace,
Colors hovering in their place!

🚥 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 accurately describes the main fix: addressing parenthesis parsing in media queries, which aligns with the core changes to the parser logic and test cases.
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
• Post copyable unit tests in a comment

📝 Coding Plan

• Generate coding plan for human review comments

---

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

Tip

You can get early access to new features in CodeRabbit.

Enable the early_access setting to enable early access features such as new models, tools, and more.

[Copilot]

Pull request overview

Fixes Less media query parsing to support valid CSS that includes nested parentheses in media conditions (issue #4356), and adds a regression test to ensure the behavior stays supported.

Changes:

• Adjusted mediaFeature parsing to correctly handle a parenthesized value that itself contains parentheses (e.g. ((color) and (hover))).
• Added a new unit test input and expected CSS output covering the reported nested-parens media query case.

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/media/media.less	Adds a regression test case exercising nested parentheses in @media conditions.
packages/test-data/tests-unit/media/media.css	Adds the expected compiled output for the new nested-parentheses @media test.
packages/less/lib/less/parser/parser.js	Updates media query feature parsing to accept nested parentheses by attempting value() parsing and falling back to recursive mediaFeature() parsing.

---

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