CSSX Utility Assistant

A small editor extension for static CSSX utility strings. It shows completion and hover help in cssx.create, sx, and common class and className attributes in supported source files.

Completions are generated from the checked-in compiler utility corpus and default theme. The installed extension includes the generated catalog, so it does not need the compiler package, a language server, or network access.

Completions cover the compiler's spacing and scroll-spacing axes, inset and sizing utilities, grid and flex alignment, sibling spacing, text flow and line clamping, SVG, visual effects, animation, and responsive or state variants.

To develop it locally, open this folder in VS Code and press F5 to launch an Extension Development Host.

The extension suggests utilities automatically inside multiline cssx.create(...) values, sx(...) strings, and class or className attributes. Palette colors include completion swatches, source decorations, and color-picker support. Disable source swatches with cssxIntelliSense.colorDecorators.

The extension shows a warning on sx() tokens absent from its built-in catalog. Custom theme utilities can still be valid; production compilation checks against the active theme and warns when a token has no CSSX recipe.

Arbitrary values can contain literal spaces. For example, use grid-cols-[13rem minmax(0,1fr)] or w-[calc(100vw - 2rem)] directly; the extension keeps each full value together while you type, including before its closing bracket or quote is complete.

Regenerate and check the catalog from the repository root with pnpm generate:intellisense-catalog and node scripts/generate-intellisense-catalog.mjs --check.