LeanCSS VS Code Extension
The LeanCSS extension brings intelligent language features for LeanCSS patterns (@set, @drop, @lift) to Visual Studio Code.
By treating LeanCSS patterns as real symbols in the editor, this extension makes working with utility-driven, design-system CSS files faster and more navigable.
Features
This extension provides language intelligence across .css, .scss, and .postcss files within your workspace.
1. Go to Definition
Command-click (or F12) on a symbol used in a @lift statement to instantly navigate to its @set or @drop declaration, whether it's in the same file or somewhere else in your workspace.
Example usage:
.hero {
@lift stack-lg panel;
}
Clicking stack-lg takes you to @set stack-lg { ... }.
2. Find References
Easily locate where your LeanCSS patterns are being used. Right-click a @set or @drop declaration (or usage) and choose Find All References (Shift+F12) to see every @lift statement that includes the symbol across your entire project.
3. IntelliSense for @lift
Get intelligent autocomplete suggestions as you type inside a @lift statement. The extension suggests available sets and drops from your workspace, reducing typos and the need to memorize pattern names.
@lift st| /* Suggests stack-sm, stack-md, stack-lg */
4. Hover Preview
Hover over any symbol inside a @lift statement to see a quick inline preview of its declaration, including whether it's a set or drop, the file it's located in, and a snippet of its inner CSS properties.
5. Reference Count CodeLens
The extension adds a lightweight, inline CodeLens annotation above every @set and @drop declaration showing exactly how many times the pattern is used across your workspace.
Example:
/* 3 references */
@set stack-lg {
display: grid;
gap: var(--space-lg);
}
Clicking the "3 references" label instantly opens the inline peek view showing all usages.
Quickly promote standard CSS rules into a reusable LeanCSS pattern.
- Highlight standard CSS declarations inside a rule.
- Click the lightbulb icon (Quick Fix) or press
Ctrl+. (Cmd+. on Mac).
- Select Extract LeanCSS Set.
- Enter a name (e.g.,
hero-title).
The extension will automatically hoist your selection into a new @set hero-title { ... } block at the top of the file and replace your original inline declarations with @lift hero-title;.
Supported File Types
Setup & Installation
(Installation instructions will be available once the extension is published to the VS Code Marketplace.)
