VS Code extension

The WovenUI extension adds documentation, completion, diagnostics and color swatches for apply() mixins, utility classes and design tokens. It is published on the Visual Studio Marketplace with the publisher aala and the extension id wovenui.

Every feature reads the framework’s own data, the SassDoc JSON and the compiled CSS, from the package installed in your project. It follows the installed core version. When no package is found, or its files cannot be read, the extension stays inactive and does nothing. See AI assistants and tooling data for the data it reads.

Install

Use any of these:

Open the Marketplace page and choose Install.
Open the Extensions view in VS Code and search for “WovenUI”.
Run it from a terminal:

code --install-extension aala.wovenui

Install core in the project first, as described in Installation, so the extension has a package to read. It looks for @wovenui/core in node_modules, searching up from the open file and from each workspace folder, and reads its sassdoc.json and compiled CSS. The status bar shows the active source (package name, version and where it was found), or WovenUI: not installed when there is none.

SCSS and Sass

Mixin hover on @include name(...), @include ns.name(...) and apply() items: signature, description, parameters, first example, output, MDN link, related mixins, deprecation notice and source location.
Completion of mixin names in apply( and after @include, with parameter snippets. Keyed parameters list their configured keys (p( shows the spacing keys with values). Color mixins list roles, hues and theme words with swatches, then shade stops. States and breakpoints follow an item.
Tokens: completion inside token( and var(--wu- (also in CSS) with light and dark values and swatches, and hover on token names.
Go to definition from @include, namespaced calls, apply() items and function calls into the installed package sources. It needs a package that ships its src/styles folder.
Diagnostics with quick fixes in apply(): unknown or removed mixin, modifier written before the utility (hover:bg(...), the fix reorders), unknown modifier or a second state or breakpoint, a unitless number that is not a configured key (p(7)), unknown color word (bg(primary) to bg(brand), bg(brand-500) to bg(brand, 500)), a missing required argument, wrong units for rotate and skew, and unknown words in keyword scales. These are the same errors the compiler raises, shown while you type. See Errors.

Markup

Works in HTML, JSX, TSX, Vue, Svelte, Astro, PHP and Blade.

Class completion in class attributes (class, className, Vue :class, Svelte class:, Astro class:list, JSX expressions). Base classes come first. Type hover: or p-4@ to see the state and breakpoint variants.
Class hover shows the generated CSS with its media query and state, light and dark values for color classes, and the matching apply() item.
Color swatches for color classes, token() and var(--wu-...), using light theme values.
Diagnostics with quick fixes: framework-style class syntax such as lg:p-4 (fixed to p-4@lg), two classes that set the same property for the same state and breakpoint (p-4 p-2), and, when enabled, classes that are not WovenUI classes. Template code inside class attributes is skipped.

Plain JavaScript and TypeScript files get these features only inside wovenui.classRegex contexts.

The Mixins and Functions view in the WovenUI activity bar groups every mixin and function by SassDoc group, with the hover documentation as tooltip. Clicking an item inserts it as a snippet with tab stops for required arguments.

WovenUI: Convert Classes to apply() turns a class list into an apply() call and lists the classes it cannot map. Put the cursor in a class attribute or select a class list. In markup the call is copied to the clipboard. In SCSS or Sass a selection can also be replaced.

flex between p-4 hover:bg-brand row@md

@include apply(flex, between, p(4), bg(brand) hover, row md);

Settings

Each wovenui.diagnostics.<rule> setting takes off, error, warning, information or hint.

Setting	Default	What it does
`wovenui.classRegex`	`[]`	Extra class contexts: a regex whose first group is the class list, or a pair `[containerRegex, classRegex]`, for example for `clsx(...)`.
`wovenui.hover.enabled`	`true`	Documentation on hover over mixin names.
`wovenui.completion.enabled`	`true`	Completion for mixins, keys, color words, `apply()` modifiers, `token()` and `var(--`.
`wovenui.tokens.hover.enabled`	`true`	Light and dark values on hover over `token()` names and `var(--` tokens.
`wovenui.classes.completion.enabled`	`true`	Utility class completion.
`wovenui.classes.hover.enabled`	`true`	Generated CSS and `apply()` mapping on hover over a class.
`wovenui.colors.enabled`	`true`	Color swatches for color classes, `token()` and `var(--`.
`wovenui.tree.enabled`	`true`	The Mixins and Functions sidebar view.
`wovenui.definition.enabled`	`true`	Go to definition into the installed package sources.
`wovenui.diagnostics.enabled`	`true`	All WovenUI diagnostics.
`wovenui.diagnostics.unknownMixin`	`error`	Severity for an unknown or removed mixin in an `apply()` item.
`wovenui.diagnostics.modifierOrder`	`error`	Severity for a modifier written before the utility in `apply()`.
`wovenui.diagnostics.invalidModifier`	`error`	Severity for an unknown modifier, or more than one state or breakpoint on one item.
`wovenui.diagnostics.unknownKey`	`error`	Severity for a unitless number that is not a configured key (`p(7)`).
`wovenui.diagnostics.missingArgument`	`error`	Severity for a mixin with a required argument written without one in `apply()`.
`wovenui.diagnostics.unknownColor`	`error`	Severity for an unknown color word in `bg()`, `text-color()` or `border-color()`.
`wovenui.diagnostics.unknownClass`	`off`	Severity for a class that is not a WovenUI class. Off by default, since projects add their own classes.
`wovenui.diagnostics.classConflict`	`warning`	Severity for two classes that set the same property for the same state and breakpoint.
`wovenui.diagnostics.tailwindSyntax`	`warning`	Severity for framework-style class syntax such as `lg:p-4` or `justify-between`.

Commands

Command	What it does
`WovenUI: Reload Data`	Reads the framework data again.
`WovenUI: Show Data Source`	Opens the WovenUI output channel and logs the package name, version, how it was found, its folder and the SassDoc and CSS files in use.
`WovenUI: Convert Classes to apply()`	Turns a class list into an `apply()` call.
`WovenUI: Filter Mixins`	Filters the sidebar view by name, group or description.
`WovenUI: Clear Mixin Filter`	Clears the sidebar filter.
`WovenUI: Refresh Mixin Tree`	Redraws the sidebar view.
`WovenUI: Insert Mixin`	Runs when a sidebar item is clicked. Not shown in the Command Palette.