Stylus Language Support for Zed

⚠️ Work in progress — this extension is incomplete and not fully functional.

Syntax highlighting is partial (brace-style Stylus works reasonably well; indentation-style Stylus does not parse correctly since there is no tree-sitter grammar for Stylus — the CSS grammar is used as a stand-in). The language server is a custom implementation that has not been thoroughly tested. Several features listed below may not work correctly or at all.

Forks and improvements are very welcome. If you want to build a more complete Stylus extension for Zed — especially one with a proper tree-sitter grammar — please feel free to use this as a starting point.

Stylus CSS language support for the Zed editor, powered by a custom Language Server Protocol (LSP) implementation.

Features

Feature	Status
Syntax highlighting	⚠️ Partial — uses tree-sitter-css as a stand-in; no native Stylus grammar exists
Diagnostics / linting	⚠️ Untested
Completions	⚠️ Untested
Hover documentation	⚠️ Untested
Signature help	⚠️ Untested
Go-to definition	⚠️ Untested
Find references	⚠️ Untested
Document symbols	⚠️ Untested
Folding ranges	⚠️ Untested
Color picker	⚠️ Untested
Formatting	⚠️ Untested

Installation

From Zed Extension Registry (once published)

1. Open the Command Palette: cmd+shift+p
2. Type zed: extensions
3. Search for Stylus
4. Click Install

Manual / Development Install

# Clone the repo
git clone https://github.com/your-org/zed-stylus
cd zed-stylus

# Build the LSP server
cd stylus-language-server
npm install
npm run build
cd ..

# Install as a Zed dev extension
# In Zed: Extensions > Install Dev Extension > select this directory

Architecture

zed-stylus/
├── extension.toml              # Zed extension manifest
├── Cargo.toml                  # Rust extension crate
├── src/
│   └── lib.rs                  # Extension entry point (Rust/WASM)
│                               # Installs & launches the LSP server
├── languages/
│   └── stylus/
│       ├── config.toml         # Language config (file ext, comments, brackets)
│       ├── highlights.scm      # Tree-sitter syntax highlighting queries
│       ├── indents.scm         # Indentation queries
│       ├── brackets.scm        # Bracket matching queries
│       └── outline.scm         # Outline panel queries
└── stylus-language-server/     # The LSP server (TypeScript/Node.js)
    ├── package.json
    ├── tsconfig.json
    └── src/
        ├── main.ts             # LSP connection, request handlers
        ├── parser.ts           # Stylus parser & validator
        ├── analyzer.ts         # Variable/mixin extraction, color detection
        ├── formatter.ts        # Code formatter
        └── data.ts             # CSS properties, Stylus builtins, named colors

How It Works

The Rust extension (src/lib.rs) acts as a thin shim compiled to WebAssembly. When Zed activates a .styl file, it calls the extension to get a command to launch the language server. The extension:

1. Checks for a workspace-local stylus-language-server binary
2. Falls back to auto-installing via npm into Zed's extension storage
3. Returns the command stylus-language-server --stdio to Zed

The TypeScript LSP server (stylus-language-server/) handles all language intelligence over the Language Server Protocol using stdin/stdout in --stdio mode.

LSP Capabilities

Completions

• CSS properties with syntax documentation and value suggestions
• CSS values contextually filtered to the current property
• Stylus variables ($var) with their resolved values
• User mixins with parameter signatures
• Built-in functions (lighten, darken, mix, rgba, etc.) with snippet insertion
• At-rules (@import, @media, @keyframes, etc.)
• Named colors with hex previews
• Pseudo-classes and pseudo-elements

Diagnostics

• Undefined variable references
• Unbalanced parentheses
• Optional semicolon consistency warnings
• Optional brace usage warnings

Formatting

The formatter normalizes Stylus to idiomatic brace-free, semicolon-free style:

• Removes redundant semicolons
• Removes redundant braces
• Normalizes calc() operator spacing
• Removes unnecessary units from 0 values
• Normalizes variable declaration spacing ($var = value)

Stylus Language Quick Reference

// Variables
$primary = #3498db
$font-stack = 'Helvetica Neue', sans-serif

// Mixin
border-radius(r = 5px)
  -webkit-border-radius r
  -moz-border-radius r
  border-radius r

// Selector nesting
.card
  background white
  border-radius(8px)
  
  &:hover
    box-shadow 0 4px 20px rgba(0,0,0,0.1)
  
  .title
    font-size 1.5rem
    color $primary

// Conditionals
.alert
  if $theme == dark
    background #222
  else
    background white

// Loops
for i in (1..5)
  .col-{i}
    width (i * 20)%

// Interpolation
vendor(prop, val)
  for prefix in webkit moz ms
    -{prefix}-{prop} val
  {prop} val

Configuration

Add to your Zed settings.json to customize:

{
  "languages": {
    "Stylus": {
      "tab_size": 2,
      "format_on_save": "on",
      "formatter": "language_server"
    }
  }
}

Contributing

PRs welcome! The LSP server is standard TypeScript — no special toolchain needed beyond Node.js 18+.

cd stylus-language-server
npm install
npm run watch   # incremental TypeScript compilation
node dist/main.js --stdio  # manual test

Authors

Primarily written by Claude (Anthropic), with @sinejoe.

License

MIT