Running coc-tailwindcss causes part of vue script tag to be corrupted

[raveltan]

Describe the bug by installing coc-tailwindcss alongside coc-vue and prettier, some part of the code (esspecially those near the vue's script tag is corrupted)

To Reproduce Steps to reproduce the behavior:

• Install coc-tailwindcss
• modify a part of the code
• save (in my case it autoformats)
• some part of the code will be corrupted

Expected behavior The code should not be corrupted

Desktop (please complete the following information):

• OS: Pop OS 20.10

[AdamBD]

Just figured out that this was the plugin causing the issues and not all the other formatters!

Big upvote from me on this problem.

[AdamBD]

@raveltan you find a solution to this?

[raveltan]

@AdamBD not yet, the only way I'm able to get around this problem is undo the formating when the code is corrupted and alter the original piece a bit and reformat, 80-90% of the time it will format just fine.

But i haven't fine any other solution

[thiagodebastos]

I can report that the same thing happens with React. This took me over an hour to find :sweat:

For now I have disabled format on save in coc-settings.json:

    "tailwindCSS.headwind.runOnSave": false,

You can trigger the sort with something like:

command! -nargs=0 Tw :call CocAction('runCommand', 'tailwindCSS.headwind.sortTailwindClasses')                                                                                        

PS I am also on Pop OS :dancers:

[drocha87]

I'm having the same issue, the only solution is to do what @thiagodebastos suggested.

NVIM v0.6.0-dev+107-g3d1835967
Build type: Release
LuaJIT 2.1.0-beta3
Coc Version 0.0.80

I installed coc-tailwindcss through the command :CocInstall coc-tailwindcss

Coc Config

{
  "coc.preferences.formatOnSaveFiletypes": ["json", "css", "html", "vue"],
  "css.lint.unknownAtRules": "ignore",
  "tailwindCSS.headwind.runOnSave": false,
  "tailwindCSS.cssLanguages": [
    "css",
    "less",
    "postcss",
    "sass",
    "scss",
    "stylus",
    "vue"
  ],
  "tailwindCSS.jsLanguages": [
    "javascript",
    "javascriptreact",
    "reason",
    "typescriptreact"
  ],
  "tailwindCSS.htmlLanguages": [
    "blade",
    "edge",
    "eelixir",
    "ejs",
    "elixir",
    "elm",
    "erb",
    "eruby",
    "haml",
    "handlebars",
    "html",
    "htmldjango",
    "HTML (EEx)",
    "HTML (Eex)",
    "html.twig",
    "jade",
    "leaf",
    "markdown",
    "njk",
    "nunjucks",
    "php",
    "razor",
    "slim",
    "svelte",
    "twig",
    "vue"
  ]
}

[yassinebridi]

This repo is unfortunately unmaintained, check this one out if it works for you: https://github.com/rodrigore/coc-tailwind-intellisense

[drocha87]

@yassinebridi are you using this plugin? It seems to work but looks like it cannot "organize" the classes if you know what I mean. Below is how I installed it.

 :CocInstall https://github.com/rodrigore/coc-tailwind-intellisense

Coc Config

{
  "coc.preferences.formatOnSaveFiletypes": ["json", "css", "html", "vue"],
  "css.lint.unknownAtRules": "ignore"
}

[yassinebridi]

Yeah, i'm having that problem too, i'm not sure if headwind should be installed too or something.

[thiagodebastos]

I think I found what causes it. I don't seem to have any issues if I don't break the tag. By this I mean that the tag has to be in one line. If you have the class-name or className span multiple lines, this tool's format will break things. Happy to provide an example if that's not clear.

[yassinebridi]

@drocha87 This issue is still open: https://github.com/rodrigore/coc-tailwind-intellisense/issues/8