TypeScript Styled Plugin

Cross-editor TypeScript Server plugin for CSS IntelliSense in styled-components template literals.

Features

• IntelliSense for CSS property names and values.
• Syntax error reporting.
• Quick fixes for misspelled property names.
• Hover information.
• Folding.
• Emmet completions.

Requirements

• TypeScript 5.0 or newer (6.x recommended) activates the plugin. Below that floor the plugin logs a message and leaves the host's LanguageService untouched instead of activating.
• Node.js 14.21.3 or newer in the tsserver host. The plugin's package root is CommonJS, loaded with tsserver's synchronous require().

The automated suite covers the standard Node.js tsserver path. An editor must use a compatible tsserver host and runtime; successful installation alone does not prove editor compatibility. See docs/tsserver-host.md for the verified version and loading details behind these requirements.

Embedding the language service directly through @styled/typescript-styled-plugin/api instead of the tsserver plugin needs the same Node floor, for both import() and require().

Quick Start

Install the plugin alongside the workspace TypeScript SDK:

npm install --save-dev @styled/typescript-styled-plugin typescript@^6.0.3

{
  "compilerOptions": {
    "plugins": [
      {
        "name": "@styled/typescript-styled-plugin"
      }
    ]
  }
}

Configure the editor to use this workspace TypeScript SDK. See the usage guide for tag configuration, validation and lint properties, and Emmet completions.

Editor Integration

With VS Code

Install the VS Code Styled Components extension. It bundles this plugin and works with VS Code's bundled TypeScript version without installing anything else. The extension depends on ^1.0.0, so a new 1.x release of this plugin reaches extension users the next time the extension rebuilds its dependencies; a new major version needs the extension to widen that range first (docs/tsserver-host.md, "Downstream").

To use a specific plugin version, or a workspace TypeScript version instead of the one VS Code bundles, complete the Quick Start, then run Select TypeScript Version in VS Code and choose the workspace version. See the VS Code TypeScript documentation for details on managing TypeScript versions. This setup path requires validation against the specific VS Code and workspace TypeScript versions in use.

With Sublime Text

This plugin works with the Sublime TypeScript plugin. Complete the Quick Start, then point Sublime at the workspace TypeScript version by setting typescript_tsdk:

{
  "typescript_tsdk": "<path to your project>/node_modules/typescript/lib"
}

This setup path requires validation against the Sublime TypeScript plugin and its bundled Node runtime; that runtime must meet the requirements above.

With Neovim

Neovim talks to tsserver through a language server that wraps it. Two of them load tsserver plugins without a plugins entry in tsconfig.json: install the plugin globally, then point the server at npm's global folder, which npm root -g prints.

npm install --global @styled/typescript-styled-plugin
npm root -g

With vtsls and nvim-lspconfig, list the plugin in vtsls.tsserver.globalPlugins, with location set to that folder:

vim.lsp.config('vtsls', {
  settings = {
    vtsls = {
      tsserver = {
        globalPlugins = {
          {
            name = '@styled/typescript-styled-plugin',
            location = '/usr/local/lib/node_modules', -- the output of `npm root -g`
            enableForWorkspaceTypeScriptVersions = true,
          },
        },
      },
    },
  },
})
vim.lsp.enable('vtsls')

With typescript-tools.nvim, list the plugin in tsserver_plugins; it finds npm's global folder on its own:

require('typescript-tools').setup({
  settings = {
    tsserver_plugins = { '@styled/typescript-styled-plugin' },
  },
})

To change plugin settings, add the plugin's entry to compilerOptions.plugins in tsconfig.json as in the Quick Start; tsserver still finds the globally installed copy. To use a copy installed in the project instead, complete the Quick Start and have the server use the workspace TypeScript version (for vtsls, set vtsls.autoUseWorkspaceTsdk to true). The tsserver host must meet the requirements above.

With Visual Studio

This setup path requires validation against the installed Visual Studio TypeScript Server host and runtime. Complete the Quick Start in the project, then confirm Visual Studio loads the workspace TypeScript SDK. Its tsserver host must meet the requirements above. Visual Studio does not support jsconfig.json projects; use tsconfig.json.

Maintainers

See the maintenance guide for local setup, scripts, testing, performance baselines, package validation, and pull request guidance.

Credits

Originally forked from Quramy/ts-graphql-plugin.