heybourn / headwind Goto Github PK

case that work :

className="flex justify-center items-center w-full border h-16 hover:border-pink-900 hover:text-pink-900"

case-1 that doesn't work :

className={"flex justify-center items-center w-full border h-16 hover:border-pink-900 hover:text-pink-900"}

case-2 that doesn't work :

className={"flex justify-center items-center w-full border h-16 hover:border-pink-900 hover:text-pink-900" + REACT_STATE}

is it there any custom REGEX to fix this ?
it's the best extension on VSCODE btw 👍

Describe the bug

Hi 👋 thanks for this great extension, it's been very useful for Tailwind (and I wish there was a real Bootstrap equivalent).

Unfortunately, I have a project that uses Bootstrap, and despite there being no tailwind.config.js present, this extension still runs and sorts my Bootstrap css. There is also no tailwind dependency in my package.json or yarn.lock. The README says:

Headwind works globally once installed and will run on save if a tailwind.config.js file is present within your working directory.

Before save:

<ul class="navbar-nav ml-auto">

After save:

<ul class="ml-auto navbar-nav">

To Reproduce
Steps to reproduce the behavior:

1. Run this extension in a project with no tailwind
2. Observe that CSS classes that resemble Tailwind classes are still changed

Expected behavior

Non-tailwind projects should not have their classes sorted.

It would be cool if I could set up preferred sort order not with full class names like m-0, m-12, -m-2 etc but just m and -m. This way I wouldn't have to add all my custom tweaks of tailwindcss.config.js

before

"headwind.defaultSortOrder": [
    "container",
    "m-0",
    "m-1",
    "m-2",
   ...
    "mx-0",
    "mx-1",
    "mx-2",
   ...
    "ml-0",
    "ml-1",
    "ml-2",
   ...
    "mrl-0",
    "mr-1",
    "mr-2",
   ...
    "my-0",
    "my-1",
    "my-2",
   ...
    "mt-0",
    "mt-1",
    "mt-2",
   ...
    "mb-0",
    "mb-1",
    "mb-2",
   ...
    "-m-1",
    "-m-2",
    ...
    "p-0",
    "p-1",
    "p-2",
    ...
]

after

"headwind.defaultSortOrder": [
    "container",
    "m",
    "mx",
    "ml",
    "mr",
    "my",
    "mt",
    "mb",
    "-m",
    ...
    "p",
   ...
]

Though I don't know how to manage classes like flex, flex-col in this case. Maybe there should be 2 config sections: one to manage tags with numbers (like m-N, p-N, border-N, etc. And another section for full class names.

Great extension btw!

It would be nice if headwind ordering of the margin and padding classnames could match the syntax of the CSS rule, e.g. for margin:

/* vertical | horizontal */
margin: 0.25rem 0;

/* top | horizontal | bottom */
margin: 1rem auto 2rem; 

/* top | right | bottom | left */
margin: 0.5rem 1rem 0 auto;

Current and expected ordering behaviour for the above tailwind classnames:

/* vertical | horizontal */
Current:
mx-0 my-1

Expected:
my-1 mx-0

/* top | horizontal | bottom */
Current: 
mx-auto mt-4 mb-8

Expected:
mt-4 mx-auto mb-8

/* top | right | bottom | left */
Current:
mt-2 mb-0 ml-auto mr-4

Expected:
mt-2 mr-4 mb-0 ml-auto

There are other shorthand properties which would benefit from similar, namely border, font and background:

https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties

Is your feature request related to a problem? Please describe.
I'm using Remark to style a table in Tailwind. I can't style it directly as my table is in markdown so I have to use Remark as an intermediary step to do it.

I have an array which contains table tag & I keep pushing tr, th, etc... onto it like:

const str = []
str.push(`<table class="table-fixed max-w-7xl full-bleed md:mx-12 divide-y divide-gray-200">`)
str.push(`<thead class="">`)
str.push(`<tr class="">`)
str.push(`<th class="px-6 py-3 bg-gray-50 text-left text-2xl font-semibold text-blue-gray-700 tracking-wider">${k}</th>`)

Describe the solution you'd like
I'd love for Headwind to sort classes in JS files too where a string uses class tag.

Describe the bug
Does not remove the trailing space after the last class inside the class attribute. For example,

<a href="#" class="border-r border-gray-900 sm:h-10 md:h-12 ">
                                                                                                            ^extra space

To Reproduce
Add a space after the last class inside the class attribute and run the extension.

Expected behavior
This space should be removed. Especially since the extension already removes the leading spaces before the first class and the extra spaces between them. Seems like this is reasonable expectation.

Screenshots
Before:

After:

I think it would be much better to be able to specify an entire class space with something like text-* instead of listing all the existing text-blue-100 text-blue-200 which leaves out any custom color classes you might add.

In this way you would glob all the text-* and proceed to sort then alphabetically, all user added new colors would be taken into account.

Of course, this is a very simplistic solution, but the idea behind it (using patterns to describe the sorting order) is something that could be very useful.

Right now the sort order defined in package.json is only for the TailwindCSS vanilla classes.
With a pattern matching approach, you would be able to consider any new additions the user make.

Thoughts?

Support for Pug (in Vue files).

<!-- index.vue -->
<template lang="pug">
  #app
    .bg-red-500.container.mx-auto.text-white.lg_bg-red-600
</template>

// tailwind.config.js
module.exports = {
  separator: '_', // pug doesn't support colon in classes
  theme: {},
  variants: {},
  plugins: [],
};

Current

<div class="xl:hidden sm:block lg:hidden md:hidden">Small</div>

Expected

<div class="sm:block md:hidden lg:hidden xl:hidden">Small</div>

Describe the bug

When enabled, this extension overrides one of the default vscode hotkeys. The default hotkey is used to re-open the previously closed tab.

To Reproduce
Steps to reproduce the behavior:

1. Install extension
2. Open two editor tabs
3. Close one of them
4. use hotkey cmd + shift+ t

Expected behavior

With the default vscode settings, the tab you just closed should reopen.

Screenshots

n/a

Desktop (please complete the following information):

• OS: OSX
• VS Code Version: 1.50.1

Proposal

Create a setting to disable this hotkey

Hi,

The library is great, though it doesn't work when I have one css class per line (which is in my opinion much cleaner).

Here's my code:

<Image
            src="logo.png"
            alt="Logo Rincent Investigation"
            class="
            mt-4
            mx-auto
            h-10
            w-auto
"/>

Here's the output on save:

<Image
            src="logo.png"
            alt="Logo Rincent Investigation"
            class="w-auto h-10 mx-auto mt-4 "/>

Here's what it should be:

<Image
            src="logo.png"
            alt="Logo Rincent Investigation"
            class="
            w-auto
            h-10
            mx-auto
            mt-4
"/>

Instead of generating a new string with classes it should swap them or maybe add an option for this kind of format.

Is that something that can be done or is there some kind of limitation from VS Code ?

Thank you !

Is your feature request related to a problem? Please describe.

When working with Tailwind and React, I usually reach out for classnames. It seems like there's is no way headwind can support it.

Describe the solution you'd like

A workaround is a command that will sort whatever is in "selection", so that I can highlight a big string and have it sorted.

Describe the bug

Headwind will not sort these:

export function FormGroup({className = '', ...props}) {
  return <div className={`flex-col flex ${className}`} {...props} />
}

To Reproduce

Open a JSX file in a Tailwind-enabled project, copy/paste that code and hit save and notice it is not sorted.

Expected behavior

I expect it to be sorted.

Desktop (please complete the following information):

• OS: macOS

Is your feature request related to a problem? Please describe.

I'm using tailwindcss-classnames by @muhammadsammy in my typescript project to have typed classes. But unfortunately, I do not get auto-sorting of classname arguments.

Describe the solution you'd like
Currently, we can get sorting with

return (
- <div className="bg-red-500 container mx-auto text-white" />
+ <div className="container mx-auto text-white bg-red-500" />
);

I'd like the following snippet to also get sorted the same way.

import {classnames as cn} from 'tailwindcss-classnames';

- const divCn = cn("bg-red-500", "container", "mx-auto", "text-white");
+ const divCn = cn("container", "mx-auto", "text-white", "bg-red-500");

return (
  <div className={divCn} />
);

Note that it should also work with multilines:

const divCn = cn(
-  "bg-red-500", 
  "container", 
  "mx-auto",
-  "text-white"
+  "text-white",
+  "bg-red-500", 
);

Describe alternatives you've considered
Current, I'm using vim fu to sort alphabetically my classes, which is suboptimal. I'd really like to enjoy headwind's sort order.

Is your feature request related to a problem? Please describe.

I would like to write a Prettier plugin that automatically sorts my Tailwind classes, rather than needing to run the code through a VSCode plugin. This will allow me to ensure classes are sorted correctly as part of my CI configuration.

Describe the solution you'd like

Ideally, I would like to use the class sorting functionality from Headwind directly, rather than implementing something very similar from scratch.

What I'm imagining is that the actual sort logic is extracted into something like a @headwind/core package that would allow other tools to do something like this:

const { sortClasses } = require('@headwind/core');

/// whatever

sortClasses(classString, options);

where my own code will handle

• File parsing and extracting the class string
• Reading the options from the file
• Updating the file

Describe alternatives you've considered

Some alternatives include

• Waiting for the Tailwind team to build something themselves
  Problem: Not really in the spirit of OSS; I'd love to see the community work on tools together, rather than waiting for them!
• Writing my own custom Tailwind sorter
  Problem: There would then be my own implementation, Headwind, and whatever Tailwind eventually makes first-party
• Just copying the code from here
  Problem: This package and my own would be in sync to start, but I'd be constantly trying to keep up with changes to this library

Additional context

If you're interested in the idea, I'd love to help out with getting this done! If you're not interested, that's OK too; I'm happy to just duplicate the logic if need be.

Is your feature request related to a problem? Please describe.
Not really. Might improve bundle size if unused classes are removed.

Describe the solution you'd like
Similarly to removing exact duplicate classes Headwind should be able to remove duplicate class types. If I add two color classes, like text-red-400 and text-red-600, 400 is redundant and will be overridden by 600 which means 400 could be removed.

Is your feature request related to a problem? Please describe.
As described here, saving is doing funny stuff with the current cursor position. Since the plugin runs also on autosave it sometimes get's pretty unhandy editing the classes.

#72

Describe the solution you'd like
The VS-Code API offers the possibility to determine what was the trigger for saving. So I would suggest to run only on manually saving (CMD+s) or make it an option.

"headwind.runOnAutoSave": true | false

Describe alternatives you've considered
Delaying auto save for a few seconds mitigates the problem, but raises others.

Additional context
I think it would be best practice not to run on autosave. It would be also the same behavior as "eslint auto fixing", which also runs only on manual save.

Is anybody already working on sorting responsive- and pseudo-class variants.
If not, then that's definitely something worth looking into I'd say.

Currently they're considered custom classes unless they're all also added to the defaultSortOrder config, right?
Maybe it can be done with another config like defaultVariantSortOrder which describes the sort order used for each variant within one class/group.

For instance

"headwind.defaultVariantSortOrder": [
    "sm",
    "md",
    "lg",
    "xl",
    "hover",
    "focus",
    ...
]

would result in

class="mx-auto md:mx-2 bg-gray-800 hover:bg-gray-700"

This only works, if the classes are defined in groups so it knows that mx-auto should still go before mx-2 even though in the defaultSortOrder this might be configured differently.

Not yet quite sure how to properly achieve this.
We probably just need a map from Tailwinds' config as described here already.

Isn't very well-thought-out yet but wanted to get that brainwork going. 🙂
Any ideas?

Describe the bug
Headwind doesn't work. It throws an error when I run Sort TailwindCSS Classes on Entire Workspace;

Headwind error: /home/thiras/.vscode/extensions/heybourn.headwind-1.7.0/node_modules/rustywind/bin/rustywind: 1: Syntax error: ")" unexpected

To Reproduce
Steps to reproduce the behavior:

1. Go to install the extension
2. Restart VSCode
3. Run Sort TailwindCSS Classes on Entire Workspace
4. See error

Expected behavior
The extension should fix the entire workspace

Screenshots

Desktop (please complete the following information):

• OS: Ubuntu 20.04
• Browser Firefox
• Version 86

Additional context

Version: 1.54.1
Commit: f30a9b73e8ffc278e71575118b6bf568f04587c8
Date: 2021-03-04T22:38:50.094Z
Electron: 11.3.0
Chrome: 87.0.4280.141
Node.js: 12.18.3
V8: 8.7.220.31-electron.0
OS: Linux x64 5.8.0-44-generic

Hey :)

Thanks for the cool plugin. Could we get an option to trigger this plugin when we save a file?

Greetings,

Alex

In apps with tabs, Command + Shift + T is usually the shortcut to re-open the most-recently-closed tab. This is also the case in VS Code (at least with the Atom keymap enabled).

A different default keyboard shortcut would be great. I'm aware I can change it, but it's still frustrating, especially for those of use who work on multiple computers. I've changed mine to Control + Option + Command + T for now.

Hi folks,

so this is more of a question rather than a feature request because I couldn't find anyting regarding this:

Say you have lots of markup looking like this

<div class="w-full h-full transition rounded-lg transform-gpu duration-1500 hover:z-10 hover:elevation-20 hover:scale-110 hover:-rotate-2">
some div content
</div>

and very much like folding/collapsing e.g. a function you'd like to fold the class property for times when you aren't working on CSS but other things i.e. go from the above to this

<div class="...">
some div content
</div>

Does that exist in either VScode itsself or any of its extentions, maybe even headwind? I couldn't find anyting so asking here ☺️

Current default regex of:

\bclass(?:Name)*\s*=\s*([\"\']([_a-zA-Z0-9\s\-\:]+)[\"\'])

Doesn't match if the class name has / in it, see:

https://regex101.com/r/R9BHkB/1

We just have to change it to

\bclass(?:Name)*\s*=\s*([\"\']([_a-zA-Z0-9\s\-\:\/]+)[\"\'])

If I'm not missing anything I can make a PR, let me know.

It would be nice to preserve line-breaks when formatting with headwind - I use prettier line limit and headwind will inline everything on save.

With prettier format:

With the same prettier config and headwind:

edit: the real solution may be to run headwind before prettier.

👍

Had a friend who writes React ask about this and helped him figure out a working regex, here it is:

"headwind.classRegex": {
  "javascriptreact": "(?:\\b(?:class|className)?\\s*=\\s*{?[\\\"\\']([_a-zA-Z0-9\\s\\-\\:/]+)[\\\"\\']}?)",
  "typescriptreact": "(?:\\b(?:class|className)?\\s*=\\s*{?[\\\"\\']([_a-zA-Z0-9\\s\\-\\:/]+)[\\\"\\']}?)"
}

Hello !

There's another implementation of TailwindCSS called windicss, that offer many advantages for some use cases like mine.

I wondered if it could be supported, thank you very much.

Describe the bug
Compiling the extension using vsce throws the following error:

Argument of type 'RegExp | undefined' is not assignable to parameter of type 'string'.

To Reproduce
Steps to reproduce the behavior:

1. Open your Headwind directory
2. Run npm run compile

Expected behavior
The extension should compile and produce an 'out' folder

Is your feature request related to a problem? Please describe.
Headwind cannot detect Tailwind classes in <style lang="sass"> tags in Svelte components.

Describe the solution you'd like
It would be awesome if I could use Headwind in Svelte components using Sass.

Describe alternatives you've considered
Getting better at Regex to add my own fix / reaching out to Svelte-Preprocess or Svelte-VSCode devs for a fix.

Additional context
Not detected by headwind:

Let me know the best route for me to take in order to get this working (reaching out to the other projects mentioned / implementing my own fix).

Is your feature request related to a problem? Please describe.
Some times there are situations where a regular expression for capturing all class names is too difficult to configure (or not possible, maybe related to #58), so class sorting doesn't run at all.

Describe the solution you'd like
In these situations, it would be nice if I could select the text in VS Code and then cmd+shift+p headwind to sort them.

Describe the bug
I don't know if there is a way to prevent this from happening, but if you undo several times then save the file, the classes will be reordered and then all your redo history will be trashed.

Expected behavior
If possible, it should reorder classes without affecting undo/redo history.

Have you thought about making Headwind into a prettier plugin? This would solve #46

There is something similar here: https://github.com/Acidic9/prettier-plugin-tailwind-classes-sorter

Is your feature request related to a problem? Please describe.
I'm an Emacs user and would like to use this tool at work, however seems no CLI option is available

Describe the solution you'd like
Extracting the core functionality into a separate package or somethin', then coupling that with the vscode extension for vscode users and offering a CLI that receives input from stdin and spits the results to stdout for everybody else

Describe alternatives you've considered
letting my coworkers sort the classes on their pull requests (not really an alternative)

Additional context
None.

In my projects I mix bootstrap with tailwind so as per recommendations I configured my tailwind.config.js to use a prefix: tw-

I've noticed that Headwind doesn't sort my tailwind classes, I mean it will do some alphabetical sorting but it won't apply the nice sorting that is meant to be provided

For example

bg-red-500 container mx-auto text-white

gets sorted to

container mx-auto text-white bg-red-500

but

tw-bg-red-500 container tw-mx-auto tw-text-white

doesn't get sorted to

container tw-mx-auto tw-text-white tw-bg-red-500

instead it gets sorted to

container tw-bg-red-500 tw-mx-auto tw-text-white

Could you possibly add support for using a prefix please ?https://tailwindcss.com/docs/configuration/#prefix

Or if it's already possible, I think it should be made clearer how to set the configuration in order to have it work with a prefix

If you need to test with prefixes this tool is handy https://github.vue.tailwind-prefix.cbass.dev/

Thanks!

Is your feature request related to a problem? Please describe.
Occasionally I get a bit too zealous with adding tailwind classes, which means I sometimes repeat a couple classes by accident.

Describe the solution you'd like
The sorting helps to discover the duplicates much easier, but was wondering if it be possible to also delete dupes upon sorting?

Describe alternatives you've considered
n/a

Additional context
❤️

Describe the bug
Doesn't sort if I put regular className like text-blue-gray-500 in the end after the prefixed one sm:text-sm.

To Reproduce
I have the following className in React:

<div className="block w-full px-3 py-2 mb-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">Hello</div>

If I put it text-blue-gray-500 in the end like:

<div className="block w-full px-3 py-2 mb-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm text-blue-gray-500">Hello</div>

Then it doesn't sort it. But if I put it before the last prefixed one, which in this case is focus:outline-none, then it sorts perfectly.

Expected behavior
It should sort even if I put the non-prefixed className in the end.

Additional context

tailwind.config.js

const colors = require('tailwindcss/colors')

module.exports = {
	purge: ['./src/**/*.{ts,tsx}'],
	darkMode: false, // or 'media' or 'class'
	theme: {
		extend: {
			colors: {
				'blue-gray': colors.blueGray,
			},
		},
	},
	variants: {
		extend: {},
	},
	plugins: [],
}

Cheers,

currently it's only possible to reorder the classes within the opened file.

It would be also good to have an option to let it reorder the whole classes within a selected folder or even the whole project.

Especially necessary if we want to implement this not only from the scratch of a project.

Thanks,
~ Brain

Is your feature request related to a problem? Please describe.
Sometimes we need a custom order for specific cases.

Describe the solution you'd like
Something like a comment to ignore from sorting

I know this is already fully configurable, I would just like to discuss some alternative sort orders – or maybe even reach consensus on one other alternative sort order that could be included in the distribution.

The default setup seems (at first glance) to leave room for improvement. But maybe I just need to have it explained. For ex, why is padding before margin?

Describe the bug
If there is a class with micro size spacing, like m-0.5, pt-2.5, headwind doesn't format the tag line at all. I use custom defaultSortOrder config with experimental extended spacing scale released in tailwind 1.7.0, added all the missing classes manually.

This bug affects only the current tag line with micro size, the rest of the code is still formatting correctly. I guessed if I remove micro size classes from the config, they'll be assumed as custom classes and will be moved before or after all classes, but it has no result. Perhaps the parser fails during process on tags with dot inside, unfortunately, there are no errors in the console window to analyze.

Upd: I just realized that it also doesn't format if any custom classes from external files applied. For example, if I apply a class from my custom components.scss, headwind stops format all the classes in the current tag. However, it works fine for classes from the css file located in the same folder with html. Btw, I use Angular.

Is your feature request related to a problem? Please describe.
I'm using VSCodium, and it comes with Open VSX marketplace instead of VS Code Marketplace. So unfortunately, this (awesome) extension isn't available to us.

Describe the solution you'd like
It would be awesome if you'd be willing to spend some time to publish it to Open VSX alongside VS Code Marketplace 🙂

Describe alternatives you've considered
As I don't want to use Microsoft's VS Code Marketplace, I've installed it as vsix package, but it's really annoying for updates...

Additional context
Here is some doc from Open VSX about publishing : https://github.com/eclipse/openvsx/wiki/Publishing-Extensions.

By the way, thanks for this extension, it's awesome!

Is your feature request related to a problem? Please describe.
A common workflow is inputting a class with a certain value and incrementing or decrementing:
input px-3, review how it looks, hit backspace and change 3 to 4, etc.

Headwind will keep your cursor exactly where it is, regardless of what has changed, leading to mistaken backspaces and class editing.

Describe the solution you'd like
The Prettier vscode handles this situation well. On reformat, your cursor will remain next to the nearest token it was alongside before format. It would be great if this can be implemented in Headwind.

Is your feature request related to a problem? Please describe.
Hello, I am trying to set up Headwind for use in Javascript files.

I have getters where I use a switch-case to choose the classNames for a component in Ember.
Headwind works in templates but I can't seem to get it to work in Javascript.

This is my code:

  get buttonClass() {
        const classNames = "border-0 rounded-sm min-w-24 min-h-8"; // Want this to be headwinded
        switch (this.variant) {
            case "primary":
                return `${classNames} button-primary`;
            default:
                return "";
        }
    }

I tried setting this regex but it might be wrong :)

  "headwind.classRegex": {
        "javascript": "(?:\\bclassName\\s*=\\s*[\\\"\\']([_a-zA-Z0-9\\s\\-\\:\\/]+)[\\\"\\'])|(?:\\btw\\s*`([_a-zA-Z0-9\\s\\-\\:\\/]*)`)"
    }

My typical scala code looks as follows:

  sb(modal)(
    doApply("fixed left-0 top-0 w-full h-full z-10")
  )

I tried to add the following to headwind.classRegex these lines

		"scala": "\\B@doApply\\(\"([_a-zA-Z0-9\\s\\-\\:\\/]+)\"\\)",
		"plaintext": "\\B@doApply\\(\"([_a-zA-Z0-9\\s\\-\\:\\/]+)\"\\)",

but it doesn't seem to work. Headwind works properly for css files. I have the official scala plugin installed, and restarted vs code after changing the settings.

Any hint what I can try?

Is your feature request related to a problem? Please describe.
This won't work inside JSX files

Describe the solution you'd like
We could edit the regex to include jsx className=....
https://github.com/heybourn/headwind/blob/master/src/extension.ts#L8

Alternatives
Check how vscode-tailwindcss works and use a similar approach of only running on certain file types? Maybe make it possible to work with other languages like Elm?

My classes:
<div class="w-full flex p-2 lg:w-1/3 lg:flex-grow">

Expected but not happen:
<div class="flex w-full p-2 lg:flex-grow lg:w-1/3">

when remove lg: and replace w-1/3 with w-2 it woks:
<div class="flex flex-grow w-2 w-full p-2">

PHPStorm / Jetbrains Port

EDIT
Coming Soon.

Is your feature request related to a problem? Please describe.
No problem.

Additional context
Just do exactly the same, but in front of @apply in .css (and friends) files.

I can try to help if you point me in the right direction!