Skip to content

Support compound if() conditions with not/and/or operators - #289

Merged
bartveneman merged 2 commits into
mainfrom
claude/css-if-parsing-bug-x4puwr
Aug 16, 2026
Merged

Support compound if() conditions with not/and/or operators#289
bartveneman merged 2 commits into
mainfrom
claude/css-if-parsing-bug-x4puwr

Conversation

@bartveneman

Copy link
Copy Markdown
Member

Summary

This PR adds support for parsing compound if() conditions that combine multiple test functions using logical operators (not, and, or). Previously, only simple single-function conditions like if(style(--x: 1): ...) were supported. Now conditions like if(not style(--scheme: light): ...) and if(style(--a: 1) and media(width > 600px): ...) are properly parsed.

Key Changes

  • New IF_CONDITION node type: Introduced a wrapper node type to represent compound conditions combining multiple test functions with logical operators. Simple single-function conditions remain unwrapped for backward compatibility.

  • New PRELUDE_OPERATOR node type: Added to represent the not, and, and or operators within conditions, matching the structure used in @supports compound conditions.

  • Enhanced parse_if_condition() method: Replaced the simple conditional logic with a comprehensive parser that:

    • Detects and parses logical operators (not, and, or) as PRELUDE_OPERATOR nodes
    • Handles lookahead to determine when to continue parsing (checking for following operators/functions)
    • Wraps compound conditions in an IF_CONDITION node while keeping simple conditions unwrapped
    • Maintains the flat sibling chain structure for operators and functions
  • Extended style() function parsing: Updated parse_if_condition_function() to support the full compound and/or/not grammar within style() conditions (e.g., style((--scheme: dark) or (--scheme: very-dark))), delegating to the existing ConditionParser for complex expressions.

  • Helper methods: Added is_and_or_not() and next_significant_token() to support lookahead parsing and operator detection.

  • Type system updates: Updated IfBranch.condition type to include IfCondition, and added corresponding type guards and exports.

Notable Implementation Details

  • Compound conditions are wrapped in IF_CONDITION only when necessary (multiple components or operators present), preserving the simple unwrapped structure for the common single-function case
  • The parser uses position saving/restoring for lookahead to avoid committing to parsing operators that aren't followed by valid continuations
  • The flat sibling chain structure mirrors @supports condition parsing, allowing consistent traversal of operator/function sequences

https://claude.ai/code/session_013PZZLGd2cEKsg1tDbRiy5D

…binator

if()'s branch-condition parsing only ever looked at a single token: a
TOKEN_FUNCTION (style()/media()/supports()) or a bare identifier. For
`not style(--scheme: light)`, the leading "not" identifier was taken as
the entire condition, after which the colon-finder blindly skipped
tokens (including style()'s own nested ':') until it hit the first
stray ')' — silently losing style() and corrupting everything after it.

Condition parsing now consumes the full <boolean-expr[ <if-test> ]>
grammar (not/and/or chains of style()/media()/supports() calls), same
as the compound grammar already supported inside supports(). A compound
condition is exposed as a new IfCondition node (IfBranch.condition),
while a single test or "else" stays unwrapped as before.

Also fixes style()'s own query to accept the compound form (e.g.
`style((--scheme: dark) or (--scheme: very-dark))`), mirroring the
fallback supports() already had.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013PZZLGd2cEKsg1tDbRiy5D
@github-actions

Copy link
Copy Markdown
Contributor

⚠️ Package Size Increase

📦 Package 📏 Base Size 📏 Source Size 📈 Size Change
@projectwallace/css-parser 44.5 kB 45.5 kB +1 kB

@pkg-pr-new

pkg-pr-new Bot commented Aug 16, 2026

Copy link
Copy Markdown

Open in StackBlitz

npm i https://pkg.pr.new/@projectwallace/css-parser@1fb7448

commit: 1fb7448

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013PZZLGd2cEKsg1tDbRiy5D
@bartveneman
bartveneman merged commit 181d00d into main Aug 16, 2026
16 checks passed
@bartveneman
bartveneman deleted the claude/css-if-parsing-bug-x4puwr branch August 16, 2026 13:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants