heybourn/headwind

not sorting when using arbitrary value classes

sina-salahshour opened this issue · 4 comments

Describe the bug
When class names include some arbitrary value class, they are not being sorted.

To Reproduce
Steps to reproduce the behavior:

  1. create a svelte project
  2. add a class like w-[41px]
  3. try to sort by either format/saving or extension sort command.

Expected behavior
classes to be sorted

example

// cell.svelte
<script lnag="ts">
	let enabled = false;
</script>

<button
	class="w-4 bg-black data-[active=true]:bg-white h-4"
	data-active={enabled}
	on:click={() => {
		enabled = !enabled;
	}}
/>

when i remove the data-[active=true]:bg-white class, it works.

Desktop (please complete the following information):

  • OS: Fedora Linux 37

This could be confused with what Headwind calls a custom class: a class that you create for your own styling or otherwise versus w-[41px] which would be a Tailwind arbitrary value class.

This could be confused with what Headwind calls a custom class: a class that you create for your own styling or otherwise versus w-[41px] which would be a Tailwind arbitrary value class.

ok then let me edit my issue