[Prettier Plugin] Sorting classes inside variables

[Daiz]

EDIT: I would like to point out to anyone arriving into this post that this issue has been solved - the Prettier plugin now lets you enable sorting for arbitrary attributes, function calls and template literals. You can read the readme for more instructions.

Is there any way to make the plugin sort classes inside variables? Consider the following code:

const ClassVariable: React.FC = (props) => {
  const klass = "flex flex-col min-h-0";
  return <div className={klass} />;
};

const ClassName: React.FC = (props) => {
  return <div className="flex flex-col min-h-0" />;
};

After formatting, this is the result:

const ClassVariable: React.FC = (props) => {
-  const klass = "flex flex-col min-h-0"; // not changed
  return <div className={klass} />;
};

const ClassName: React.FC = (props) => {
+  return <div className="flex min-h-0 flex-col" />; // changed
};

I can imagine trying to sort all string variables by default would not be feasible, but some kind of workaround would be nice. klass is a pretty common variable name for CSS classes from what I've seen, so trying to sort strings assigned to klass (as well as strings inside an array assigned to klass, like klass = ["some class strings", bool ? "this" : "that"]) could be one possibility. I imagine this would be one thing that could use a config option if provided though, like a variable name string/regex that is used for matching what variables to try to sort.

[StErMi]

I have zero experience on how to build this plugin and what is possible or not but I add my 2 cents:

would it be possible to see which variables are used to form the className value and loop until the source and format them? It could be possible that the value is composed by joining multiple variables so you must loop until you have found the source (where no variables are referenced anymore)

const ClassVariable: React.FC = (props) => {
    const k1Color = prop.success ? 'text-green-500' : 'text-red-500';
    const k1 = props.small ? `min-h-0 ${k1Color}` : `min-h-full ${k1Color}`;

    const klass = `flex flex-col ${k1} `;
    return <div className={klass} />;
};

So the plugin will look at which variables are used for the className value and check klass, k1 and k1Color and stop at k1Color because in this case those classes do not reference a variable anymore

[dcastil]

I also want to suggest a simple solution to implement though it requires a bit more work for the user. There could be a comment which enables sorting in a subsequent string. Something like the // eslint-disable-next-line comment.

I already use the inline comment /*tw:*/ to enable syntax highlighting for Tailwind class strings in variables via the Tailwind VS Code extension with the VS Code setting

{ "tailwindCSS.experimental.classRegex": ["\\/\\*\\s?tw:\\s?\\*\\/\\s?'(.*)'"] }

which then looks like this in JS code

const classNameHiddenOnHover = isDatepickerOpen
    ? /*tw:*/ 'opacity-0'
    : /*tw:*/ 'group-hover:opacity-0 group-focus-within:opacity-0'

A comment like this could also be used to enable class sorting in arbitrary places.

[michaelschufi]

I agree. It would make most sense if we could configure this in the plugin's options. This way, we can exactly control which parts of the code should be treated as a Tailwind class group.

[gustavopch]

Leaving a more complex use case here with ternaries and maps to be considered too:

const buttonClass = [
  'block transition',

  `${full ? 'w-full' : 'w-fit'} ${
    {
      small: 'h-9',
      medium: 'h-12',
      large: 'h-14',
    }[size]
  } rounded-full ${
    {
      neutral: 'border-0',
      primary: 'border border-blue-500',
      secondary: 'border border-blue-500',
      text: 'border-0',
    }[variant]
  } ${
    {
      neutral: 'bg-gray-900/5',
      primary: 'bg-blue-500',
      secondary: 'bg-transparent',
      text: 'bg-transparent',
    }[variant]
  } ${
    {
      small: 'py-2 px-3',
      medium: 'py-3 px-6',
      large: 'py-4 px-10',
    }[size]
  }`,
].join(' ')

I haven't put a lot of thought into it, but I'm not sure if the tailwindCSS.experimental.classRegex approach would work here (unless perhaps if I added the comment to each line, which would not be ideal IMO).

[eldiegod]

this is just kinda crazy no? xd

[Jasperrr91]

Oof this example is pretty wild. Why use the template string with spaces if you can leverage the [].join('')? And why not combine the duplicate size and variant maps?

You could even use something like cva to make things even easier to read (and have the option for easy compoundVariant styling):

const buttonClass = cva(['block transition'], {
	variants: {
		full: { true: 'w-full', false: 'w-fit' },
		size: {
			small: ['h-9', 'py-2 px-3'],
			medium: ['h-12', 'py-3 px-6'],
			large: ['h-14', 'py-4 px-10'],
		},
		variant: {
			neutral: ['bg-gray-900/5'],
			primary: ['border border-blue-500', 'bg-blue-500'],
			secondary: ['border border-blue-500', 'bg-transparent'],
			text: ['bg-transparent'],
		},
	},
});

[Daiz]

@gustavopch The plugin actually already sorts the strings in your example if you put it inside a <div className={/* complex array/ternary/whatever goes here */}>. In general, the plugin works by identifying specific AST nodes and sorting all strings that appear inside said nodes. So in theory, all we should need is some way to signal to the plugin when a variable is a class name variable and it should be able to handle things from there.

[liuqiang1357]

Is it possible to use "Tagged Template Literals" in ES6 to give a signal to this plugin? For example above, maybe we can use it like this:
const klass = tw`flex flex-col min-h-0`;

[chiubaca]

i scrolled past this, but i got this half working. See my comment - #7558 (comment)

[cbn-falias]

Another idea:
Sort classes when they are inside a classNames() function call, as this is quite a popular package.

const klass = classNames("flex flex-col min-h-0");
return <div className={klass} />;

Edit: There exists already an idea for that #6382 😉

[michaeloliverx]

It would be nice if we could annotate structures to sort. I would like to be able to sort the following:

const baseClasses = 'rounded-md font-medium focus:outline-none'

const variantsLookup = {
  primary: 'bg-cyan-500 text-white shadow-lg hover:bg-cyan-400 focus:bg-cyan-400 focus:ring-cyan-500',
  secondary: 'bg-slate-200 text-slate-800 shadow hover:bg-slate-300 focus:bg-slate-300 focus:ring-slate-500',
  danger: 'bg-red-500 text-white shadow-lg uppercase tracking-wider hover:bg-red-400 focus:bg-red-400 focus:ring-red-500',
  text: 'text-slate-700 uppercase tracking-wider hover:underline hover:text-slate-600 hover:bg-slate-900/5 focus:text-slate-600 focus:ring-slate-500',
}

const sizesLookup = {
  small: 'px-3 py-1.5 text-sm focus:ring-2 focus:ring-offset-1',
  medium: 'px-5 py-3 focus:ring-2 focus:ring-offset-2',
  large: 'px-8 py-4 text-lg focus:ring focus:ring-offset-2',
}

export const Button = (props) => {
  const { variant, size, ...rest } = props
  return <button {...rest} className={`${baseClasses} ${variantsLookup[variant]} ${sizesLookup[size]}`} />
}

[eckoln]

We're using Class Variance Authority package for building tailwind css design system. Any chance sorting for this?

const buttonStyles = cva(
  "flex px-3.5 py-1.5 rounded font-medium focus:outline-none text-white justify-center items-center transition-colors",
  {
    variants: {
      intent: {
        primary: "bg-blue-500 hover:bg-blue-600",
      },
      fullWidth: {
        true: "w-full",
      },
    },
    defaultVariants: {
      intent: "primary",
    },
  }
);

export function Button({ intent, fullWidth, ...props }) {
  return <button className={buttonStyles({ intent, fullWidth })} {...props} />;
}

[kharann]

We're using Class Variance Authority package for building tailwind css design system. Any chance sorting for this?

const buttonStyles = cva(
  "flex px-3.5 py-1.5 rounded font-medium focus:outline-none text-white justify-center items-center transition-colors",
  {
    variants: {
      intent: {
        primary: "bg-blue-500 hover:bg-blue-600",
      },
      fullWidth: {
        true: "w-full",
      },
    },
    defaultVariants: {
      intent: "primary",
    },
  }
);

export function Button({ intent, fullWidth, ...props }) {
  return <button className={buttonStyles({ intent, fullWidth })} {...props} />;
}

I also have the same use case! Would love to be able to sort these classes. The experimental regex for autocomplete works however

[nderscore]

I recently made a fork of the tailwindcss plugin in order to support nativewind (v3.x), which implements a CVA-esque variants API:

https://github.com/nderscore/prettier-plugin-nativewind

I just added a feature in my fork which lets you customize which props and function calls the plugin searches for tailwind classes in.

With that change, it should be able to be configured to work with cva now too.

[rhkdgns95]

Change .prettierrc tailwindFunctions: ["cva", "cn"]

{
  "tailwindFunctions": [
    "cva",
    "cn"
  ],
  "plugins": ["prettier-plugin-tailwindcss"],
  "endOfLine": "auto"
}

[bmadone]

Any updates?

[eldiegod]

damn, hoping for this to work someday

[chiubaca]

At work we agreed a clean DX for this could be with a tagged literal. This is inspired from writing GROQ queries, for anyone that uses SanityCMS. They provide a groq tagged literal and when used in conjunction with their vs code extension it give you syntax highlighting and other niceties.

So with this DX in mind it would be neat to have something like a tw tagged literal that worked something like this:

import { tw } from '@tailwindcss'

const tailwindClass = tw`p-10 m-10`;  // get full tw prettier and intellisense here

I was able to get this half working by coping how Sanity does this, but prettier sorting doesn't work...

Here are the manual steps to achieve this

1. Add this file
   based off groq.ts

//my-helpers/tw-tag.ts

export function tw(strings: TemplateStringsArray, ...keys: any[]): string {

  const lastIndex = strings.length - 1;
  return (
    strings.slice(0, lastIndex).reduce((acc, str, i) => {
      return acc + str + keys[i];
    }, '') + strings[lastIndex]
  );
}

2. Import the helper in your component file:

import { tw } from '..my-helpers/tw-tag';

const tailwindClass = tw`bg-slate-400 md:bg-slate-400 p-10`;

3. Finally, configure the tailwind extension to look inside the tw tag.

{
  "tailwindCSS.experimental.classRegex": [
    "tw`([^`]*)", // tw`...`
  ]
}

The final challenge is for tailwind prettier to auto sort the string which I'm not sure how to do...

[michaeloliverx]

This looks interesting, I wonder if the tailwind helper simply returned what was passed in then maybe a bundler/minifier could just inline the function call.

[drMonro]

Anybody found way for auto sort in tw files?

[bettiolo]

please add reorder in cva() 🙏

[prince272]

How far?

[kjrocker]

I have another use case where I don't have a className variable, because I'm passing classes to a complex third party component.

Messing with classRegex gets me intellisense, but prettier isn't picking it up. It would be great if prettier could inspect this setting, I think that solves most of the use-cases people have listed here.

<ThirdPartyAuthUI appearance={{ className: { button: "", input: "", anchor: "" } }}/>

[agusterodin]

I know the Tailwind maintainers don't want us to do this sort of thing but there are situations where putting classnames in a variable make a lot of sense (as opposed to component abstraction or mapping). For example:

  "tailwindCSS.classAttributes": ["class", "className", "ngClass", ".*className", "cn", "classNames"]

Intellisense pick the noiseClassName const variable up fine if I set it up to do so with above snippet. Unfortunately there doesn't seem to be a way to do something similar with the Prettier plugin.

[Daiz]

I've edited the opening post to say as much, but the Prettier plugin can in fact now achieve what was asked in this request by allowing you to define sorting for arbitrary attributes, function calls and template literals. You can read the readme for the instructions.

[aleczratiu]

On my side the sorting for cva is not working even if is added in tailwindFunctions.

"tailwindFunctions": ["clsx", "cn", "twmerge", "cva"]

Any updates here?

[loczek]

Make sure to add the prettier-plugin-tailwindcss plugin as well

"plugins": ["prettier-plugin-tailwindcss"],
"tailwindFunctions": ["clsx", "cn", "twmerge", "cva"]

[aleczratiu]

Indeed, is like that and is not formatting it and it still seems to be with warnings on the file.

[marckraw]

any update on that ? It doesnt work for me aswell. We are trying to sort classes in nested cva object

[zrtsky]

final .prettierrc file needs to look like this:

{
  "plugins": [
    "prettier-plugin-tailwindcss"
  ],
  "tailwindFunctions": ["cva"]
}

[ravshansbox]

How can we sort classes in projects which uses windstitch?

[Psycarlo]

How would I be able to auto-sort this one?

const buttonVariants = {
  variant: {
    default: 'bg-gray-600',
    white: 'bg-white',
    ghost: 'bg-blue-500'
  },
  text: {
    default: 'text-white uppercase',
    white: 'text-black uppercase',
    ghost: 'uppercase'
  }
}

const buttonStyles = cva(['h-14 flex-row justify-center items-center w-full'], {
  variants: buttonVariants,
  defaultVariants: {
    variant: 'default',
    text: 'default'
  }
})

[BoilingSoup]

Does tailwindFunctions only work for javascript/typescript?

I'm using the experimental.classRegex tailwind setting to get autocomplete in .go files.
I then tried adding tailwindFunctions in my .prettierrc but it's not sorting.

{
    "plugins": [
        "prettier-plugin-tailwindcss"
    ],
    "tailwindFunctions": [
        "Class",
        "Classes"
    ]
}

The autocomplete works good, it just doesn't sort.