dssl-vscode/README.md

DSSL Language Support (VS Code + VSCodium)

About the publisher name. You may see a warning when you install this, because the publisher ehs-studio is new on Open VSX. It is me: EHS-Studio is the same person as wasselnl77-hash on GitHub, and the project is open source (MIT). The source is in the Hugging Face repo, and you can read every file in this extension before you install it. It does not make network requests and does not collect anything.

The DSSL style language in your editor. Not a re-implementation: this extension bundles the real parser and resolver that ship in the engine, so the diagnostics you see are the same errors the browser console prints, did-you-mean included.

Works in VS Code and VSCodium (same extension API).

VSCodium: open the Extensions tab, search "DSSL" and install. It is published on Open VSX: https://open-vsx.org/extension/ehs-studio/dssl-vscode

VS Code: the Microsoft Marketplace listing is not published yet, so install the .vsix via Extensions panel → ⋯ → Install from VSIX.

Extension id: ehs-studio.dssl-vscode. See PUBLISHING.md for the publishing flow.

Features

• Real-compiler diagnostics. Errors AND warnings (the v0.7 warnings channel included: the display: none clobbered by a later column: shows up as a squiggle, not a mystery).

• Completions from your registry. Every .dssl file in the workspace is parsed and the token registry folded across files (tokens*.dssl first). Type color. and get your palette with resolved values. Type animate: and get your motions first.

• Hover docs for the semantic vocabulary (row:, bend:, stretch:, seen, pin...), for tokens (resolved value), for workspace motions and behaviors.

• Syntax highlighting via a TextMate grammar for .dssl.

• Completions for the new vocabulary. After texture: you get the presets, the generators and every setting; after aura-glow: only glow settings; after aura-particle: only particle settings (shapes, where particles are born, directions); after slider: the clauses. Hovering a preset or a setting explains it.

• The designer (DSSL: Open the designer, or the paint-can button on a .dssl tab). Three tabs:

  • Aura: a slider or picker for every glow and particle setting, colour stops you can add and remove, a live preview drawn by the real renderer, a graph of one particle's opacity and size over its life, and a live graph of particles alive and frame time.
  • Texture: all the presets and 11 generators as thumbnails, up to four stacked layers, every setting as a slider, colour pickers.
  • Slider: a live range input with the generated rules, and a bar editor for histogram sliders.

  Each tab writes the DSSL for you and checks it with the real compiler as you go. Insert at cursor puts it in your file (indented to match, replacing a selection if there is one). Load from selection reads an existing aura-glow:, texture: or slider: declaration back into the controls.

• DSSL: Convert a CSS file to DSSL (right-click a .css file). Runs the importer, writes the .dssl next to it, and lists in an output channel what it could not carry over.

What it does not do (yet)

• No formatter. No go-to-definition for behaviors. No LSP process (diagnostics run in the extension host; a language server is the next step if files get huge).

Configuration

Setting	Default	Meaning
dssl.diagnostics.enable	true	run the compiler on change and save
dssl.diagnostics.debounce	250	ms to wait after a keystroke

How it works

lib/engine/ holds a synced copy of the engine's modules (parser, resolver, utils, color, texture, aura, slider, lint, import) from the main repo (keep them identical with scripts/sync-extension-engine.mjs). On change, every .dssl file in the workspace is parsed once, tokens fold in load order, and the real resolve() produces the diagnostics. Completions and hovers read the folded registry.

Links

• Site: https://dssl-sable.vercel.app
• Repo + full docs: https://huggingface.co/EHS-Studio/dssl
• Feature matrix: PARITY.md in the repo

MIT license.