Xira CSS IntelliSense
Editor support for the Xira CSS framework — autocomplete, hover docs, Go to Definition, and unknown-API diagnostics for real ui-* classes and --xira-* design tokens.
This extension never generates or suggests utility classes (p-4, mt-6, max-w-5xl, …). Everything it suggests is a real Xira layout primitive, component, or design token — nothing invented.
Features
- Class autocomplete in HTML, JSX, TSX, Vue, and PHP — type
class="ui- and get real Xira APIs only.
- Hover documentation — category, source file, dependencies, states, and tokens used, for any
ui-* class.
- Go to Definition — jump straight to the real CSS source (
src/layout/grid.css, etc.) in your installed xira-css-framework package.
- Unknown Xira API diagnostics —
ui-grdi gets flagged with a "Did you mean: ui-grid?" quick fix. Your own classes (hero-card, product-card, …) are never touched.
- Component snippets (
xira-card, xira-button, xira-grid, xira-dialog, xira-form, …) — real markup lifted from Xira's own docs, not invented.
- Token IntelliSense — autocomplete and hover for real
--xira-* custom properties.
How it works
This extension has no hand-maintained list of Xira classes or tokens. When your project has xira-css-framework installed, it loads that package's own compiler registry (scripts/compiler/registry.js) directly — the exact same source of truth xira build uses — so suggestions always match your installed version. If no install is found, it falls back to a bundled snapshot generated from the framework's own source.
Requirements
None to activate — the extension works out of the box using its bundled fallback data. Install xira-css-framework in your project (npm install xira-css-framework) for IntelliSense that tracks your project's actual installed version, plus Go to Definition support.
Xira CSS IntelliSense
Features
- CSS class autocomplete
- Hover documentation
- Go to Definition
- Unknown API diagnostics
- HTML / React / Vue / PHP support
Installation
Install from VS Code Marketplace.
Usage
Start typing Xira CSS classes in your HTML/templates.
