format *.vue style like unocss/tailwindcss hover:bg-red-400 got blank space

[focussing]

As Johnson Chu suggested;

The results here are consistent with formatting .scss in VSCode, I suggest you open an issue with https://github.com/microsoft/vscode-css-languageservice.

Please this one: https://github.com/vuejs/language-tools/issues/1448

[demiro]

It was working fine for me until I updated to latest vscode today ... any idea how to fix it?

[moracabanas]

I am also posting from #1448 This is really braking development This are the reasons we are opening issue here:

One of the most popular stacks (Vue Nuxt3 Tailwind) is broken by the fact CSS in .vue files is bad formatted. The formatter introduced undesirable spaces on save, braking the main use of Volar autoformat tooling.

Because Volar developers are not able to fix the issue, people is patching their tooling with VSCode extension which is so opinionated formatter. Some people don't like it, and we should report the issue here so we get a chance to be taken in account and fixed.

Thanks!

[holygekko]

I'm having the same problem :(

[romainmenke]

See : https://github.com/beautify-web/js-beautify/issues/2012

This is not something that can be solved in this package. Must be fixed upstream.

[bitwiseman]

Please comment the upstream issue with the text that is problematic (not an image of the text).

[mho22]

@bitwiseman Closed Pull Requester #2142 here. This is the situation I faced months ago. The exact problem as the issue #2012 within a Vue file

Suppose :

Example.vue Before :

<script>...</script

<template>...</template>

<style>

   .button
   {
       @apply flex flex-col lg:flex-row space-y-3 lg:space-x-12 items-start;
   }

</style>

React like this :

Example.vue After :

<script>...</script

<template>...</template>

<style>

   .button
   {
       @apply flex flex-col lg: flex-row space-y-3 lg:space-x-12 items-start;
   }

</style>

Like the first element @apply thinks it is a property and adds an additional space to the first commas it finds.

This behavior breaks the Vue file, and the actual way to make rid of it is to turn off css fixes in vue files.

I suppose the correction you applied should make the work. But the context is different compared to a "simple" .css file.

Hope this helps.

[focussing]

Any idea when this is solved? It is still very annoying

[bitwiseman]

It should be fixed now in the upstream project (Thanks @Itemshopp !). This extension will need to pull in the new version.
If you'd like to help, please test your code by formatting it using https://beautifier.io . If you see problems, file them with the upstream project so that they can be addressed (hopefully soon).

[romainmenke]

@aeschli This issue was resolved and can be closed. see : https://github.com/microsoft/vscode-css-languageservice/commit/1ded897e653d5129bdc4c372917d6580d7ae22c3#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519R24

[aeschli]

Thanks!