#66270

CSS Syntax Tree Errors with Media Query Comparison Operators

Opencjburkey01opened 2d ago

Reproduction steps

  1. Start Zed.
  2. Open a CSS file (or create new file and select CSS syntax highlighting).
  3. 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

Activity

1
yeskunall1d ago

@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 produce ERROR nodes, and the chained range becomes an ERROR covering its entire media block.

Reproduction and syntax-tree evidence

I opened this CSS in Nightly and ran dev: open syntax tree view from the command palette:

@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;
    }
}

.after-media {
    color: red;
}

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 separate rule_set [19:1 - 21:2].