Add support for formatting CSS if() conditional value functions - #242
Merged
Conversation
Prints each if() condition/value branch on its own line, indented one level deeper than the declaration, with a closing paren back at the declaration's level — matching the style requested in #219. Nested if() and minify both work: minify collapses everything onto one line, joined by semicolons. Condition functions (style()/supports()/media()) are normalized through the existing string-based @supports/@media prelude formatter, since if()'s condition grammar is the same grammar — only the function name itself needed separate lowercasing, since that formatter doesn't touch it. Depends on the not-yet-merged css-parser#253 (adds IfBranch/is_if_branch), pinned here to its pkg.pr.new preview build. pnpm-lock.yaml is left untouched because pkg.pr.new was unreachable from this sandbox's egress policy (403) — regenerate the lockfile in an environment that can reach it, or swap the dependency for a released version once css-parser publishes if() support. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LPK5x1eiNibAUJ5d5gc98N
print_if only ever calls it after already short-circuiting on minify, so threading minify through was dead weight. Renamed to print_indent to match this file's print_* convention and avoid a same-name collision with format()'s local indent() wrapper, which still does its own minify check and delegates. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LPK5x1eiNibAUJ5d5gc98N
bartveneman
marked this pull request as draft
August 16, 2026 11:51
This comment was marked as outdated.
This comment was marked as outdated.
Contributor
|
| 📦 Package | 📏 Base Size | 📏 Source Size | 📈 Size Change |
|---|---|---|---|
| @projectwallace/format-css | 8.7 kB | 9.6 kB | +856 B |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR adds comprehensive support for formatting CSS
if()conditional value functions, which allow declaring different values based on media queries, feature support, or custom properties.Key Changes
IfBranchandFunctiontypes to handle the structure ofif()functionsprint_indent()function to centralize indentation logic, respecting both tab characters andtab_sizesettingsprint_if_condition()to format condition functions (media(),supports(),style()) and theelsekeyword, normalizing their prelude formattingprint_if_branch()to format individualcondition: valuebranches with proper spacingprint_if()to handle multi-line formatting ofif()functions with one branch per line in pretty-print mode, or minified to a single lineis_if_function()helper to distinguishif()functions from regular functionsprint_list()to accept depth, minify, and tab_size parameters to properly handle nestedif()functions with correct indentationformat_value()andformat_declaration()to accept and pass depth information for proper indentation of multi-line valuesImplementation Details
if()functions are formatted with one condition/value branch per line in pretty-print mode, with proper indentation relative to the declaration depthifkeyword itself are lowercasedformat_atrule_prelude()functionif()onto a single line with semicolon-separated branchesif()functions are properly indented one level deeper than their parentstyle(--y: 1):;) are supportedhttps://claude.ai/code/session_01LPK5x1eiNibAUJ5d5gc98N