styled-components: Can't get completion to work

[coxley]

nVim version: v0.10.0 tsc version: 5.3.3 @styled/typescript-styled-plugin version: 1.0.1

I'm using nvim-cmp for my completion engine. This project correctly loads and shows itself in :LspInfo, and it's able to fix issues such as unused imports. But I'm getting no completion within styled tags:

export const Box = styled.div`
  width: 50px;
  height: 50px;
  border: 1px solid black;
  background-color: red;
`;

My config looks like this:

  use {
    "pmizio/typescript-tools.nvim",
    requires = { "nvim-lua/plenary.nvim", "neovim/nvim-lspconfig" },
    config = function()
      require("typescript-tools").setup {
        settings = {
          tsserver_plugins = {
            "@styled/typescript-styled-plugin",
          },
        },
      }
    end,
  }

I get proper completion when writing raw CSS-files via cssls. I also get TS completion for things like styled.<items>. But not within the tag content.

Not sure if it's required, but I also attached the cmp_nvim_lsp capability with no difference.

local capabilities = require('cmp_nvim_lsp').default_capabilities()

require('lspconfig')["typescript-tools"].setup {
  capabilities = capabilities,
}

[pmizio]

Hmm I need to look into it, maybe in ts 5.3+ something changed. I'll do it after Xmas.

[coxley]

@pmizio You're the best — downgrading to 5.2.2 fixed it.

Merry Christmas!

[pmizio]

@coxley Weird today I checked it on exact versions you provided and it is working for me. Can you reinstall ts and styled plugin and recheck this?

[shubham-cpp]

@pmizio , cannot get completion working for typescript projects. For javascript project its working as expected but for typescript projects no(no hover docs or autocompletion or error reporting).

Typescript project info

// package.json
"typescript": "^4.7.4",

-- plugins/lsp/typescript.lua
return   {
    'pmizio/typescript-tools.nvim',
    dependencies = { 'nvim-lua/plenary.nvim', 'neovim/nvim-lspconfig' },
    ft = { 'javascriptreact', 'typescriptreact', 'javascript.jsx', 'typescript.tsx', 'javascript', 'typescript' },
    config = function()
      require('typescript-tools').setup({
        on_attach = function(client, bufnr)
          sp.on_attach(client, bufnr)
          vim.keymap.set('n', 'go', '<cmd>TSToolsOrganizeImports<cr>', { buffer = bufnr })
          vim.keymap.set('n', 'gD', '<cmd>TSToolsGoToSourceDefinition<cr>', { buffer = bufnr })
          vim.keymap.set('n', 'gR', '<cmd>TSToolsFileReferences<cr>', { buffer = bufnr })
          vim.keymap.set('n', '<F2>', '<cmd>TSToolsRenameFile<space>', { buffer = bufnr, silent = false })
        end,
        settings = {
          tsserver_file_preferences = {
            includeInlayParameterNameHints = 'all',
            includeCompletionsForModuleExports = true,
            includeInlayParameterNameHintsWhenArgumentMatchesName = false,
            includeInlayFunctionParameterTypeHints = true,
            includeInlayVariableTypeHints = true,
            includeInlayVariableTypeHintsWhenTypeMatchesName = false,
            includeInlayPropertyDeclarationTypeHints = true,
            includeInlayFunctionLikeReturnTypeHints = true,
            includeInlayEnumMemberValueHints = true,
          },
          tsserver_plugins = {
            -- for TypeScript v4.9+
            -- '@styled/typescript-styled-plugin',
            -- or for older TypeScript versions
            "typescript-styled-plugin",
          },
        },
      })
    end,
  },

[pmizio]

@shubham-cpp I looked into it and styled-components plugin just crashes for all typescript versions under 4.9 also in vscode. I looked into plugin itself and all of it's dependencies are prefixed by ^ so every dep is installed in latest version. Probably some dependency just breaks it. Second typescript-styled-plugin without @styled/ isn't maintained anymore so we probably won't see any fixes. Probably the best workaround is to run tsserver from newer typescript but it need some work from me to introduce such change. Now we always run tsserver first from local node_modules then from rest of places. Javascript or not it isn't related, probably in javascript project you don't have typescript in local node_modules, so plugin fallback to other place where newer typescript is installed and everything works.

[shubham-cpp]

Ok, thank you for clarification, I'll probably try to convince my team to upgrade the typescript version so I don't need to deal with unmaintained/deprecated libraries which should result in less work(/avoid unnecessary work) for you. I understand this is not an issue by the plugin but rather by the package(typescript-styled-plugin)

[pmizio]

I understand this is not an issue by the plugin but rather by the package(typescript-styled-plugin)

Yes, this plugin only set list of typescript plugins to load on start of tsserver, rest is done by typescript and in this case typescript-styled-plugin.