less / less/less.js

LESS if() function collides with CSS if() function

Open
#4,384 17 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
JavaScript
Stars
17k
Forks
3.4k
Avg merge
7h 42m
Merged PRs (30d)
26

Description

To reproduce:
A property with an if() function using native CSS syntax in LESS space.

	color: if(style(color: none): blue; else: red);

Current behavior:

Error: Could not parse call arguments or missing ')'

Expected behavior:

A possibility to use the native CSS if() function directly, without a hack: color: ~"if(style(color: none): blue; else: red);"

Environment information:

Used within Stylus browser extension.

Proposed solution:
Determine whether LESS parser should process if() function or pass it on, by its syntax.
LESS syntax: three parameters https://lesscss.org/functions/#logical-functions-if
native CSS syntax: one comma separated "parameter" https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/if#syntax

Contributor guide

Open the contributing guide

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.

Research direction

Start by reproducing the reported LESS snippet and inspect the parser handling of function calls, comparing native CSS if() syntax with LESS's three-parameter logical function. Done means the native CSS form parses without the escaping hack while existing LESS if() syntax continues to work, with regression coverage for both cases.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, javascript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.