#class-name #completion #web #jsx #definition #go #hover

bin+lib cnls

Class Name Language Server for web frontend projects

3 releases

0.1.2 Mar 17, 2024
0.1.1 Mar 16, 2024
0.1.0 Mar 16, 2024

#6 in #class-name

GPL-2.0 license

41KB
976 lines

crates.io npm version

CNLS

Class Name Language Server.

Features:

  • Hover
  • Go To Definition
  • Completions

Demo

https://github.com/Gnarus-G/cnls/assets/37311893/84af54c0-1695-492c-8081-4bd5d437c901

Install

cargo install cnls
npm install -g cnls

Usage (nvim)

local nvim_lsp = require("lspconfig");
local configs = require 'lspconfig.configs'

-- cnls setup
if not configs.cnls then
  configs.cnls = {
    default_config = {
      cmd = { "cnls" },
      filetypes = { "javascript", "javascriptreact", "javascript.jsx", "typescript", "typescriptreact", "typescript.tsx" }
    },
  }
end

nvim_lsp.cnls.setup({
  root_dir = nvim_lsp.util.root_pattern("package.json"),
  capabilities = lsp_capabilities,
  settings = {
    cnls = {
      scopes = { "att:className,class", "fn:createElement" }
    }
  }
})

About Scopes

You may have tailwind classes in other places besides className="...", or even cva(...). For examples, the classes prop in mui components.

You can define places for cnls to look for classes with the cnls.scopes settings. The syntax for a scope is :<...values>

Variants are:

  • fn to target a function call (e.g 'fn:cva')
  • att to target a jsx attribute (e.g. 'att:className')
  • prop to target a jsx attribute (e.g. 'prop:className')

Values are strings, and you can use a wildcard * at the begining or the end. For example 'att:className att:*ClassName' will find classes all of these attributes

<Btn
  className="w-10 bg-red"
  iconClassName="text-black"
  textClassName="text-xl"
/>

By default cnls uses 'att:className,class fn:createElement'.

Dependencies

~28–43MB
~688K SLoC