coc-scssmodules

coc-scssmodules

coc.nvim extension for autocompletion and go-to-definition functionality for CSS Modules.

Note: The go-to-definition functionality is still a bit iffy especially with parent selectors. This really just works with single word selectors at this time.

Installation

:CocInstall coc-scssmodules

If you are using vim's plugin manager for coc-extensions, here's an example with vim-plug:

Plug 'mlaursen/coc-scssmodules', {'do': 'yarn install && yarn build'}

Configuration

This extension supports two configuration properties:

{
  "cssmodules.camelCase": {
    "type": ["boolean", "string"],
    "enum": [true, false, "dashes"],
    "default": false,
    "description": "Boolean if the suggestions should be converted to camelCase if you use kebab-case in css files. Should also work with sass parent selectors"
  },
  "cssmodules.hintMessage": {
    "type": "string",
    "default": "string (cssmodule)",
    "description": "The hint message to display next to an autocomplete suggestion from a css module"
  }
}

Acknowledgements

This extension is essentially a port of vscode-css-modules-plugin and coc-cssmodules.

Differences with coc-cssmodules

The main reason I created this implementation was to support parent selectors within scss since I still like BEM for describing different states. If parent selectors (&) are not a concern, you should use the "official" coc-cssmodules instead.

Another small difference is that the configuration will be correctly typed when using :CocConfig and show warnings when the camelCase option is valid or invalid. (This could get ported into the "official" module as well though)

Finally, there is another configuration setting that can be used to show hint details when the autocompletion items if you do not like the default value of string (cssmodule).