DOCSEARCHbyAlgolia
Submit Docs

nvim-html-css

repository·main·Indexed 42 days ago

https://github.com/jezda1337/nvim-html-css

CSS IntelliSense for HTML and component files in Neovim. It provides autocompletion for IDs and classes by automatically detecting linked/inline styles or using explicitly configured global stylesheets. Operates as an LSP server (html-css-lsp) and integrates with nvim-cmp and blink.cmp. Features include 'Go to Definition', 'Hover', and a 'Peek' floating window to view and edit CSS sources. Requires Neovim 0.10+ and curl 8.7+.

Tokens
1.9K
Snippets
4
Records
7
Agent score
3%

What's inside nvim-html-css

  1. How style discovery works

    main

    The plugin provides CSS IntelliSense by discovering styles in two ways:

    1. Automatic Detection (Buffer-Specific): The plugin parses the current file for <link rel="stylesheet" href="..."> tags (local or remote) and <style>...</style> blocks. These completions are only available in the file where they are found.

    2. Explicit Configuration (style_sheets): For global styles, CSS frameworks (Tailwind, Bootstrap), or styles processed by a bundler that aren't explicitly linked in every file, you must add them to the style_sheets array in your configuration. These styles will be available for autocompletion across all filetypes listed in enable_on.

  2. Use project-specific configuration with .nvim.lua

    main

    To apply different settings for a specific project (e.g., different style_sheets or enable_on filetypes), create a .nvim.lua file in your project root.

    Set the configuration using the global variable vim.g.html_css. This configuration takes precedence over your global Neovim settings.

    -- .nvim.lua in project root
vim.g.html_css = {
  enable_on = { "html", "jsx" },
  style_sheets = {
    "./src/styles/main.css",
    "https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css",
  },
  -- ... other options
}
    -- Project-specific HTML/CSS configuration
vim.g.html_css = {
  enable_on = { "html", "jsx" },  -- File types for this project only
  handlers = {
    definition = { bind = "gd" },
    hover = { bind = "K", wrap = true, position = "cursor" },
  },
  documentation = { auto_show = true },
  peek = { enabled = true, position = "cursor" },
  style_sheets = {
    "./src/styles/main.css",
    "./src/styles/components.css",
    "https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css",
  }
}

  3. Integrate with nvim-cmp or blink.cmp

    main

    The plugin operates as an LSP server (html-css-lsp).

    nvim-cmp

    Ensure cmp-nvim-lsp is installed and the nvim_lsp source is enabled in your nvim-cmp setup:

    sources = {
  { name = "nvim_lsp" },
  -- other sources...
}

    blink.cmp

    Ensure the lsp source is enabled in your blink.cmp configuration:

    sources = {
  default = { "lsp", "path", "snippets", "buffer" },
}

  4. Install nvim-html-css

    main

    You can install nvim-html-css using the native Neovim package manager or lazy.nvim. The plugin requires Neovim 0.10+ and curl 8.7+.

    Native Neovim PM

        vim.pack.add({src="https://github.com/jezda1337/nvim-html-css"})
    require("html-css").setup {
        enable_on = { "html" },
        -- ... other options
    }

    Lazy.nvim

    {
  "Jezda1337/nvim-html-css",
  dependencies = {
    "nvim-treesitter/nvim-treesitter",
  },
  opts = {
    enable_on = {"html", "tsx", "jsx"}, -- add your desired filetypes
    -- ... other options
  },
}
    {
  "Jezda1337/nvim-html-css",
  dependencies = {
    "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, position = "cursor" },
    },
    documentation = { auto_show = true },
    peek = { enabled = true, style = "minimal" },
    style_sheets = {
      "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css",
      "./index.css",
    },
  },
}

  5. Configure nvim-html-css options

    main

    The plugin is configured via the setup() function. Key configuration options include:

    • enable_on: A list of filetypes where the plugin should be active (e.g., {"html", "tsx"}).
    • handlers: Configuration for built-in actions:
      • definition: Sets the keybinding for 'Go to Definition' via bind.
      • hover: Sets the keybinding for 'Hover' via bind, and options like wrap, border, and position.
    • documentation: Controls autocompletion documentation via auto_show (boolean).
    • peek: Configures the floating window for the Peek feature. Options include enabled, border, position ("center" | "cursor"), width (0.0–1.0), height (0.0–1.0), focus, and style.
    • style_sheets: An array of strings containing paths to local CSS files (using ./ for current working directory) or remote URLs to be included in autocompletion.
    require("html-css").setup {
    enable_on = { "html" },
    handlers = {
      definition = { bind = "gd" },
      hover = { bind = "K", wrap = true, border = "none", position = "cursor" },
    },
    documentation = { auto_show = true },
    peek = {
        enabled = true,
        border = "rounded",
        position = "center",
        width = 0.5,
        height = 0.5,
        focus = true,
        style = "minimal",
    },
    style_sheets = {
        "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css",
        "./index.css",
    },
}

  6. Use Peek to view CSS source

    main

    The Peek feature opens the CSS source file in a floating window at the definition of the class or ID under your cursor. The window is editable; if you have unsaved changes, the window will prevent closing until you save or discard them.

    To use it, you can call the command :HtmlCssPeek. You can map it to a keybinding:

    vim.keymap.set("n", "<leader>cp", "<cmd>HtmlCssPeek<CR>", { desc = "Peek CSS source" })

    Inside the Peek window:

    • q: Close float
    • <Esc>: Close float

  7. Keybindings for Definition, Hover, and Peek

    main

    The plugin provides the following default behaviors (which can be customized in handlers):

    • Go to Definition: Defaults to gd. If the class/ID is not found in the plugin's index, it falls back to the standard LSP definition via vim.lsp.buf.definition().
    • Hover: Defaults to K. If the class/ID is not found, it falls back to the standard LSP hover via vim.lsp.buf.hover().
    • Peek: Accessible via the :HtmlCssPeek command. Opens a floating window showing the CSS source.