Closed kxng0109 closed 9 months ago
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
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.
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.
https://github.com/sublimelsp/LSP-css/releases/tag/1.1.4 is now released so I hope it helps.
supposely we need to recompile the server
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.
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.
@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
I don't think LSP-css is supposed to understand tailwind css. You might want to just disable it.
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?