### Minimal nvim-html-css Setup Source: https://context7.com/jezda1337/nvim-html-css/llms.txt Use this minimal setup for HTML files only, without configuring global stylesheets. Ensure the plugin is installed and `require("html-css").setup()` is called during Neovim startup. ```lua -- Minimal setup — HTML only, no global stylesheets require("html-css").setup({ enable_on = { "html" }, }) ``` -------------------------------- ### Full nvim-html-css Setup with Customizations Source: https://context7.com/jezda1337/nvim-html-css/llms.txt Configure the plugin for multiple file types, including remote CDN and local stylesheets, and enable all interactive handlers. This setup requires `require("html-css").setup()` to be called during Neovim startup. ```lua -- Full setup — multiple file types, CDN + local stylesheets, all handlers enabled require("html-css").setup({ enable_on = { "html", "htmldjango", "tsx", "jsx", "erb", "svelte", "vue", "blade", "php", "templ", "astro", }, handlers = { definition = { bind = "gd" }, hover = { bind = "K", wrap = true, border = "none", -- "none"|"single"|"double"|"rounded"|"shadow" position = "cursor", -- "cursor" | "editor" }, }, documentation = { auto_show = true }, peek = { enabled = true, border = "rounded", position = "center", -- "center" | "cursor" width = 0.5, -- fraction of editor width height = 0.5, -- fraction of editor height focus = true, style = "minimal", }, style_sheets = { -- Remote CDN stylesheet (fetched once and cached) "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css", "https://cdnjs.cloudflare.com/ajax/libs/bulma/1.0.3/css/bulma.min.css", -- Local path relative to cwd "./src/styles/main.css", }, notify = false, -- set true to log GET/PARSED events for debugging }) ``` -------------------------------- ### Install nvim-html-css with lazy.nvim Source: https://github.com/jezda1337/nvim-html-css/blob/main/README.md Configure lazy.nvim to install the nvim-html-css plugin and its dependencies. This snippet enables the plugin for various file types and customizes handlers, documentation, peek behavior, and stylesheets. ```lua { "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, 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", "https://cdnjs.cloudflare.com/ajax/libs/bulma/1.0.3/css/bulma.min.css", "./index.css", -- `./` refers to the current working directory. }, }, } ``` -------------------------------- ### Setup Go to Definition Handler Source: https://context7.com/jezda1337/nvim-html-css/llms.txt Registers a keymap to jump to the CSS definition of a class or ID. Falls back to LSP definition if the cursor is not on a selector. Supports a picker for multiple definitions. ```lua -- Configured via handlers.definition in setup(): require("html-css.definition").setup({ bind = "gd" }) -- Keymap behaviour: -- Cursor on: class="btn-primary" → opens bootstrap.min.css at .btn-primary line -- Cursor on: class="my-custom" → opens src/styles/main.css at .my-custom line -- Multiple matches → vim.ui.select shows: -- "main.css:14" -- "tokens.css:3 [max-width: 768px]" -- Not a CSS selector → falls back to vim.lsp.buf.definition() ``` -------------------------------- ### Setup Neovim HTML & CSS Plugin Source: https://github.com/jezda1337/nvim-html-css/blob/main/README.md Configure the HTML & CSS support plugin for Neovim. Specify file types to enable support on, customize keybindings for definition and hover actions, enable auto-showing documentation, and configure peek window settings. Optionally, provide a list of external stylesheets for project-wide completions. ```lua vim.pack.add({src="https://github.com/jezda1337/nvim-html-css"}) -- example require("html-css").setup { enable_on = { "html" }, -- if you want custom opt for handlers 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", "https://cdnjs.cloudflare.com/ajax/libs/bulma/1.0.3/css/bulma.min.css", }, } ``` -------------------------------- ### Setup Hover Documentation Handler Source: https://context7.com/jezda1337/nvim-html-css/llms.txt Registers a keymap to display CSS definitions in a floating window. Appends hyphens to `iskeyword` for hyphenated class names. Falls back to LSP hover if no CSS definition is found. ```lua -- Configured via handlers.hover in setup(): require("html-css.hover").setup({ bind = "K", wrap = true, border = "rounded", position = "cursor", -- "cursor" uses relative="cursor"; anything else uses relative="editor" }) -- Hovering over class="btn-primary" renders a float containing: -- ```css -- .btn-primary { -- color: #fff; -- background-color: #0d6efd; -- border-color: #0d6efd; -- } -- ``` -- Media-wrapped classes are rendered as: -- ```css -- @media (max-width: 768px) { -- .container { -- padding: 0 1rem; -- } -- } -- ``` ``` -------------------------------- ### LSP.create_client Source: https://context7.com/jezda1337/nvim-html-css/llms.txt Creates or reuses the embedded html-css-lsp client and attaches it to a given buffer. The server handles completion, definition, hover, and more. It's typically started automatically. ```APIDOC ## LSP.create_client(opts, bufnr) ### Description Creates (or reuses) the embedded `html-css-lsp` client and attaches it to the given buffer. The server is a pure-Lua in-process implementation that responds to `initialize`, `textDocument/completion`, `textDocument/definition`, `textDocument/hover`, `completionItem/resolve`, and `shutdown`. It is started automatically by the `BufEnter` autocmd; there is no need to call it manually. ### Parameters * `opts` - Options for the LSP client. * `bufnr` - The buffer number to attach the client to. ### Request Example ```lua local LSP = require("html-css.lsp") LSP.create_client(opts, vim.api.nvim_get_current_buf()) ``` ``` -------------------------------- ### Create Embedded HTML-CSS LSP Client Source: https://context7.com/jezda1337/nvim-html-css/llms.txt Creates or reuses the embedded html-css-lsp client and attaches it to a buffer. The server is started automatically by the BufEnter autocmd. ```lua -- Manual client attachment (advanced — normally automatic) local LSP = require("html-css.lsp") LSP.create_client(opts, vim.api.nvim_get_current_buf()) ``` -------------------------------- ### require("html-css").setup(opts) Source: https://context7.com/jezda1337/nvim-html-css/llms.txt The main entry point for configuring the nvim-html-css plugin. It merges user options with defaults, loads project-local configurations, and registers necessary Neovim autocmds to enable the embedded LSP and stylesheet discovery. ```APIDOC ## `require("html-css").setup(opts)` ### Description The single entry point for the plugin. Merges user options with defaults, loads any project-local `.nvim.lua` configuration, registers `BufEnter`/`BufWritePre` autocmds that start the embedded LSP and trigger stylesheet discovery, and wires up all handlers. Must be called once during Neovim startup. ### Parameters * `opts` (table) - Optional. A table containing configuration options for the plugin. * `enable_on` (table of strings) - Optional. List of file types to enable the plugin on. * `handlers` (table) - Optional. Configuration for interactive handlers. * `definition` (table) - Configuration for Go to Definition handler. * `bind` (string) - Keybinding for the handler. * `hover` (table) - Configuration for Hover documentation handler. * `bind` (string) - Keybinding for the handler. * `wrap` (boolean) - Whether to wrap text. * `border` (string) - Border style for the hover window. * `position` (string) - Position of the hover window. * `documentation` (table) - Optional. Configuration for documentation display. * `auto_show` (boolean) - Whether to automatically show documentation. * `peek` (table) - Optional. Configuration for the Peek floating CSS source viewer. * `enabled` (boolean) - Whether to enable the peek feature. * `border` (string) - Border style for the peek window. * `position` (string) - Position of the peek window. * `width` (number) - Width of the peek window as a fraction of editor width. * `height` (number) - Height of the peek window as a fraction of editor height. * `focus` (boolean) - Whether to focus the peek window. * `style` (string) - Style of the peek window. * `style_sheets` (table of strings) - Optional. List of global stylesheets (local paths or remote URLs) to index. * `notify` (boolean) - Optional. Enable notifications for GET/PARSED events for debugging. ### Request Example ```lua -- Minimal setup — HTML only, no global stylesheets require("html-css").setup({ enable_on = { "html" }, }) -- Full setup — multiple file types, CDN + local stylesheets, all handlers enabled require("html-css").setup({ enable_on = { "html", "htmldjango", "tsx", "jsx", "erb", "svelte", "vue", "blade", "php", "templ", "astro", }, handlers = { definition = { bind = "gd" }, hover = { bind = "K", wrap = true, border = "none", -- "none"|"single"|"double"|"rounded"|"shadow" position = "cursor", -- "cursor" | "editor" }, }, documentation = { auto_show = true }, peek = { enabled = true, border = "rounded", position = "center", -- "center" | "cursor" width = 0.5, -- fraction of editor width height = 0.5, -- fraction of editor height focus = true, style = "minimal", }, style_sheets = { -- Remote CDN stylesheet (fetched once and cached) "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css", "https://cdnjs.cloudflare.com/ajax/libs/bulma/1.0.3/css/bulma.min.css", -- Local path relative to cwd "./src/styles/main.css", }, notify = false, -- set true to log GET/PARSED events for debugging }) ``` ``` -------------------------------- ### hover.setup Source: https://context7.com/jezda1337/nvim-html-css/llms.txt Registers a keymap to display hover documentation for CSS selectors. ```APIDOC ## `hover.setup(opts)` — Hover documentation handler Registers a normal-mode keymap that displays the full formatted CSS block for the selector under the cursor in a floating markdown window. Appends `-` to `iskeyword` so hyphenated class names like `btn-primary` are treated as a single word. Falls back to `vim.lsp.buf.hover()` when no CSS definition is found. ### Parameters - **opts** (table) - Configuration options. - **bind** (string) - The keymap to bind (e.g., `"K"`). - **wrap** (boolean) - Whether to wrap text in the hover window. - **border** (string) - The border style for the hover window (e.g., `"rounded"`). - **position** (string) - The position of the hover window (`"cursor"` or other). `"cursor"` uses `relative="cursor"`, anything else uses `relative="editor"`. ### Example ```lua -- Configured via handlers.hover in setup(): require("html-css.hover").setup({ bind = "K", wrap = true, border = "rounded", position = "cursor", -- "cursor" uses relative="cursor"; anything else uses relative="editor" }) -- Hovering over class="btn-primary" renders a float containing: -- ```css -- .btn-primary { -- color: #fff; -- background-color: #0d6efd; -- border-color: #0d6efd; -- } -- ``` -- Media-wrapped classes are rendered as: -- ```css -- @media (max-width: 768px) { -- .container { -- padding: 0 1rem; -- } -- } -- ``` ``` -------------------------------- ### definition.setup Source: https://context7.com/jezda1337/nvim-html-css/llms.txt Registers a keymap to jump to the definition of a CSS class or ID under the cursor. ```APIDOC ## `definition.setup(opts)` — Go to Definition handler Registers a normal-mode keymap that jumps to the CSS file and line where the class or ID under the cursor is defined. If multiple definitions exist (e.g. the same class overridden in multiple files), a `vim.ui.select` picker is shown. Falls back to `vim.lsp.buf.definition()` when the word is not an HTML/CSS selector. ### Parameters - **opts** (table) - Configuration options. - **bind** (string) - The keymap to bind (e.g., `"gd"`). ### Example ```lua -- Configured via handlers.definition in setup(): require("html-css.definition").setup({ bind = "gd" }) -- Keymap behaviour: -- Cursor on: class="btn-primary" → opens bootstrap.min.css at .btn-primary line -- Cursor on: class="my-custom" → opens src/styles/main.css at .my-custom line -- Multiple matches → vim.ui.select shows: -- "main.css:14" -- "tokens.css:3 [max-width: 768px]" -- Not a CSS selector → falls back to vim.lsp.buf.definition() ``` ``` -------------------------------- ### Project-local configuration via `.nvim.lua` Source: https://context7.com/jezda1337/nvim-html-css/llms.txt Allows per-project configuration by placing a `.nvim.lua` file in the project root. This file's `vim.g.html_css` table is deep-merged with the global configuration, enabling project-specific stylesheets and file-type lists. ```APIDOC ## Project-local configuration via `.nvim.lua` ### Description When a `.nvim.lua` file exists in the project root, `setup()` automatically `dofile()`s it and deep-merges the table stored in `vim.g.html_css` on top of the global config. This lets per-project stylesheets or file-type lists override the global Neovim configuration without changing it. ### Example Configuration (`.nvim.lua`) ```lua -- .nvim.lua (place in project root, e.g. ~/projects/my-app/.nvim.lua) vim.g.html_css = { enable_on = { "html", "jsx", "tsx" }, handlers = { definition = { bind = "gd" }, hover = { bind = "K", wrap = true, border = "rounded", position = "cursor" }, }, documentation = { auto_show = true }, peek = { enabled = true, position = "cursor" }, style_sheets = { "./src/styles/global.css", "./src/styles/tokens.css", "https://cdn.jsdelivr.net/npm/tailwindcss@3/dist/tailwind.min.css", }, } -- Expected effect: when Neovim opens any .html/.jsx/.tsx file inside this project, -- the above stylesheets are indexed and completions become available immediately. ``` ``` -------------------------------- ### parsers.css.setup Source: https://context7.com/jezda1337/nvim-html-css/llms.txt Parses a raw CSS string using Tree-sitter and returns structured CSS data. Optionally includes location information for selectors. ```APIDOC ## `parsers.css.setup(source_text, withLocation)` — CSS Tree-sitter parser Parses a raw CSS string using Tree-sitter and returns a structured `CSS_Data` table containing all `.class` selectors, `#id` selectors, and `@import` paths. When `withLocation` is `true`, each selector carries an LSP `Range` used for Go to Definition. ### Parameters - **source_text** (string) - The raw CSS string to parse. - **withLocation** (boolean) - If true, includes LSP `Range` information for each selector. ### Returns - `CSS_Data` table: A table containing `class`, `id`, and `imports`. - `class`: Table of class selectors. - `id`: Table of ID selectors. - `imports`: Table of `@import` paths. ### Example ```lua local css_parser = require("html-css.parsers.css") local css_source = [[ .container { max-width: 1200px; margin: 0 auto; } .btn-primary { color: #fff; background-color: #0d6efd; } #main-header { font-size: 2rem; font-weight: bold; } @media (max-width: 768px) { .container { padding: 0 1rem; } } ]] local data = css_parser.setup(css_source, true) -- data.class[1] → { type="class", label="container", -- block="{ max-width: 1200px; margin: 0 auto; }", -- media=nil, kind=13, -- range={ start={line=1,character=3}, ["end"]={line=1,character=12} } } -- data.class[2] → { label="btn-primary", ... } -- data.class[3] → { label="container", media="(max-width: 768px)", ... } -- data.id[1] → { type="id", label="main-header", block="{ font-size: 2rem; ... }", ... } -- data.imports → {} (populated when @import "file.css" rules are present) ``` ``` -------------------------------- ### Open CSS Source Peek Window Source: https://context7.com/jezda1337/nvim-html-css/llms.txt Trigger the CSS source peek functionality via a Neovim command or bind it to a keymap. The direct API allows for custom configuration of the peek window's appearance and behavior. ```lua vim.cmd("HtmlCssPeek") ``` ```lua vim.keymap.set("n", "cp", "HtmlCssPeek", { desc = "Peek CSS source" }) ``` ```lua local peek = require("html-css.peek") peek.open( { border = "rounded", position = "center", -- "center" | "cursor" width = 0.6, -- fraction of vim.o.columns height = 0.4, -- fraction of vim.o.lines style = "minimal", focus = true, }, "/home/user/project/src/styles/main.css", { start = { line = 41, character = 0 }, ["end"] = { line = 41, character = 12 } } ) ``` -------------------------------- ### Configure blink.cmp for LSP Source: https://github.com/jezda1337/nvim-html-css/blob/main/README.md Ensure blink.cmp is configured to use the lsp source for LSP integration. This is necessary for the nvim-html-css plugin to function as an LSP server. ```lua sources = { default = { "lsp", "path", "snippets", "buffer" }, } ``` -------------------------------- ### Project-local nvim-html-css Configuration Source: https://context7.com/jezda1337/nvim-html-css/llms.txt Override global Neovim configuration for specific projects by creating a `.nvim.lua` file in the project root. This allows per-project stylesheets and file-type lists to be applied automatically when Neovim opens files within that project. ```lua -- .nvim.lua (place in project root, e.g. ~/projects/my-app/.nvim.lua) vim.g.html_css = { enable_on = { "html", "jsx", "tsx" }, handlers = { definition = { bind = "gd" }, hover = { bind = "K", wrap = true, border = "rounded", position = "cursor" }, }, documentation = { auto_show = true }, peek = { enabled = true, position = "cursor" }, style_sheets = { "./src/styles/global.css", "./src/styles/tokens.css", "https://cdn.jsdelivr.net/npm/tailwindcss@3/dist/tailwind.min.css", }, } -- Expected effect: when Neovim opens any .html/.jsx/.tsx file inside this project, -- the above stylesheets are indexed and completions become available immediately. ``` -------------------------------- ### Project-Specific nvim-html-css Configuration Source: https://github.com/jezda1337/nvim-html-css/blob/main/README.md Configure nvim-html-css settings on a per-project basis using a .nvim.lua file. This allows for customized settings for specific projects, overriding global configurations. ```lua -- 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, border = "none", position = "cursor", } }, documentation = { auto_show = true, }, peek = { enabled = true, position = "cursor", }, style_sheets = { -- Project-specific stylesheets "./src/styles/main.css", "./src/styles/components.css", "https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css", } } ``` -------------------------------- ### Fetch Stylesheets with Fetcher Module Source: https://context7.com/jezda1337/nvim-html-css/llms.txt Dispatches a stylesheet fetch to either a remote URL or a local file. It recursively resolves and fetches CSS @import chains. ```lua local fetcher = require("html-css.fetcher") -- Fetch a remote CDN stylesheet (non-blocking, result stored in cache) fetcher:fetch( "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css", vim.api.nvim_get_current_buf(), true -- notify = true → vim.notify("GET: ", INFO) on success ) -- Fetch a local stylesheet; @import chains are followed automatically fetcher:fetch( "/home/user/project/src/styles/main.css", vim.api.nvim_get_current_buf(), false ) -- Resolve and fetch a list of @import paths relative to a parent file fetcher:fetch_imports( { "./tokens.css", "../base/reset.css" }, "/home/user/project/src/styles/main.css" ) ``` -------------------------------- ### Configure nvim-cmp for LSP Source: https://github.com/jezda1337/nvim-html-css/blob/main/README.md Ensure nvim-cmp is configured to use the nvim_lsp source for LSP integration. This is necessary for the nvim-html-css plugin to function as an LSP server. ```lua sources = { { name = "nvim_lsp" }, -- other sources... } ``` -------------------------------- ### parsers.html.setup Source: https://context7.com/jezda1337/nvim-html-css/llms.txt Parses the active buffer for HTML/JSX content to extract stylesheet links and inline style blocks. ```APIDOC ## `parsers.html.setup(bufnr)` — HTML/JSX stylesheet extractor Parses the active buffer with Tree-sitter (using the `html` parser for HTML/Vue/Svelte/Astro/ERB, or the `tsx` parser for JSX/TSX) and extracts: all `` hrefs (local or remote), all inline ` -- data.cdn → { "./styles/main.css", "https://cdn.example.com/lib.css" } -- data.raw_text → ".hero { color: red; }" -- For a JSX/TSX file containing: -- import "./App.css" -- import styles from "../shared/tokens.module.css" -- data.cdn → { "./App.css", "../shared/tokens.module.css" } -- data.raw_text → "" ``` ``` -------------------------------- ### Utility Functions for Path Resolution and CSS Formatting Source: https://context7.com/jezda1337/nvim-html-css/llms.txt The `utils` module provides functions for detecting remote/local paths, resolving paths relative to a base directory, extracting source names, and formatting CSS blocks into markdown. It also includes an asynchronous file reading function. ```lua local utils = require("html-css.utils") -- Detect source type utils.is_remote("https://cdn.example.com/lib.css") -- → true utils.is_local("./src/styles/main.css") -- → true ``` ```lua -- Resolve a path relative to a base directory, with public/static fallback local abs = utils.resolve_path("./tokens.css", "/home/user/project/src/styles") -- → "/home/user/project/src/styles/tokens.css" local abs2 = utils.resolve_path("/assets/theme.css") -- Tries: cwd/assets/theme.css, cwd/public/assets/theme.css, cwd/static/assets/theme.css ``` ```lua -- Extract a human-readable source name for completion item detail utils.get_source_name("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css") -- → "bootstrap.min" utils.get_source_name("/home/user/project/src/styles/main.css") -- → "main" ``` ```lua -- Format a Selector into a fenced markdown CSS block (used in hover/completion docs) utils.format_css({ label = "btn-primary", type = "class", block = "{ color: #fff; background-color: #0d6efd; }", media = nil, }) -- Returns: -- "```css\n.btn-primary {\n color: #fff;\n background-color: #0d6efd;\n}\n```" ``` ```lua -- With media query: utils.format_css({ label = "container", type = "class", block = "{ padding: 0 1rem; }", media = "(max-width: 768px)", }) -- Returns: -- "```css\n@media (max-width: 768px) {\n .container {\n padding: 0 1rem;\n }\n}\n```" ``` ```lua -- Async file read (libuv-based, callback receives full file content as string) utils.read_file("/path/to/style.css", function(content) print(content) end) ``` -------------------------------- ### Default nvim-html-css Configuration Source: https://github.com/jezda1337/nvim-html-css/blob/main/README.md The default configuration for the nvim-html-css plugin. This can be overridden by project-specific configurations. ```lua { 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", -- "center" | "cursor" width = 0.5, -- fraction of editor width (0.0–1.0) height = 0.5, -- fraction of editor height (0.0–1.0) focus = true, -- whether the float steals focus on open style = "minimal", }, style_sheets = {} } ``` -------------------------------- ### utils module Source: https://context7.com/jezda1337/nvim-html-css/llms.txt Provides utility functions for path resolution, remote/local file detection, asynchronous file reading, and CSS block formatting, used internally by other plugin features. ```APIDOC ## `utils` — path resolution and CSS formatting helpers Internal utility module exposing path resolution, remote/local detection, async file reading, and the CSS block formatter used by both hover and completion documentation. ```lua local utils = require("html-css.utils") -- Detect source type utils.is_remote("https://cdn.example.com/lib.css") -- → true utils.is_local("./src/styles/main.css") -- → true -- Resolve a path relative to a base directory, with public/static fallback local abs = utils.resolve_path("./tokens.css", "/home/user/project/src/styles") -- → "/home/user/project/src/styles/tokens.css" local abs2 = utils.resolve_path("/assets/theme.css") -- Tries: cwd/assets/theme.css, cwd/public/assets/theme.css, cwd/static/assets/theme.css -- Extract a human-readable source name for completion item detail utils.get_source_name("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css") -- → "bootstrap.min" utils.get_source_name("/home/user/project/src/styles/main.css") -- → "main" -- Format a Selector into a fenced markdown CSS block (used in hover/completion docs) utils.format_css({ label = "btn-primary", type = "class", block = "{ color: #fff; background-color: #0d6efd; }", media = nil, }) -- Returns: -- "```css\n.btn-primary {\n color: #fff;\n background-color: #0d6efd;\n}\n```" -- With media query: utils.format_css({ label = "container", type = "class", block = "{ padding: 0 1rem; }", media = "(max-width: 768px)", }) -- Returns: -- "```css\n@media (max-width: 768px) {\n .container {\n padding: 0 1rem;\n }\n}\n```" -- Async file read (libuv-based, callback receives full file content as string) utils.read_file("/path/to/style.css", function(content) print(content) end) ``` ``` -------------------------------- ### health.check() Source: https://context7.com/jezda1337/nvim-html-css/llms.txt Implements Neovim's `:checkhealth html-css` interface to verify plugin health, including the presence and version of `curl` and internet reachability. ```APIDOC ## `health.check()` — plugin health report Implements Neovim's `:checkhealth html-css` interface. Verifies that `curl` is present on `$PATH`, that its major version is 8, and that the internet is reachable. ```lua -- Run from Neovim command line: -- :checkhealth html-css -- Produces output like: -- nvim-html-css report -- OK curl found on path -- OK curl version is good (curl 8.7.1 ...) -- OK site is accessible -- On failure: -- ERROR curl not found on path -- ERROR curl must be 8.x.x, but got 7.88.0 -- ERROR site is not accessible ``` ``` -------------------------------- ### Bind :HtmlCssPeek command Source: https://github.com/jezda1337/nvim-html-css/blob/main/README.md Set a custom keybinding for the :HtmlCssPeek command to quickly open CSS source files in a floating window. ```lua vim.keymap.set("n", "cp", "HtmlCssPeek", { desc = "Peek CSS source" }) ``` -------------------------------- ### Manage Cache Sources and Cleanup Source: https://context7.com/jezda1337/nvim-html-css/llms.txt Checks if a remote source has already been fetched and links sources to a buffer. Also provides a function to clean up cache entries for a closed buffer. ```lua local cache = require("html-css.cache") -- Check if a remote source has already been fetched (prevents duplicate curl calls) local already_fetched = cache:has_source( "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" ) -- → true / false -- Register which sources belong to a buffer (called automatically after fetch) cache:link_sources(bufnr, { "/home/user/project/src/styles/global.css", "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css", }) -- Free all cache entries for a closed buffer cache:cleanup(bufnr) -- called automatically via BufDelete autocmd ``` -------------------------------- ### fetcher:fetch Source: https://context7.com/jezda1337/nvim-html-css/llms.txt Dispatches a stylesheet fetch to either `_fetch_remote` or `_fetch_local`. It parses the CSS content, stores it in the cache, and recursively resolves `@import` chains. ```APIDOC ## fetcher:fetch(source, bufnr, notify) ### Description Dispatches a stylesheet fetch to either `_fetch_remote` (via async `curl`) or `_fetch_local` (via async `uv.fs_open`). After parsing the CSS content with the Tree-sitter CSS parser, it stores the result in the shared cache. CSS `@import` chains are resolved and fetched recursively through `_process_imports`. ### Parameters * `source` - The URL or path of the stylesheet to fetch. * `bufnr` - The buffer number associated with the stylesheet. * `notify` - A boolean indicating whether to notify the user on success. ### Request Example ```lua local fetcher = require("html-css.fetcher") -- Fetch a remote CDN stylesheet fetcher:fetch("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css", vim.api.nvim_get_current_buf(), true) -- Fetch a local stylesheet fetcher:fetch("/home/user/project/src/styles/main.css", vim.api.nvim_get_current_buf(), false) ``` ``` ```APIDOC ## fetcher:fetch_imports(paths, parent_path) ### Description Resolves and fetches a list of `@import` paths relative to a parent file. ### Parameters * `paths` - A list of import paths. * `parent_path` - The path of the parent file from which the imports are relative. ### Request Example ```lua local fetcher = require("html-css.fetcher") fetcher:fetch_imports({ "./tokens.css", "../base/reset.css" }, "/home/user/project/src/styles/main.css") ``` ``` -------------------------------- ### :HtmlCssPeek user command / peek.open(cfg, filepath, range) Source: https://context7.com/jezda1337/nvim-html-css/llms.txt Registers the :HtmlCssPeek command to resolve LSP definitions for selectors and open the CSS source file in an editable floating window. The window closes on 'q'/'Esc' or 'WinLeave', but not if the buffer has unsaved changes. ```APIDOC ## :HtmlCssPeek user command / peek.open(cfg, filepath, range) — CSS source peek Registers the `:HtmlCssPeek` command (when `peek.enabled = true`). Executing it resolves the LSP definition for the selector under the cursor, then opens the CSS source file in an editable floating window positioned at the exact definition line. The window closes on `q`/`` or `WinLeave`, but refuses to close if the buffer has unsaved changes. ```lua -- Trigger via command: vim.cmd("HtmlCssPeek") -- Or bind in your own config: vim.keymap.set("n", "cp", "HtmlCssPeek", { desc = "Peek CSS source" }) -- Direct API (advanced): local peek = require("html-css.peek") peek.open( { border = "rounded", position = "center", -- "center" | "cursor" width = 0.6, -- fraction of vim.o.columns height = 0.4, -- fraction of vim.o.lines style = "minimal", focus = true, }, "/home/user/project/src/styles/main.css", { start = { line = 41, character = 0 }, ["end"] = { line = 41, character = 12 } } ) -- Opens a float displaying main.css, cursor centred on line 42. -- Keys inside float: q / → close (only if no unsaved changes) ``` ``` -------------------------------- ### Parse CSS with Tree-sitter Source: https://context7.com/jezda1337/nvim-html-css/llms.txt Parses raw CSS strings to extract class selectors, ID selectors, and @import paths. Set `withLocation` to true to include LSP `Range` for Go to Definition. ```lua local css_parser = require("html-css.parsers.css") local css_source = [[ .container { max-width: 1200px; margin: 0 auto; } .btn-primary { color: #fff; background-color: #0d6efd; } #main-header { font-size: 2rem; font-weight: bold; } @media (max-width: 768px) { .container { padding: 0 1rem; } } ]] local data = css_parser.setup(css_source, true) -- data.class[1] → { type="class", label="container", -- block="{ max-width: 1200px; margin: 0 auto; }", -- media=nil, kind=13, -- range={ start={line=1,character=3}, ["end"]={line=1,character=12} } } -- data.class[2] → { label="btn-primary", ... } -- data.class[3] → { label="container", media="(max-width: 768px)", ... } -- data.id[1] → { type="id", label="main-header", block="{ font-size: 2rem; ... }", ... } -- data.imports → {} (populated when @import "file.css" rules are present) ``` -------------------------------- ### Check Plugin Health Source: https://context7.com/jezda1337/nvim-html-css/llms.txt Run the `:checkhealth html-css` command to verify the plugin's dependencies and connectivity. This command checks for the presence and version of `curl` and network accessibility. ```lua -- Run from Neovim command line: -- :checkhealth html-css ``` ```text -- Produces output like: -- nvim-html-css report -- OK curl found on path -- OK curl version is good (curl 8.7.1 ...) -- OK site is accessible -- On failure: -- ERROR curl not found on path -- ERROR curl must be 8.x.x, but got 7.88.0 -- ERROR site is not accessible ``` -------------------------------- ### Query CSS Selectors from Cache Source: https://context7.com/jezda1337/nvim-html-css/llms.txt Queries the in-memory cache for CSS selectors (classes or IDs) associated with a given buffer. Local files are watched for automatic cache updates. ```lua local cache = require("html-css.cache") -- After a stylesheet has been fetched/parsed, query its selectors for a buffer: local bufnr = vim.api.nvim_get_current_buf() local classes = cache:get_classes(bufnr) -- Returns: Selector[] -- Each Selector: { label="btn-primary", block="{ color:#fff; ... }", type="class", -- source_name="/path/to/bootstrap.min.css", source_type="remote", -- range={ start={line=42,character=1}, ["end"]={line=42,character=12} } } local ids = cache:get_ids(bufnr) -- Returns: Selector[] — same shape but type="id" ``` -------------------------------- ### cache Source: https://context7.com/jezda1337/nvim-html-css/llms.txt An in-memory data store for parsed CSS. It holds parsed data keyed by file path and a per-buffer map of active sources. Local files are watched for changes. ```APIDOC ## cache:get_classes(bufnr) ### Description Queries the cache for CSS selectors of type 'class' associated with a given buffer. ### Parameters * `bufnr` - The buffer number to query. ### Response * Returns: `Selector[]` - An array of selector objects, each containing `label`, `block`, `type`, `source_name`, `source_type`, and `range`. ### Request Example ```lua local cache = require("html-css.cache") local bufnr = vim.api.nvim_get_current_buf() local classes = cache:get_classes(bufnr) ``` ``` ```APIDOC ## cache:get_ids(bufnr) ### Description Queries the cache for CSS selectors of type 'id' associated with a given buffer. ### Parameters * `bufnr` - The buffer number to query. ### Response * Returns: `Selector[]` - An array of selector objects, similar to `get_classes`. ### Request Example ```lua local cache = require("html-css.cache") local bufnr = vim.api.nvim_get_current_buf() local ids = cache:get_ids(bufnr) ``` ``` ```APIDOC ## cache:has_source(source) ### Description Checks if a given remote source has already been fetched and cached. ### Parameters * `source` - The URL of the remote source to check. ### Response * Returns: `boolean` - `true` if the source is in the cache, `false` otherwise. ### Request Example ```lua local cache = require("html-css.cache") local already_fetched = cache:has_source("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css") ``` ``` ```APIDOC ## cache:link_sources(bufnr, sources) ### Description Registers which sources are associated with a given buffer. This is typically called automatically after a stylesheet is fetched. ### Parameters * `bufnr` - The buffer number. * `sources` - A list of source paths or URLs. ### Request Example ```lua local cache = require("html-css.cache") cache:link_sources(vim.api.nvim_get_current_buf(), { "/home/user/project/src/styles/global.css", "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css", }) ``` ``` ```APIDOC ## cache:cleanup(bufnr) ### Description Frees all cache entries associated with a closed buffer. This is typically called automatically via the `BufDelete` autocmd. ### Parameters * `bufnr` - The buffer number to clean up. ### Request Example ```lua local cache = require("html-css.cache") cache:cleanup(vim.api.nvim_get_current_buf()) ``` ``` -------------------------------- ### Extract Stylesheets from HTML/JSX Buffers Source: https://context7.com/jezda1337/nvim-html-css/llms.txt Parses the active buffer to extract CSS stylesheets from `` tags and inline ` -- data.cdn → { "./styles/main.css", "https://cdn.example.com/lib.css" } -- data.raw_text → ".hero { color: red; }" -- For a JSX/TSX file containing: -- import "./App.css" -- import styles from "../shared/tokens.module.css" -- data.cdn → { "./App.css", "../shared/tokens.module.css" } -- data.raw_text → "" ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.