CSS formatter problem when using tailwindcss

[otowa552]

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.

[bitwiseman]

To be clear the spaces in @apply text-[clamp(0.75rem, 0.5625rem+0.3906vw, 0.875rem)]; are the problem?

https://tailwindcss.com/docs/editor-setup#syntax-support points out that the custom at-rules can confuse editors and formatters. This would be an example of that.

If you want to do there work, including providing tests I'd be happy to review well-tested PRs.

[bitwiseman]

Related microsoft/vscode#147548 . @DibyodyutiMondal
Help fixing would be welcome.

[bitwiseman]

This might be done by adding and at-rule here:
https://github.com/beautify-web/js-beautify/blob/ffd14abad155aebbaab3a2cbc8e11df1f2a4a870/js/src/css/beautifier.js#L56

Or there might be some simpler way.

[DibyodyutiMondal]

Sure, I'll see what I can do and revert back. This will definitely take some time, though, because I have never used beautify before, so I'll have to learn.

[mho22]

@bitwiseman The problem also occurs on modifiers here, let's take the example above :

/* Before */
@apply flex flex-col lg:flex-row space-y-3 lg:space-x-12 items-start;

/* After */
@apply flex flex-col lg: flex-row space-y-3 lg:space-x-12 items-start;

As you can see, the first lg:flex-row has an additional space between the colon and the flex word
when formatted lg:flex-row -> lg: flex-row

This leads to an error when compiling.

Do you have any idea on correcting this ? Do I need to create a new issue for this ?

[focussing]

Any news on this? This also happens on Windows and for example with hover: and dark:.
Or a workaround?
I have a lot of these modifiers in my code and formatting document is done a lot.

[mklueh]

wow, still not fixed. I'm coming from IntelliJ to VSCode and this is quite funny that formatting your code breaks your CSS all the time

[bitwiseman]

@mklueh
Welcome to open source. PRs welcome.

[mho22]

@bitwiseman @mklueh

I found out where it was problematic :

js/src/css/beautifier.js line 375

if ((insideRule || enteringConditionalGroup) && !(this._input.lookBack("&") || this.foundNestedPseudoClass()) && !this._input.lookBack("(") && !insideAtExtend && parenLevel === 0) {
    // 'property: value' delimiter
    // which could be in a conditional group query
    this.print_string(':');
    if (!insidePropertyValue) {
      insidePropertyValue = true;
      this._output.space_before_token = true;
      this.eatWhitespace(true);
      this.indent();
}

It considers the lg: as a property instead of a variant. I suppose it should have another condition next to !insideAtExtend who's name should be !insideAtApply. I'll provide a PR for this. Not sure if this will be correct though.

[romainmenke]

microsoft/vscode-css-languageservice#333 (comment)

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

---

h3 {
  @apply hover:text-red-400
}

after formatting :

h3 {
  @apply hover: text-red-400
}

---

To be frank this is not an issue with this package/project.
It can be fixed here, but it isn't caused by this project.

This is a Tailwind issue.

Tailwind invented a syntax where whitespace is important, this clashes with the core of CSS where whitespace is discarded. Tailwind should take ownership of the fallout it causes and roll it's own tooling (language support, formatters, linters, ...).

These two are exact equals for any spec compliant CSS tokenizer/parser :

• @apply hover:text-red-400
• @apply hover: text-red-400

[mho22]

@romainmenke Is this behaviour working fine with a line like this ? :

h3 {
    @extend .btn-blue:hover;
}

the result is this ?

h3 {
    @extend .btn-blue: hover;
}

It should probably behave the same way and this is not a Tailwind syntax here. I am not sure though.

[romainmenke]

@extend isn't standard CSS either.

But those are also exact equivalents for any spec compliant CSS tokenizer/parser.

---

When people invent non-CSS-like syntax it will cause issues in various tools.
I don't personally believe it is realistic for all tools to support all the random things people make up. It is already challenging enough to keep up with standard CSS.

Tools might choose to support everything and that is awesome, but I don't think we can classify this case as a bug or an issue in this package.

[mho22]

@extend, @import, @apply are not standard CSS but they follow the css at rules syntax, they are custom at rules.

@media, @page, @font-face, etc in the other hand are css at rules and this behavior could possibly occur the same way on these elements. Maybe.

I saw days ago that there's already a behavior on @extend and @import in the css-beautify source code.

But you're right.

[romainmenke]

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 :)

[bitwiseman]

@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?

[mho22]

@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.

[floroz]

Not sure why this issue is closed, but I still have this issue with the CSS Language Feature default formatter in VSCode.

A workaround I found it working, was to switch the file to .scss and use:

[mho22]

@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.

[floroz]

@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 :)