trapfether/tailwind-raw-reorder

An opinionated Tailwind CSS class sorter built for Visual Studio Code

tailwind-raw-reorder's Issues

Should Support Custom Directives E.G. border-l-[3px]

Tailwind allows for customized class directives. With this tool, you can make a border width, background image, etc with custom sizes props, etc. Since this extension is referencing the local tailwind config, it should theoretically be able to support these directives.

The benefit is that these classes would no longer be handled like custom classes and shoved to the front of the class attribute (or in some cases even breaking the ordering for the entire class attribute on the enclosing tag)

Adding custom location for config?

Would it be possible to add an option to add folders to look in?

Using tailwind in rails unfortunately has the config in config/tailwind.config.js
https://github.com/rails/tailwindcss-rails

The workaround is to do

const config = require('./config/tailwind.config.js')

module.exports = config

but seems a bit meh :P

How to configure sorting order?

With the way you handle RegEx, I was able to:

1. Sort xml files.
2. Also be able to sort class AND classes.

I achieved this using the following configuration:

"tailwind-raw-reorder.classRegex": {
  "xml": [
    [
      "[class|classes]=(([\"'`])(?:(?:[^{}<>](?!\\2))|\\\\\\2)+[^{}<>])\\2",
      "[\"'`]([^]+)"
    ]
  ]
}

One thing I noticed is the sorting order difference between your extension and Headwind:

// Tailwind Raw Reorder
class="rounded-16 mx-auto h-16 w-16"
// with FontAwesome classes
class="fas fa-phone-alt mr-1 flex-1 text-xs text-gray-600"

// Headwind
class="w-16 h-16 mx-auto rounded-16"
// with FontAwesome classes
class="flex-1 mr-1 text-xs text-gray-600 fas fa-phone-alt"

Did you notice how the spacing and sizing classes come first in the list in Headwind?

How can I configure Tailwind Raw Reorder to sort them in the same way?

Thank you!

Error msg: Cannot find module @tailwindcss/typography

Describe the bug
When trying to run - Tailwind Raw Reorder on a single file using the Meta-P Run Command option - I get the following error msg:

Cannot find module '@tailwindcss/typography'
Require stack:
- /Users/william/code/appkb/tailwind.config.js

I have a tailwind.config.js in the top-level directory, tailwindcss installed. I can run tailwind -m to minify the content which suggests that my tailwind.config.js is correct. I see the typography module installed in node_modules/@tailwindcss/typography

To Reproduce
Steps to reproduce the behavior:

1. Run Tailwind Raw Reorder: Sort Tailwind CSS Classes on a file in Visual Studio Code
2. Error msg pops up:

Cannot find module '@tailwindcss/typography'
Require stack:
- /Users/william/code/appkb/tailwind.config.js

Desktop (please complete the following information):

• OS: MacOS 14.0
• Env: Visual Studio Code
• Version: VSC 1.83 and today's version of tailwind-raw-reorder

Additional context
Add any other context about the problem here.

activationEvents must supports * instead of only .js

  "activationEvents": [
    "workspaceContains:**/tailwind.config.*"
  ],

It does not work with *.css.

Describe the bug

I may be setting it up wrong, but it didn't work with the CSS file.

To Reproduce
Steps to reproduce the behavior:

1. I have set the following in tailwind.config.js

/** @type {import('tailwindcss').Config} */

module.exports = {
  content: ['app/views/**/*.html.erb', 'app/frontend/**/*.css'],
  plugins: [require('@tailwindcss/typography'), require('@tailwindcss/forms')],
};

2. And in .vscode/setting.json

  "tailwind-raw-reorder.classRegex": {
    "css": "\\B@apply\\s+([\\._a-zA-Z0-9\\s\\-\\:\\/]+);"
  }

4. Save app/frontend/entrypoints/base.css

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@layer components {
  .foobar {
    @apply right-0 absolute;
  }
}

6. But absolute did not move front.

The following *.html.erb file works fine and moves the absolute to the front.

  <div
    class="right-0 absolute z-10 mt-2 hidden w-56 origin-top-right rounded-md bg-slate-800 shadow-lg ring-1 ring-black ring-opacity-5 transition duration-100 ease-out focus:outline-none"
    role="menu"
    aria-orientation="vertical"
    aria-labelledby="menu-button"
    tabindex="-1"
  >
    <div class="py-1" role="none"><%= yield %></div>
  </div>

Desktop (please complete the following information):

macOS 13.4 (22F66)

vscode

Version: 1.84.2 (Universal)
Commit: 1a5daa3a0231a0fbba4f14db7ec463cf99d7768e
Date: 2023-11-09T10:52:33.687Z
Electron: 25.9.2
ElectronBuildId: 24603566
Chromium: 114.0.5735.289
Node.js: 18.15.0
V8: 11.4.183.29-electron.0
OS: Darwin arm64 22.5.0

Tailwind Raw Reorder v3.0.3

no such file or directory, open `'[...]/dist/css/preflight.css'`

Hey! I would love to use your extension, since https://github.com/heybourn/headwind is completely unmaintained, but I'm encountering the following issue 😭

Let me know if you need anything else!

Describe the bug

When running the sort command (either through the command panel or by saving the file) I get the following error (also see screenshot)

A system error occurred (ENOENT: no such file or directory, open '/Users/amaterasu/.vscode/extensions/trapfether.tailwind-raw-reorder-3.0.3/dist/css/preflight.css')

To Reproduce

Steps to reproduce the behavior:

1. Install extension
2. Create basic html file, e.g. <div class="py-3 block"></div>
3. Save or run command
4. See error

Expected behavior
Tailwind classes are sorted

Screenshots

Desktop (please complete the following information):

• OS: macOS Ventura 13.5.2
• Extension version: v3.0.3

Sort Selection Command

Is your feature request related to a problem? Please describe.
The wide array of frameworks mean that sometimes class strings can wind up in weird places that are difficult if not impossible to automatically match via a regex. In these scenarios, giving the user an easy "sort the selection" command could come in handy

Describe the solution you'd like
Add a Sort Selection command. It should detect common templating interpolation delaminators and refuse to operate, explaining to the user that it cannot be safely used over an interpolation boundary (this is because it does not actually parse the interpolation and that is beyond the scope of this extension)

Add option to disable the notification "Tailwind config not found"

Is your feature request related to a problem? Please describe.
I usually open remote files to make some quick changes, every time I save I see this error https://share.cleanshot.com/TLFxxvzr activating/deactivating the extension makes no sense for this situations. Obviously on this cases a Tailwind config file does not exist but I'm fully aware of that.

Describe the solution you'd like
It would be great to have an option to disable that error "Tailwind config not found"

Doesn't respect classes inside single quotes? (in AlpineJS)

Having a case like this:

<div x-bind:class="loading ? 'disabled:bg-button-filled-surface-enabled disabled:text-on-button-on-filled-enabled' : 'cursor-not-allowed disabled:bg-button-filled-surface-disabled disabled:border-button-filled-stroke-enabled disabled:border-button-filled-stroke-disabled disabled:text-on-button-on-filled-disabled'">

after saving, it becomes this:

<div x-bind:class="loading ? 'disabled:bg-button-filled-surface-enabled disabled:text-on-button-on-filled-enabled' : 'cursor-not-allowed disabled:bg-button-filled-surface-disabled' disabled:border-button-filled-stroke-enabled disabled:border-button-filled-stroke-disabled disabled:text-on-button-on-filled-disabled">

as you see, the quote breaks here: ...ed-surface-disabled' disabled:border-b...

is there a way to do this? the regex seems a bit complex :|