Skip to content

Latest commit

 

History

3 Commits

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 
 
 

Repository files navigation

maud-css.nvim 🦀✨

A Neovim plugin for the Maud HTML template engine that provides CSS autocomplete, go-to-definition, hover previews, and reference finding directly inside html! {} macros. It operates without a dedicated CSS language server, using a fallback architecture inspired by nvim-html-css.

⚡ Requirements

  • ripgrep (rg): This plugin relies strictly on ripgrep for instantaneous file scanning. It completely ignores .venv and target directories natively to ensure Neovim never freezes, even in massive multi-project monorepos.

✨ Features

  • Context-Aware Autocomplete: Intelligent nvim-cmp source that dynamically indexes all stylesheets in your assets/ directory. It knows exactly what you are typing: suggesting .classes in class attributes or dot notation, and exclusively suggesting --tokens when you are inside a var() function.
  • Transparent LSP Fallback: Built with advanced heuristics to recognize standard Rust code (like let, use, or field access like css.route). If the cursor is on Rust code—or if a CSS class/token simply isn't found—the plugin silently and instantly hands the request back to rust-analyzer.
  • Go To Definition (vim.lsp.buf.definition()): Intercepts Neovim's native LSP definition command. Triggering it on a CSS class or CSS token inside a Rust file instantly jumps to the .css file and line where it is defined.
  • Find References (vim.lsp.buf.references()): Bidirectional usage tracking for both classes and variables.
    • From CSS: Trigger references on a class or token in your .css file to populate a list with every Rust file that uses it.
    • From Rust: Trigger references on a class or token in your .rs file to see everywhere else that component/utility is used across your codebase.
  • Hover / Peek (vim.lsp.buf.hover()): Intercepts Neovim's native LSP hover command. Triggering it on a CSS class or token opens a floating window showing the exact CSS block or token declaration.

📦 Installation

Install using lazy.nvim.

{
  "bryanmaina/maud-css.nvim",
  dependencies = { "hrsh7th/nvim-cmp" },
  config = function()
    require("maud_css").setup()
  end,
}

or for development:

{
	dir = "~/path/to/maud-css.nvim",
	name = "maud-css",
	dependencies = { "hrsh7th/nvim-cmp" },
	config = function()
		require("maud_css").setup()
	end,
}

🚀 Configuration

After calling setup(), you must tell nvim-cmp to actively use the newly registered source. Add "maud_css" to your sources list in your existing cmp configuration:

local cmp = require("cmp")

cmp.setup({
  -- ... your other cmp settings ...
  sources = cmp.config.sources({
    { name = "nvim_lsp" },
    { name = "maud_css" }, -- Add this line!
    { name = "luasnip" },
  }, {
    { name = "buffer" },
  }),
})

⌨️ Usage

There are no custom keymaps to memorize. The plugin hooks directly into Neovim's core LSP API, respecting whatever keybinds you already use for your language servers (e.g., gd for definition, gr for references, K for hover).

Inside a .rs file, within an html! {} macro:

  1. Type div. or class=" to trigger the nvim-cmp CSS class autocomplete menu.
  2. Type style="color: var( to trigger the CSS token autocomplete menu.
  3. Place your cursor over a class (like .btn-primary) or token (like --color-bg) and trigger your Hover command to see the CSS block in a floating window.
  4. Place your cursor over a class or token and trigger your Definition command to jump to the CSS file where it is defined.
  5. Place your cursor over a class or token and trigger your References command to open a list showing every Rust and CSS file utilizing it.
  6. Place your cursor over a standard Rust variable (like css.route) and trigger any LSP command—rust-analyzer handles it perfectly!

Inside a .css file:

  1. Place your cursor over a CSS class or token and trigger your References command to open a list showing every file where you applied it.

🙏 Acknowledgements

About

A Neovim plugin for the Maud HTML template engine that provides CSS autocomplete, go-to-definition, hover previews, and reference finding directly inside `html! {}` macros.

Resources

Stars

2 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages