search

tailwindlabs / tailwindcss-intellisense

Intelligent Tailwind CSS tooling for Visual Studio Code
2.79k stars 189 forks source link

Class name formatting #55

Closed bradlc closed 2 years ago

bradlc commented 5 years ago

Example:

<div class="xl:text-center md:text-left lg:text-right mx-auto"></div>

Would become:

<div class="mx-auto md:text-left lg:text-right xl:text-center"></div>

Class names could be ordered by variant and/or CSS property.

  1. What settings should be exposed for this?
  2. What should be done with unknown (non-Tailwind) class names?
octoxan commented 5 years ago

I'd love if you could specify the ordering of properties, as everyone is very specific in their workflow once you start ordering properties a certain way, and maybe a dropdown option for non-tailwind classes to be at the start or end?

huphtur commented 5 years ago
  1. Suggest putting those first in the order as it could contain extracted components classes. eg: <button class="btn bg-green-500 hover:bg-green-400 text-white">
kevinwhoffman commented 5 years ago

Thanks for looking into this. I've handled CSS formatting in the past so I figured I'd offer some of that experience to this issue.

Existing Approaches

For developers that care about the order of CSS properties, there are two predominant approaches:

  1. Group by type
  2. Alphabetical

Group by type makes the most sense for Tailwind because alphabetical would result in a messy mix of variant classes.

Recommended Order

  1. Non-Tailwind Classes
  2. Non-variant classes grouped by type
  3. Pseudo-Class Variants grouped by type
  4. Responsive Variants grouped by type, escalating from smallest to largest breakpoint

Recommended Grouping

Grouping CSS properties by type has been handled in a number of formatters such as CSScomb. You might consider borrowing the groupings from CSScomb's default config.

If you define the order in a JSON config, it may even be possible for users to override it with a custom JSON config in VS code settings.

octoxan commented 5 years ago

I wonder if we could borrow from how stylelint-order lets you customize it via json. https://gist.github.com/octoxan/1c0c24a75417f06096356e07d56be3c6

huphtur commented 5 years ago

css-declaration-sorter may be of good use as well.

MarvinMiles commented 5 years ago

Waiting for this feature so much!

evdama commented 4 years ago

Has anyone done some work towards that so far? I'd love to have that thingy automated away from my thoughflow :)

octoxan commented 4 years ago

I'd switch to VS Code from PHP Storm if this becomes a thing lol

christopherjohnallan commented 4 years ago

This would be the biggest improvement I can think of for the tailwindcss experience

huphtur commented 4 years ago

This VSC extension takes care of all the things: https://marketplace.visualstudio.com/items?itemName=heybourn.headwind

somebody32 commented 4 years ago

@huphtur headwind is cool but still has a lot of unsolved edge-cases: like no support for prefixed classes, missing classes from the latest TW versions, templated strings, etc. Would be really happy to see that supported by intellisense

portikM commented 3 years ago

Any updates on this front so far? Can't wait to see this live!

hansfpc commented 3 years ago

any updates?

rynz commented 3 years ago

What class name ordering does tailwindui use? Perhaps that could be the opinionated method of declaring class name order.

carstenjaksch commented 3 years ago

@bradlc Headwind seems to fix this issue. It is popular and actively maintained.

No need to reinvent the wheel, right?

1isten commented 3 years ago

@bradlc Headwind seems to fix this issue. It is popular and actively maintained.

No need to reinvent the wheel, right?

Just tried Headwind. It currently can't sort variant classes with md:, lg:, etc.. They will be treated as "custom classes" and be appended to the end. Something like text-center sm:ml-auto md:text-left ml-2 will be formatted into something like ml-2 text-center sm:ml-auto md:text-left instead of ml-2 sm:ml-auto text-center md:text-left, which is not good yet.

carstenjaksch commented 3 years ago

@1isten The PR that tackled this issue was closed. I think it is personal preference, where the variant classes should be sorted.

1isten commented 3 years ago

it is personal preference

@cajakre Yep. After all there is no correct ordering. @bradlc 's example here just makes more sense to me. XD

francoismassart commented 3 years ago

I did make an eslint plugin for this classnames ordering, it reads your tailwind config and you can configure the order if you want: https://www.npmjs.com/package/eslint-plugin-tailwindcss

carstenjaksch commented 3 years ago

@francoismassart Thanks, I will try that!

bradlc commented 2 years ago

Closing this as we have no plans to add class formatting to Tailwind CSS IntelliSense. We are working on an alternative class sorting solution, so look out for that in the near future 👀

rynz commented 2 years ago

@bradlc please reference this issue when your alternative class sorting solution is made public.

vdanchenkov commented 2 years ago

Alternative solution is a plugin for prettier I think https://github.com/tailwindlabs/prettier-plugin-tailwindcss. Looks very good, but unfortunately prettier is not available for my programming language, ReScript.

So if there is no plans to integrate it into the extension, we have to use separate extension for sorting, I think.

laptopmutia commented 4 months ago

so there is an emacs lsp-mode https://github.com/merrickluo/lsp-tailwindcss based on https://github.com/tailwindlabs/tailwindcss-intellisense and it use https://github.com/avencera/rustywind that is inspired by https://github.com/heybourn/headwind an non prettier class sorting that is obsolete

problem is prettier hard to setup especially when you use template engine like .erb

when I use headwind I just install the extension and its just works,

with prettier I got tangled by the settings and npm dependencies hell