Feature request: Add support for if()

pfaffe commented

2025-06-23 10:02:22 +02:00

(Migrated from github.com)

The if function is currently being spec'ed and nearing completion (no open spec issues). It's shipped in Chrome 137. Lezer doesn't handle it correcly currently: it terminates the declaration at the first semicolon despite the open paren:

* {
color: if(style(--color: red): red;
              style(--color: green): green;
              else: gray);
}

More broadly speaking, it looks like lezer doesn't correctly handle a semicolon within a block, which doesn't terminate declarations, e.g., --thing: [ ;-) ];.

The if function is currently being [spec'ed](https://drafts.csswg.org/css-values-5/#if-notation) and nearing completion (no open spec issues). It's shipped in Chrome 137. Lezer doesn't handle it correcly currently: it terminates the declaration at the first semicolon despite the open paren: ``` * { color: if(style(--color: red): red; style(--color: green): green; else: gray); } ``` More broadly speaking, it looks like lezer doesn't correctly handle a semicolon within a block, which doesn't terminate declarations, e.g., `--thing: [ ;-) ];`.

marijnh commented

2025-06-23 13:26:21 +02:00

(Migrated from github.com)

--thing: [ ;-) ];

Do these square brackets mean something in this? You'll have to point me at the CSS feature that provides that, because I'm not familiar with it.

> ` --thing: [ ;-) ];` Do these square brackets mean something in this? You'll have to point me at the CSS feature that provides that, because I'm not familiar with it.

pfaffe commented

2025-06-23 14:22:52 +02:00

(Migrated from github.com)

Mistake on my part, the unmatched right paren was an error. This however should work: --thing: [ ; ];. Matched parentheses produce a block, within a block semicolons don't terminate the declaration.

https://drafts.csswg.org/css-variables/#defining-variables
https://www.w3.org/TR/css-syntax-3/#typedef-declaration-value

Mistake on my part, the unmatched right paren was an error. This however should work: `--thing: [ ; ];`. Matched parentheses produce a block, within a block semicolons don't terminate the declaration. https://drafts.csswg.org/css-variables/#defining-variables https://www.w3.org/TR/css-syntax-3/#typedef-declaration-value

marijnh commented

2025-06-23 19:37:35 +02:00

(Migrated from github.com)

I see. Could you take a look to see if the current main branch works better for you?

pfaffe commented

2025-06-26 16:15:19 +02:00

(Migrated from github.com)

Parses if successfully, thanks! However, it appears something along the line broke parsing of custom functions such as --foo(bar). This is not parsed as a call anymore.

Parses `if` successfully, thanks! However, it appears something along the line broke parsing of custom functions such as `--foo(bar)`. This is not parsed as a call anymore.

marijnh commented

2025-06-27 09:48:03 +02:00

(Migrated from github.com)

What does calling a variable do, and in which contexts is it allowed?

pfaffe commented

2025-06-27 09:58:15 +02:00

(Migrated from github.com)

That's a call of a custom function: https://www.w3.org/TR/css-mixins-1/. It's similar to substution of a custom property using var(), it substitutes in the result of a custom function declared with @function.

That's a call of a custom function: https://www.w3.org/TR/css-mixins-1/. It's similar to substution of a custom property using `var()`, it substitutes in the result of a custom function declared with `@function.`

marijnh commented

2025-06-27 10:08:27 +02:00

(Migrated from github.com)

That's a draft. Is it supported anywhere? It's not even mentioned on MDN at this point.

pfaffe commented

2025-06-27 10:13:49 +02:00

(Migrated from github.com)

Yes, it's still experimental right now. It's in Chrome 139: https://chromestatus.com/feature/5179721933651968

marijnh commented

2025-06-27 10:21:26 +02:00

(Migrated from github.com)

I'm not really committed to tracking every experimental CSS feature in this grammar. The language is becoming a bit of a mess, with the large amount of extensions that's being worked on. Attached patch adds support for variable as callees, but I'm going hold off on supporting @function syntax until it's actually standardized.

I'm not really committed to tracking every experimental CSS feature in this grammar. The language is becoming a bit of a mess, with the large amount of extensions that's being worked on. Attached patch adds support for variable as callees, but I'm going hold off on supporting `@function` syntax until it's actually standardized.

pfaffe commented

2025-06-27 14:06:13 +02:00

(Migrated from github.com)

Fully understood, I primarily brought it up because it was working before, if only accidentaly. I appreciate the immediate fix, thank you!

pfaffe commented

2025-07-07 12:14:18 +02:00

(Migrated from github.com)

Tested the changes again, works great! Is there a new release planned in the near future that has the changes? :)

marijnh commented

2025-07-07 12:53:58 +02:00

(Migrated from github.com)

Yes, definitely. I've tagged 1.3.0

Rows
Columns

Feature request: Add support for if() #23