TeaCSS for Visual Studio Code

Project-aware completion, hover previews, semantic highlighting, color tools, references, class normalization, and diagnostics for TeaCSS.

Install from the Visual Studio Code Marketplace

Setup

The extension requires Visual Studio Code 1.125 or later and a trusted workspace. Add a conventional index.css or src/index.css entry:

@preset "standard";
@source "./src/**/*.{html,js,jsx,ts,tsx,vue,svelte,astro}";
@teacss;

The language server is bundled. A TeaCSS build integration is still required to generate the application stylesheet.

For a custom entry, declare its workspace-relative path in package.json:

{
  "teacss": {
    "entry": "styles/teacss.css"
  }
}

This declaration takes priority over conventional entries. In monorepos or unusual layouts, set teacss.root to one or more project directories.

Features

Completion uses the active entry's presets and supports prefix or fuzzy matching.
Hover previews show generated CSS and optional rem-to-px conversions.
Semantic highlighting distinguishes properties, values, conditions, selectors, variables, arbitrary values, and important modifiers.
Optional color previews add swatches and Visual Studio Code color-picker support.
Find All References searches files covered by the entry's @source graph.
Normalize Classes follows TeaCSS generation order without moving unknown classes.
Diagnostics report invalid @custom declarations and likely mistyped TeaCSS tokens. Plain custom classes remain valid unless their shape clearly signals TeaCSS intent.
Project Status shows the resolved entry, presets, source coverage, vocabulary counts, and setup issues.

Supported language identifiers are html, vue, svelte, astro, php, markdown, mdx, javascript, javascriptreact, typescript, typescriptreact, jsx, tsx, css, postcss, scss, sass, and less.

Recommended editor settings

Enable suggestions inside strings for JSX and other string-based class attributes:

{
  "editor.quickSuggestions": {
    "strings": "on"
  }
}

Source color swatches require both settings:

{
  "editor.colorDecorators": true,
  "teacss.colorPreview": true
}

Settings

Setting	Type	Default	Purpose
`teacss.colorPreview`	`boolean`	`false`	Show color swatches.
`teacss.remToPxPreview`	`boolean`	`true`	Show `px` equivalents for `rem` values.
`teacss.remToPxRatio`	`number`	`16`	Set the positive root font size used for conversion.
`teacss.syntaxHighlight`	`boolean`	`true`	Highlight matched TeaCSS token parts.
`teacss.strictAnnotationMatch`	`boolean`	`false`	Limit annotations to recognized class attributes.
`teacss.unmatchedDiagnostics`	`boolean`	`true`	Warn about unmatched tokens and offer fixes.
`teacss.root`	`string`, `string[]`, or `null`	`null`	Set configuration search directories.
`teacss.autocomplete.matchType`	`"prefix"` or `"fuzzy"`	`"prefix"`	Choose completion matching.
`teacss.autocomplete.strict`	`boolean`	`false`	Complete only in recognized class attributes.
`teacss.autocomplete.maxItems`	`integer`	`1000`	Limit results from `0` through `10,000`.

Commands

Command	Purpose
`TeaCSS: Reload`	Reload active configuration.
`TeaCSS: Restart Language Server`	Restart discovery and language features.
`TeaCSS: Show Project Status`	Inspect the active project and setup issues.
`TeaCSS: Normalize Classes`	Order confirmed utilities canonically.

Troubleshooting

If features do not activate:

Confirm the workspace is trusted.
Confirm the entry contains a top-level @teacss;, or set package.json#teacss.entry.
Confirm presets resolve and @source includes the current file. Patterns are relative to the entry.
Set teacss.root for non-standard layouts.
Run TeaCSS: Restart Language Server, then inspect the TeaCSS output channel.

TeaCSS configuration and preset modules may execute workspace code, so the extension remains disabled in Restricted Mode.

Development

From the repository root:

bun run --filter @teacss/vscode build
code --extensionDevelopmentPath=packages-integrations/vscode packages-integrations/vscode/demo

Build a VSIX with bun run --filter @teacss/vscode package.

License

MIT

TeaCSS

YIQILAI.TECH