cssmodules-language-server

Language server for autocompletion and go-to-definition functionality for css modules.

Features:

• definition jumps to class name under cursor.
• implementation (works the same as definition).
• hover provides comments before the class name with direct declarations within the class name.

The supported languages are css(postcss), sass and scss. styl files are parsed as regular css.

Installation

npm install --global cssmodules-language-server

Configuration

See if your editor supports language servers or if there is a plugin to add support for language servers

Neovim

Example uses nvim-lspconfig

require'lspconfig'.cssmodules_ls.setup {
    -- provide your on_attach to bind keymappings
    on_attach = custom_on_attach,
    -- optionally
    init_options = {
        camelCase = 'dashes',
    },
}

Known issue: if you have multiple LSP that provide hover and go-to-definition support, there can be races(example typescript and cssmodules-language-server work simultaneously). As a workaround you can disable definition in favor of implementation to avoid conflicting with typescript's go-to-definition.

require'lspconfig'.cssmodules_ls.setup {
    on_attach = function (client)
        -- avoid accepting `go-to-definition` responses from this LSP
        client.resolved_capabilities.goto_definition = false
        custom_on_attach(client)
    end,
}

coc.nvim

let cssmodules_config = {
\ "command": "cssmodules-language-server",
\ "initializationOptions": {"camelCase": "dashes"},
\ "filetypes": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
\ "requireRootPattern": 0,
\ "settings": {}
\ }
coc#config('languageserver.cssmodules', cssmodules_config)

Initialization options

camelCase

If you write kebab-case classes in css files, but want to get camelCase complete items, set following to true.

{
   "camelCase": true
}

You can set the cssmodules.camelCase option to true, "dashes" or false(default).
| Classname in css file | true | dashes | false(default) | | --------------------- | ----------------- | --------------- | ----------------- | | .button | .button | .button | .button | | .btn__icon--mod | .btnIconMod | .btn__iconMod | .btn__icon--mod |

Acknowledgments

This plugin was extracted from coc-cssmodules as a standalone language server.