TeaCSS IntelliSense for Visual Studio Code

TeaCSS IntelliSense provides project-aware completion, hover previews, semantic syntax highlighting, color tools, references, and focused diagnostics for TeaCSS projects.

Install from the Visual Studio Code Marketplace →

Installation

Install the extension, open a trusted workspace, and add a TeaCSS CSS entry to your project. A conventional entry is named index.css or src/index.css and contains a top-level @teacss directive. For a root-level index.css:

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

The extension requires Visual Studio Code 1.125 or later. Its language server is bundled, so no separate editor tooling is required. The extension does not generate your application stylesheet; keep the appropriate TeaCSS build integration configured in the project. See the TeaCSS documentation for application setup.

Features

Autocomplete

Get completion suggestions for utilities exposed by the presets in the active TeaCSS entry. Completion supports prefix and fuzzy matching, optional strict matching within recognized class attributes, and configurable result limits.

Hover previews

Hover over a matched utility in markup or script documents to inspect its generated CSS. rem values include their px equivalents by default.

Semantic syntax highlighting

TeaCSS tokens are highlighted by role, including properties, values, conditions, pseudo-classes, pseudo-elements, selectors, variables, arbitrary values, and important modifiers. Highlighting is applied only to ranges confirmed by the TeaCSS language server.

Color previews

Enable teacss.colorPreview to show color swatches in source documents and completion suggestions. Recognized colors also integrate with the Visual Studio Code color picker.

References and diagnostics

Use Find All References to locate equivalent uses of a TeaCSS utility in the current document. In CSS documents, the extension reports focused diagnostics for @custom variables that cannot be registered, such as an unknown theme namespace or an invalid color step.

Project-aware configuration

The language server follows the nearest TeaCSS entry, reloads when active configuration sources change, and updates when workspace folders are added or removed.

Project Discovery

The language server starts automatically after the extension discovers a TeaCSS entry. Discovery recognizes:

index.css or src/index.css containing an empty, top-level @teacss directive.

A custom entry declared in package.json:

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

The custom entry takes priority when it exists. For an open supported file, the extension also searches parent directories up to the nearest workspace folder.

If automatic discovery is not appropriate for your workspace, set teacss.root to one or more project directories:

{
  "teacss.root": ["packages/web", "packages/admin"]
}

Supported Languages

TeaCSS features are available for file-backed documents with these Visual Studio Code language identifiers:

Markup and templates: html, vue, svelte, astro, php, markdown, mdx
Scripts: javascript, javascriptreact, typescript, typescriptreact, jsx, tsx
Stylesheets: css, postcss, scss, sass, less

Recommended Visual Studio Code Settings

Visual Studio Code may not automatically request completions inside string content. Enable string suggestions when you want completions to appear as you type in JSX or other string-based class attributes:

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

Source-document color decorators require both the Visual Studio Code color decorator and the TeaCSS color preview setting:

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

Extension Settings

Setting	Type	Default	Description
`teacss.colorPreview`	`boolean`	`false`	Show color swatches in source documents and completion suggestions.
`teacss.remToPxPreview`	`boolean`	`true`	Show `px` equivalents for `rem` values in completion and hover previews.
`teacss.remToPxRatio`	`number`	`16`	Set the positive root font size used for `rem` to `px` conversion.
`teacss.syntaxHighlight`	`boolean`	`true`	Highlight the structural parts of matched TeaCSS tokens.
`teacss.strictAnnotationMatch`	`boolean`	`false`	Limit highlighting, hover, colors, and references to recognized class attributes.
`teacss.root`	`string`, `string[]`, or `null`	`null`	Set one or more directories from which TeaCSS configuration is resolved.
`teacss.autocomplete.matchType`	`"prefix"` or `"fuzzy"`	`"prefix"`	Choose how typed text is matched against completion candidates.
`teacss.autocomplete.strict`	`boolean`	`false`	Offer completion only inside recognized class attributes.
`teacss.autocomplete.maxItems`	`integer`	`1000`	Limit completion results to a value from `0` through `10,000`.

Extension Commands

Command	Description
`TeaCSS: Reload`	Reload the active TeaCSS configuration without restarting the language server.
`TeaCSS: Restart Language Server`	Stop and restart the language server, including when automatic project discovery is not applicable.

Run commands from the Command Palette. The TeaCSS status bar item indicates whether the language server is waiting, starting, running, or has failed to start.

Troubleshooting

If TeaCSS features do not activate:

Confirm that the workspace is trusted.
Confirm that index.css or src/index.css contains a top-level @teacss;, or declare the entry through package.json#teacss.entry.
Confirm that the entry declares the presets you use and that its @source patterns include the current file. Source patterns are relative to the entry file.
For monorepos or non-standard layouts, configure teacss.root.
Confirm that every preset or local configuration module referenced by the entry can be resolved by the project.
Run TeaCSS: Restart Language Server.
Open the Output panel and select TeaCSS for configuration or startup errors.

If completion works only after invoking it manually, enable editor.quickSuggestions.strings. If color swatches are missing, enable both editor.colorDecorators and teacss.colorPreview for source-document decorators.

Workspace Trust

TeaCSS configuration, preset modules, and Plug'n'Play modules may execute workspace code. The extension is disabled in Restricted Mode. Trust only workspaces whose code and dependencies you have reviewed.

Development

From the TeaCSS repository root:

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

Create a local VSIX package with:

bun run --filter @teacss/vscode package

License

MIT License

TeaCSS

YIQILAI.TECH