🐛 There is a bug in the useSortedClasses formatting.

[ayangweb]

Environment information

CLI:
  Version:                      1.8.0
  Color support:                true

Platform:
  CPU Architecture:             aarch64
  OS:                           macos

Environment:
  BIOME_LOG_DIR:                unset
  NO_COLOR:                     unset
  TERM:                         "xterm-256color"
  JS_RUNTIME_VERSION:           "v16.14.2"
  JS_RUNTIME_NAME:              "node"
  NODE_PACKAGE_MANAGER:         "npm/8.5.0"

Biome Configuration:
  Status:                       Loaded successfully
  Formatter disabled:           false
  Linter disabled:              false
  Organize imports disabled:    false
  VCS disabled:                 true

Workspace:
  Open Documents:               0

What happened?

biome.json

{
	"$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
	"organizeImports": {
		"enabled": true
	},
	"linter": {
		"enabled": true,
		"rules": {
			"recommended": true,
			"nursery": {
				"useSortedClasses": {
					"level": "error",
					"fix": "safe",
					"options": {}
				}
			}
		}
	}
}

There's a problem with the className formatting, putting h-32 into foucs as well, which is not what I want!

// Before sorting
<input className="h-32 focus:(outline-none border-primary)" />
// After sorting
<input className="focus:(outline-none h-32 border-primary)" />

Expected result

The class name h-32 should not be placed inside foucs:().

Code of Conduct

• I agree to follow Biome's Code of Conduct

[lutaok]

There's a problem with the className formatting, putting h-32 into foucs as well, which is not what I want!

// Before sorting
<input className="h-32 focus:(outline-none border-primary)" />
// After sorting
<input className="focus:(outline-none h-32 border-primary)" />

Expected result

The class name h-32 should not be placed inside foucs:().

Hello @ayangweb ,
I don't recognize this as a Tailwind specific syntax, we're still working on useSortedClass and we currently can sort utilities reliably and there's a draft PR #3208 to support variant sorting.
Are you using https://github.com/ben-rogerson/twin.macro by chance?

[ayangweb]

格式有问题className，h-32焦点也有问题，这不是我想要的！

// Before sorting
<input className="h-32 focus:(outline-none border-primary)" />
// After sorting
<input className="focus:(outline-none h-32 border-primary)" />

预期结果

类名h-32不应该放在里面foucs:()。

你好@ayangweb， 我不认为这是 Tailwind 特有的语法，我们仍在努力useSortedClass，目前我们可以可靠地对实用程序进行排序，并且有一个草案 PR #3208来支持变体排序。 您是否恰好使用了https://github.com/ben-rogerson/twin.macro ？

Hey 👋, I'm using the UnoCSS syntax, but that's okay, until that's supported, it can be written without (),which can be split up!

<input className="h-32 focus:outline-none focus:border-primary" />

[DaniGuardiola]

Hi @ayangweb, thanks for the report. This syntax (unocss variant grouping) is not supported, and there are no plans to support it at this moment. We want to nail the basics first, which are already a lot of work. We could consider it in the future, but we can't promise anything. Thank you!

[ayangweb]

Hi @ayangweb, thanks for the report. This syntax (unocss variant grouping) is not supported, and there are no plans to support it at this moment. We want to nail the basics first, which are already a lot of work. We could consider it in the future, but we can't promise anything. Thank you!

Ok, I don't think this is a huge issue, it doesn't matter if it's not supported, it's already working very well as far as the current sorting rules are concerned anyway, thanks for providing such a great plugin!😁