#66270
CSS Syntax Tree Errors with Media Query Comparison Operators
Reproduction steps
- Start Zed.
- Open a CSS file (or create new file and select CSS syntax highlighting).
- Type/Copy-paste example CSS. This is the example used in the provided screenshot:
@media (min-width: 768px) and (max-width: 1024px) {
main {
color: blue;
}
}
@media (width >= 768px) and (width <= 1024px) {
main {
color: blue;
}
}
@media (768px <= width <= 1024px) {
main {
color: blue;
}
}(It looks like GitHub has issues too!)
Current vs. Expected behavior
Current behavior:
It looks like the range syntax is the worst offender, but the pixel values in the single comparison operators are not highlighted. Using the range syntax leads to the remainder of the file becoming part of the media query, even if nested within another rule:
Expected behavior:
Ideally, the syntax highlighting would not "break" upon usage of these comparison operators.
Zed version and system specs
Zed: v1.27.0+preview.383.1a91814bd79e80e8f21ed7bea8e228852cd13def (Zed Preview) OS: macOS 15.8.1 Memory: 16 GiB Architecture: x86_64
Attach Zed log file
Zed.log
2026-10-28T20:17:09-04:00 INFO [zed::reliability::hang_detection] Task trace has been saved to: /Users/.../hang-2026-10-28_20-17-09.miniprof.json
2026-10-28T20:19:19-04:00 WARN [simplecss] The @media rule is not supported. Skipped.
2026-10-28T20:23:42-04:00 INFO [zed::reliability] memory usage: resident 198 MiB (+19 MiB), virtual 62853 MiB
2026-10-28T20:23:42-04:00 INFO [zed::reliability] worktree diagnostics: projects 1, orphaned projects 0, stores 1, slots 1, live 1, visible 0, strong 0, dead weak 0, loading 0, entries 1, visible entries 1, largest /Users/cjburkey/Desktop/test.css (1 entries, 1 visible)
2026-10-28T20:26:13-04:00 INFO [zed::reliability::hang_detection::logging] Background hang detected on Unknown:
Tasks(s) that ran too long
196.264477ms - crates/theme/src/font_family_cache.rs:79:14
2026-10-28T20:26:13-04:00 INFO [zed::reliability::hang_detection] Task trace has been saved to: /Users/.../hang-2026-10-28_20-26-13.miniprof.json
Relevant Zed settings
I have no CSS-specific settings defined, but I'll post my settings just in case!
settings.json
// -*- mode: jsonc -*-
// Zed settings
//
// For information on how to configure Zed, see the Zed
// documentation: https://zed.dev/docs/configuring-zed
//
// To see all of Zed's default settings without changing your
// custom settings, run the `open default settings` command
// from the command palette or from `Zed` application menu.
{
"unnecessary_code_fade": 0.5,
"cli_default_open_behavior": "existing_window",
"icon_theme": "Zed (Default)",
"project_panel": {
"dock": "left",
},
"outline_panel": {
"dock": "left",
},
"git_panel": {
"dock": "left",
},
"theme": {
"mode": "dark",
"light": "Ayu Light",
"dark": "Catppuccin Mocha",
},
"base_keymap": "JetBrains",
"buffer_font_family": "Fira Code",
"buffer_font_size": 16.0,
"confirm_quit": true,
"restore_on_startup": "empty_tab",
"when_closing_with_no_tabs": "keep_window_open",
"on_last_window_closed": "quit_app",
"auto_signature_help": true,
"wrap_guides": [80, 120],
"file_types": {
"XML": ["svg"],
},
"toolbar": {
// Whether to show breadcrumbs.
"breadcrumbs": true,
// Whether to show quick action buttons.
"quick_actions": true,
// Whether to show the Selections menu in the editor toolbar.
"selections_menu": true,
// Whether to show agent review buttons in the editor toolbar.
"agent_review": false,
// Whether to show code action buttons in the editor toolbar.
"code_actions": true,
},
"title_bar": {
"show_onboarding_banner": false,
// Whether to show the sign in button in the titlebar.
"show_sign_in": false,
},
"indent_guides": {
// Determines how indent guides are colored.
// This setting can take the following three values:
//
// 1. "disabled"
// 2. "fixed"
// 3. "indent_aware"
"coloring": "indent_aware",
// Determines how indent guide backgrounds are colored.
// This setting can take the following two values:
//
// 1. "disabled"
// 2. "indent_aware"
"background_coloring": "indent_aware",
},
"scroll_beyond_last_line": "vertical_scroll_margin",
"inlay_hints": {
// Global switch to toggle hints on and off, switched off by default.
"enabled": true,
// Toggle certain types of hints on and off, all switched on by default.
"show_type_hints": true,
"show_parameter_hints": true,
"show_value_hints": true,
},
"collaboration_panel": {
// Whether to show the collaboration panel button in the status bar.
"dock": "left",
"button": false,
},
"agent": {
// Whether the agent is enabled.
"dock": "right",
"enabled": false,
},
"autosave": "on_focus_change",
"preview_tabs": {
// Whether preview tabs should be enabled.
// Preview tabs allow you to open files in preview mode, where they close automatically
// when you switch to another file unless you explicitly pin them.
// This is useful for quickly viewing files without cluttering your workspace.
"enabled": false,
},
"telemetry": {
// Send debug info like crash reports.
"diagnostics": false,
// Send anonymized usage data like what languages you're using Zed with.
"metrics": false,
},
"disable_ai": true,
"session": {
// Whether or not to restore unsaved buffers on restart.
//
// If this is true, user won't be prompted whether to save/discard
// dirty files when closing the application.
//
// Default: true
"restore_unsaved_buffers": false,
},
}
Relevant Keymap
No response
(for AI issues) Model provider details
No response
If you are using WSL on Windows, what flavor of Linux are you using?
None
@cjburkey01 I reproduced the syntax-tree errors on Nightly 1.27.0+nightly.3484 (
5e8998a2), macOS 15.8.1. The traditional min/max control parses normally, the separate comparisons produceERRORnodes, and the chained range becomes anERRORcovering its entire media block.Reproduction and syntax-tree evidence
I opened this CSS in Nightly and ran
dev: open syntax tree viewfrom the command palette:The screenshot combines crops of the source, the control/comparison tree, and the chained-range/trailing-rule tree. The chained block is
ERROR [13:1 - 17:2]; the trailing rule is a separaterule_set [19:1 - 21:2].