nvim-html-css icon indicating copy to clipboard operation
nvim-html-css copied to clipboard

CSS Intellisense for HTML

☕ Neovim HTML, CSS Support

[!WARNING] This plugin is under construction.

Neovim CSS Intellisense for HTML

HTML id and class attribute completion for Neovim written in Lua.


image

✨ Features

  • HTML id and class attribute completion.
  • Supports linked and internal style sheets.
  • Supports additional external style sheets.

⚡️ Requirements

  • Neovim 0.10+
  • curl 8.7+

📦 Installation

Lazy

return require("lazy").setup({
    {
        "hrsh7th/nvim-cmp",
        dependencies = {
            "Jezda1337/nvim-html-css" -- add it as dependencies of `nvim-cmp` or standalone plugin
        },
        opts = {
            sources = {
                {
                    name = "html-css",
                    option = {
                        enable_on = { "html" }, -- html is enabled by default
                        notify = false,
                        documentation = {
                            auto_show = true, -- show documentation on select
                        },
                        -- add any external scss like one below
                        style_sheets = {
                            "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css",
                            "https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css",
                        },
                    },
                },
            },
        },
    },
})

⚙ Default Configuration

option = {
    enable_on = { "html" },
    notify = false,
    documentation = {
        auto_show = true,
    },
    style_sheets = {}
}

🤩 Pretty Menu Items

Setting the formatter this way, you will get the file name with an extension in your cmp menu, so you know from which file that class is coming.

require("cmp").setup({
    -- ...
    formatting = {
        format = function(entry, vim_item)
            local source = entry.source.name
            if source == "html-css" then
                vim_item.menu = "[" .. entry.completion_item.provider .. "]" or "[html-css]"
            end
            return vim_item
        end
    }
    -- ...
})