cmp-tw2css

한국어 문서 읽으러 가기

A source for nvim-cmp to convert tailwindcss classes to pure css codes. It uses treesitter to find out whether any css code block exists in the code and loads the completion source.

Setup

Prerequisites:

cmp-tw2css uses nvim-cmp to provide the code. You first need to have nvim-cmp installed in your neovim. To install nvim-cmp, please visit the nvim-cmp Github repo.

Since version 1.0.0, cmp-tw2css uses css parser to detect if the cursor is inside the css code block. To fully use this feature, you need to install the css parser through nvim-treesitter. For more information, please refer to nvim-treesitter.

Installation

To install cmp-tw2css, I recommend using packer.nvim.

use({
  "hrsh7th/nvim-cmp",
  requires = {
    "jcha0713/cmp-tw2css",
  },
})

And to add source, go to nvim-cmp configuration and add the following

require('cmp').setup {
  -- ...
  sources = {
    { name = 'cmp-tw2css' },
    -- other sources ...
  },
  -- ...
}

Usage

Using cmp-tw2css is simple. Open any file that contains css code blocks and start typing tailwindcss classes that you want to convert into css codes.

Example

*.css:

body {
  /* flex -> display: flex; */
  /* p-6 -> padding: 1.5rem; */
  /* ... */
}

*.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      body {
        /* m-2 -> margin: 0.5rem; */
      }
    </style>
  </head>
  <body>
    <!-- body -->
  </body>
</html>

Configuration

require('cmp-tw2css').setup({ ... })

`fallback`

type: boolean default: true

{
  fallback = true
}

Determines whether to load the completion items when there is no treesitter parser. If this is set to true, you are allowing cmp-tw2css to load the completion items regardless of your cursor position. If it is set to false, then it simply does not load anything when there is no css parser.

Limitation

There are a number of limitations to cmp-tw2css. First, the source of this plugin is a result of web scraping. This means that you might find some items are missing while using. If this happens to you, please let me know by submitting an issue so that I can update the source accordingly. Another downside is that it can't be dynamically generated and only provides the code from the official website.

Currently cmp-tw2css does not automatically add tabs for the additional lines when the insert text is more than one line. And also when there are more than one colon(:) in a line, cmp-tw2css cannot properly load its completion source.

Roadmap

Load the source only when the cursor is inside the code block
Provide ways to configure with treesitter
Show documentation when selecting an item
Provide the completion source using LSP functionality

jcha0713/cmp-tw2css