WovenUI for VS Code

Editor support for WovenUI, the human-readable SCSS utility framework: hover docs, completion, color swatches, and problems with one-click fixes.

Website | npm: @wovenui/core | GitHub

What is WovenUI

WovenUI is a utility-first framework for Sass projects. It has no JavaScript runtime and does not scan your HTML.

Human-readable names. between instead of justify-between, x-center instead of items-center, z-modal instead of z-50.
Real SCSS. Load it with @use, compiled by Dart Sass.
Every utility is also a mixin. Call it through @include apply(...), with custom values, states and breakpoints.
Design tokens. Colors, spacing, radii, type, shadows, z-index and motion are --wu-* CSS custom properties, with light and dark themes and RTL-aware logical utilities.
Errors at compile time. A wrong key or an unknown color stops the build with a message that lists the valid options.

The same card, as classes and as a mixin with a custom value:

<div class="flex between x-center p-4 bg-surface text-regular rounded-md">Item</div>

@use "@wovenui/core" as *;

.card {
    @include apply(flex, between, x-center, p(1.5rem), bg(surface), text-color(regular), rounded(md), shadow(md) hover);
}

Get started

Install the framework. Dart Sass is a peer dependency (>=1.79.0 <2).
```
npm install sass @wovenui/core
# or
pnpm add sass @wovenui/core
```
Load it once, in your global stylesheet.
```
@use "@wovenui/core" as *;
```
Configure it in the same place with with (...), for example @use "@wovenui/core" as * with ($brand: #4361ee);. Without a bundler that reads the package sass export, use @use "pkg:@wovenui/core" with the Node package importer. For classes only, link the prebuilt CSS: @wovenui/core/dist/wovenui.min.css.
Install this extension.

The extension wakes up when it finds @wovenui/core in the workspace and stays quiet otherwise, so it does not interfere with other CSS tooling such as Tailwind.

What you get

Hover docs. Hover a mixin in @include, a namespaced call or an apply() item to see its signature, description, parameters, an example, the CSS it outputs and a link to MDN.
Mixin completion. Type inside apply( or after @include and get the mixin list, with parameter snippets.
Key, color and modifier completion. p( lists the spacing keys with their values. bg( lists roles, hues and theme words with color swatches. After an item, hover, md and the other states and breakpoints are offered.
Class completion and hover. In class attributes, complete utility classes. Type hover: or p-4@ to see the state and breakpoint variants. Hover a class to see the CSS it generates, including its media query and state.
Color swatches. Color classes, token() and var(--wu-...) show a swatch in the editor.
Token hover. Hover token(text-muted) or var(--wu-text-muted) to see the light and dark values.
Go to definition. Jump from @include, an apply() item or a function call to the mixin in the @wovenui/core source.
Mixins sidebar. The WovenUI activity bar lists every mixin and function by group. Click one to insert it.
Problems with one-click fixes. Mistakes are underlined, with a fix:
- bg(brand-500) becomes bg(brand, 500).
- justify-between becomes between.
- Also: unknown mixins, hover:bg(...) written before the utility, keys that are not configured (p(7)), unknown colors, Tailwind syntax (lg:p-4 becomes p-4@lg) and conflicting classes (p-4 p-2).
WovenUI: Convert Classes to apply(). Select a class list, or put the cursor in a class attribute, and run the command: flex between p-4 hover:bg-brand row@md becomes @include apply(flex, between, p(4), bg(brand) hover, row md);. Classes it cannot map are listed.

Command	What it does
`WovenUI: Reload Data`	Reads the framework data again.
`WovenUI: Show Data Source`	Shows which `@wovenui/core` version the extension is using, and where it found it.
`WovenUI: Convert Classes to apply()`	Turns a class list into an `apply()` call.
`WovenUI: Filter Mixins`	Filters the sidebar by name, group or description.
`WovenUI: Clear Mixin Filter`	Clears the sidebar filter.
`WovenUI: Refresh Mixin Tree`	Redraws the sidebar.
`WovenUI: Insert Mixin`	Runs when you click a sidebar item. It is not shown in the Command Palette.

Settings

Turn features on or off

All of these default to true.

Setting	Controls
`wovenui.hover.enabled`	Mixin hover docs.
`wovenui.completion.enabled`	Mixin, key, color, modifier, `token()` and `var(--` completion.
`wovenui.tokens.hover.enabled`	Light and dark values on hover over tokens.
`wovenui.classes.completion.enabled`	Utility class completion.
`wovenui.classes.hover.enabled`	Generated CSS on hover over a class.
`wovenui.colors.enabled`	Color swatches.
`wovenui.tree.enabled`	The Mixins sidebar.
`wovenui.definition.enabled`	Go to definition.

Problems

wovenui.diagnostics.enabled (default true) turns all problems on or off. Each rule below has its own setting, wovenui.diagnostics.<rule>, which takes off, error, warning, information or hint.

Rule	Default	Reports
`wovenui.diagnostics.unknownMixin`	`error`	A mixin that does not exist in an `apply()` item.
`wovenui.diagnostics.modifierOrder`	`error`	A modifier written before the utility, such as `hover:bg(...)`.
`wovenui.diagnostics.invalidModifier`	`error`	An unknown modifier, or more than one state or breakpoint on one item.
`wovenui.diagnostics.unknownKey`	`error`	A unitless number that is not a configured key, such as `p(7)`.
`wovenui.diagnostics.missingArgument`	`error`	A mixin that needs an argument but has none, such as `border`.
`wovenui.diagnostics.unknownColor`	`error`	A color word that does not exist in `bg()`, `text-color()` or `border-color()`.
`wovenui.diagnostics.unknownClass`	`off`	A class that is not a WovenUI class. Off because projects add their own classes.
`wovenui.diagnostics.classConflict`	`warning`	Two classes that set the same property for the same state and breakpoint.
`wovenui.diagnostics.tailwindSyntax`	`warning`	Tailwind-style class names.

Extra class contexts

wovenui.classRegex (default []) lists places outside class attributes where class names live, such as clsx(...) or cva(...). The example matches clsx("p-4 flex"). An entry is a regex whose first group is the class list, or a pair [containerRegex, classRegex].

"wovenui.classRegex": ["clsx\\(\"([^\"]+)\""]

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

Supported files

SCSS, Sass, CSS, HTML, JavaScript, TypeScript, JSX, TSX, Vue, Svelte, Astro, PHP and Blade.

Troubleshooting

WovenUI: not installed in the status bar. There is no @wovenui/core in the workspace. Run npm install sass @wovenui/core, or open the folder that has it.
Suggestions look out of date after an update. Run WovenUI: Reload Data from the Command Palette. The extension also reloads by itself when the package changes.
Something else is wrong. Open the WovenUI output channel, or run WovenUI: Show Data Source.

License

MIT

WovenUI

AALA IT Solutions