bug: not working with other files than html

[ricardoantonio]

Neovim version (nvim -v)

NVIM v0.11.1 Build type: Release

Error Message

No error messages

Steps To Reproduce

No error messages

Minimal Configuration

return {
  {
    'hrsh7th/nvim-cmp',
    event = 'InsertEnter',
    dependencies = {
      -- Snippet Engine & its associated nvim-cmp source
      {
        'L3MON4D3/LuaSnip',
        build = (function()
          -- Build Step is needed for regex support in snippets.
          -- This step is not supported in many windows environments.
          -- Remove the below condition to re-enable on windows.
          if vim.fn.has 'win32' == 1 or vim.fn.executable 'make' == 0 then
            return
          end
          return 'make install_jsregexp'
        end)(),
        dependencies = {
          -- `friendly-snippets` contains a variety of premade snippets.
          --    See the README about individual language/framework/plugin snippets:
          --    https://github.com/rafamadriz/friendly-snippets
          -- {
          --   'rafamadriz/friendly-snippets',
          --   config = function()
          --     require('luasnip.loaders.from_vscode').lazy_load()
          --   end,
          -- },
        },
      },
      'saadparwaiz1/cmp_luasnip',

      'hrsh7th/cmp-nvim-lsp',
      'hrsh7th/cmp-path',

      'luckasRanarison/tailwind-tools.nvim', -- Add tailwind colors to completion items
      'onsails/lspkind-nvim', -- Add icons to completion items
    },
    config = function()
      -- See `:help cmp`
      local cmp = require 'cmp'
      local luasnip = require 'luasnip'
      luasnip.config.setup {}
      cmp.setup {
        snippet = {
          expand = function(args)
            luasnip.lsp_expand(args.body)
          end,
        },
        completion = { completeopt = 'menu,menuone,noinsert' },

        -- For an understanding of why these mappings were
        -- chosen, you will need to read `:help ins-completion`
        --
        -- No, but seriously. Please read `:help ins-completion`, it is really good!
        mapping = cmp.mapping.preset.insert {
          -- Select the [n]ext item
          ['<C-n>'] = cmp.mapping.select_next_item(),
          -- Select the [p]revious item
          ['<C-p>'] = cmp.mapping.select_prev_item(),

          -- Scroll the documentation window [b]ack / [f]orward
          ['<C-b>'] = cmp.mapping.scroll_docs(-4),
          ['<C-f>'] = cmp.mapping.scroll_docs(4),

          -- Accept ([y]es) the completion.
          --  This will auto-import if your LSP supports it.
          --  This will expand snippets if the LSP sent a snippet.
          ['<C-y>'] = cmp.mapping.confirm { select = true },

          -- If you prefer more traditional completion keymaps,
          -- you can uncomment the following lines
          --['<CR>'] = cmp.mapping.confirm { select = true },
          --['<Tab>'] = cmp.mapping.select_next_item(),
          --['<S-Tab>'] = cmp.mapping.select_prev_item(),

          -- Manually trigger a completion from nvim-cmp.
          --  Generally you don't need this, because nvim-cmp will display
          --  completions whenever it has completion options available.
          ['<C-Space>'] = cmp.mapping.complete {},

          -- Think of <c-l> as moving to the right of your snippet expansion.
          --  So if you have a snippet that's like:
          --  function $name($args)
          --    $body
          --  end
          --
          -- <c-l> will move you to the right of each of the expansion locations.
          -- <c-h> is similar, except moving you backwards.
          ['<C-l>'] = cmp.mapping(function()
            if luasnip.expand_or_locally_jumpable() then
              luasnip.expand_or_jump()
            end
          end, { 'i', 's' }),
          ['<C-h>'] = cmp.mapping(function()
            if luasnip.locally_jumpable(-1) then
              luasnip.jump(-1)
            end
          end, { 'i', 's' }),

          -- For more advanced Luasnip keymaps (e.g. selecting choice nodes, expansion) see:
          --    https://github.com/L3MON4D3/LuaSnip?tab=readme-ov-file#keymaps
        },
        sources = {
          {
            name = 'lazydev',
            -- set group index to 0 to skip loading LuaLS completions as lazydev recommends it
            group_index = 0,
          },
          { name = 'nvim_lsp' },
          { name = 'luasnip' },
          { name = 'path' },
          { name = 'html-css' },
        },
        formatting = {
          format = function(entry, vim_item)
            -- Primer formateador
            local formatted_item = require('lspkind').cmp_format {
              mode = 'symbol_text',
              menu = {
                buffer = '[Buffer]',
                nvim_lsp = '[LSP]',
                luasnip = '[LuaSnip]',
                nvim_lua = '[Lua]',
                latex_symbols = '[Latex]',
                path = '[Path]',
                --html_css = '[HTML-CSS]',
              },
              before = require('tailwind-tools.cmp').lspkind_format, -- Add tailwind colors
            }(entry, vim_item)

            -- Segundo formateador
            if entry.source.name == 'html-css' then
              vim_item.menu = '[' .. (entry.completion_item.provider or 'html-css') .. ']'
            end

            return formatted_item
          end,
        },
      }
    end,
  },
  {
    'Jezda1337/nvim-html-css',
    dependencies = {
      'hrsh7th/nvim-cmp',
      'nvim-treesitter/nvim-treesitter',
    },
    opts = {
      enable_on = {
        'html',
        'htmldjango',
        'tsx',
        'jsx',
        'erb',
        'svelte',
        'vue',
        'blade',
        'php',
        'templ',
        'astro',
      },
      handlers = {
        definition = {
          bind = 'gd',
        },
        hover = {
          bind = 'K',
          wrap = true,
          border = 'none',
          position = 'cursor',
        },
      },
      documentation = {
        auto_show = true,
      },
      style_sheets = {},
    },
  },
}

Related Plugins

• [x] nvim-cmp
• [ ] blink.cmp
• [ ] Other (please specify in Additional Information)

Additional Information

Not sure what is wrong with my configuration but I can't make it works with astro or react files.

[Jezda1337]

It works for me. You have to provide min config for reproducing the issue. HERE

[ricardoantonio]

Sorry, I think I’ll just change my entire setup. There are so many changes in Neovim and its plugins that it's making my life harder to keep everything updated with all these breaking changes. I think I’ll use LazyVim instead. I’ll try to make it work there, if possible.

[ricardoantonio]

Is the plugin able to automatically detect the project's stylesheets? It works with HTML files, but not with Astro components.

[Jezda1337]

@ricardoantonio it can automatically detect linked styles, for example in index.html if you have link to local or remote css stylesheet it will detect that and auto-completion for them will be available. but if you have smth like react and global styles that will be included in final build only, then you have to use style_seheet = {} globaly or localy, you can read about that here.

[ricardoantonio]

Yeah, it works with the link tag but only in the same file.

The issue might be related to how Astro scopes CSS imports. Since Astro bundles styles at build time, the plugin might need to:

1. Parse import "../styles/global.css" statements besides of the link tag.
2. Track CSS files in the src/styles folder
3. Track css styles in the component in the style tag.

The issue appears to affect React components too. Notably, the prior plugin version (v1) that you personally helped me implement correctly handled both Astro and React use cases.

[ricardoantonio]

but if you have smth like react and global styles that will be included in final build only, then you have to use style_seheet = {} globaly or localy,

Finally, it works! Yes, that was the solution.

Could you please add this to the documentation? It would be very helpful to know this when implementing your fantastic plugin. Thanks!

[Jezda1337]

@ricardoantonio sure, so linking ur styles in style_sheet table solve ur problem?

[ricardoantonio]

Yes, but only partially. Linking the styles in the style_sheet table solves the issue for components in the root directory (like src/pages/page1.astro), but not for nested folders (like src/pages/blog/post1.astro).

The path is relative to the component's directory, so:

For components in src/pages/, ../styles/global.css correctly points to src/styles/global.css. For components in src/pages/blog/, the same path resolves to src/pages/styles/global.css (which doesn't exist) and throws an ENOENT: no such file or directory: error This means it only works for top-level components but breaks for anything deeper. Hope that clarifies it!

I tried also with ./src/styles/global.css but resolves to pages/src/styles/global.css and pages/blog/src/styles/global.css

[Jezda1337]

Yes thanks for providing the details, this will help me to solve the issue. I will leave this issue open until I solve the issue.

[Jezda1337]

@ricardoantonio I have check the problem with the path you mention and for me everything works, my css path in src/pages/blog/index.html is like this: ../../styles/global.css and for src/pages/index.html it looks like this: ../styles/global.css. Everything works. Can you be more specific about ur case so i can take a look?

[Jezda1337]

No feedback so far i will close this, in case you have same issue pls reopen or create new one.