Issue with tailwind and lsp_format_on_save

[kxng0109]

I use lsp-tailwindcss, and it seems like lsp_format_on_save breaks it. For classes that require a semi-colon, e.g. md:text-3xl or hover:bg-blue-500, it adds a whitespace after saving the css file which breaks tailwindcss. So instead of 'hover:bg-blue-500', it formats it to 'hover: bg-blue-500'. I had to disable lsp_format_on_save, but is there anyway this can be fixed?

[predragnikolic]

Steps to reproduce:

If you have a index.css file like this:

@tailwind base;
@tailwind components;
@tailwind utilities;
@apply bg-primary;

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
  }
}

And you have LSP-tailwindcss(does not have documentFormattingProvider, documentRangeFormattingProvider capabilities) and LSP-css (does have documentFormattingProvider, documentRangeFormattingProvider capabilities) plugin installed.

if the "lsp_format_on_save" LSP.sublime-setting is set to true,

the LSP-css formatter will run, and thus it will add a " " after each :. The syntax for tailwinds @apply isn’t valid css. So it’s expected for any css formatter to break.

Related issues have already been filled: https://github.com/microsoft/vscode/issues/146484 https://github.com/beautifier/js-beautify/issues/2012 https://github.com/microsoft/vscode-css-languageservice/pull/354 https://github.com/microsoft/vscode-css-languageservice/pull/361...

Apparently it has been fixed with this PR https://github.com/beautifier/js-beautify/pull/2147

EDIT: sorry for the accidental ping @apply

[predragnikolic]

I managed to reproduce the issue with LSP-css v1.1.3, the good news is that this issue is fixed with the latest master.

So once a new version of LSP-css is realeased, it will be fixed.

[kxng0109]

Oh, thank you though. I appreciate it.

The issue of @apply not being valid, is there any temporary fix? I'm tired of seeing warning about @apply not being valid.

[rchl]

https://github.com/sublimelsp/LSP-css/releases/tag/1.1.4 is now released so I hope it helps.

[jfcherng]

supposely we need to recompile the server

[rchl]

There is no new changes upstream. I've assumed that the it's the dependency updates that were in latest changes that are supposed to solve this.

[kxng0109]

Another issue similar to the first, it's adding spacing in-between custom classes that require an underscore.

For example grid-cols-[repeat(auto-fill,_260px) is formatted as grid-cols-[repeat(auto-fill, _260px).

Seems to be tricky because things like flex-[1_1_100%] or w-[calc(100%_-_17rem) aren't affected, but things like grid-rows-[repeat(6,_190px)] are.

[predragnikolic]

@kxng0109 those are all server issues. It would be best to report at https://github.com/microsoft/vscode-css-languageservice/issues or https://github.com/beautify-web/js-beautify

[rchl]

I don't think LSP-css is supposed to understand tailwind css. You might want to just disable it.