@csszyx/ts-plugin

Bounded csszyx key and value completions for compatible TypeScript language-service hosts. This package is a TypeScript project plugin, not a universal LSP and not a replacement for the csszyx VS Code extension.

Setup

pnpm add -D @csszyx/ts-plugin typescript

{
  "compilerOptions": {
    "plugins": [{ "name": "@csszyx/ts-plugin" }],
  },
}

Use the workspace TypeScript version, then restart the host's TypeScript service. In a monorepo, configure the leaf tsconfig that owns the edited source file.

The supported peer range is TypeScript >=5.9 <7. Certification is versioned per host and release; hosts decide whether project plugins are loaded. Absence of csszyx entries does not imply an LSP or editor bug.

Authoring experience

The plugin completes keys and curated values in JSX sz, nested variants, szv() style objects, imported szr() objects, and inside each component szs slot. Numeric suggestions are inserted without quotes; Tailwind 4 numbers remain open-ended, so values such as { p: 13, w: 137 } work even when they are not listed in the dropdown.

import { szv } from "csszyx";

const buttonSz = szv({
  base: { px: 4, rounded: "md" },
  variants: {
    tone: {
      primary: { bg: "blue-600", color: "white" },
      danger: { bg: "red-600", color: "white" },
    },
  },
});

const card = <Card szs={{ header: { bg: "gray-100", p: 4 } }} />;

The outer szs keys are slot names, so CSS suggestions begin inside a slot's object. Theme-aware values, hover, diagnostics, and syntax highlighting are not provided by this package.

Configuration

{
  "name": "@csszyx/ts-plugin",
  "enabled": true,
  "values": true,
  "maxEntries": 512,
  "deadlineMs": 20,
  "failureThreshold": 3,
}

Invalid values are replaced with bounded defaults. Repeated internal failures open a per-project circuit breaker while leaving base TypeScript completions untouched; changing plugin configuration resets it.

Rollback

Remove the plugin entry and restart the TypeScript service. The plugin performs no network access, telemetry, project-code execution, Tailwind-plugin execution, or synchronous theme-file I/O.