js-beautify: CSS formatter problem when using tailwindcss

Hi,

Description

The CSS formatter inserts unnecessary spaces when using tailwindcss, causing errors when building. An example is below.

Input

The code looked like this before beautification:

/* Before */
@apply flex flex-col lg:flex-row space-y-3 lg:space-x-12 items-start;
@apply text-[clamp(0.75rem,0.5625rem+0.3906vw,0.875rem)];

Actual Output

The code actually looked like this after beautification:

/* After */
@apply flex flex-col lg: flex-row space-y-3 lg:space-x-12 items-start;
@apply text-[clamp(0.75rem, 0.5625rem+0.3906vw, 0.875rem)];

Steps to Reproduce

Environment

OS: Windows

Settings

VSCode　Buildin Formatter Default

Is there a setting to work around this? Tailwindcss is indispensable and it would be great if you could fix it. Thanks.

About this issue

Original URL
State: closed
Created 2 years ago
Comments: 19 (11 by maintainers)

Most upvoted comments

@mklueh Welcome to open source. PRs welcome.

bitwiseman on Apr 17, 2023

@romainmenke @Itemshopp Interesting discussion.

I would still say there is a bug in this project for this input:

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

The output is:

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

The first lg:flex-row gets a space added but the second lg:space-x-12 doesn’t. The behavior should be consistent, and leaving the first lg:flex-row unmodified is the correct behavior I think.

@Itemshopp Now that you have an examples the reproduces the bug, would you be willing to try your PR again?

bitwiseman on May 6, 2023

@floroz It isn’t yet approved by VSCode. We will have to wait this PR to be merged : microsoft/vscode-css-languageservice#354 (review). You’re actually on the js-beautify repository, where it has been approved, merged and closed.

Got it!

Thanks for your work guys 😃

floroz on Aug 1, 2023

@bitwiseman, let’s try this out. I’ll add a new test in the css/tests.js file :

unchanged: [
   'h3 {',
   '    @apply flex flex-col lg:flex-row space-y-3 lg:space-x-12 items-start;',
   '}'
]

And find out if it results in any error by launching make js

EDIT:

It seems to be working, I’ll PR it again and check if everything is ok.

mho22 on May 9, 2023

Yes, don’t get me wrong, if people want to spend time to support things like this, then that is awesome. But I think it is important to keep framing this as “non-standard” and “made up”. (everything is made up, but I think you get what I mean 😃)

The added maintenance cost is much larger for things like these than it would be for regular CSS. Tailwind for example doesn’t have a formal specification or a standards body to govern changes. It is all at the whim of a single person. Again, these are not bad things by definition, but it does make for a complex situation 😃

romainmenke on May 4, 2023