Support override comments for unknown strings, like // prettier-tailwind

[JamesGelok]

Why?

There are plenty of situations where a developer might have a string containing tailwindcss class names outside of the standard props.

This would allow developers to use a comment to opt-in to sort their strings containing tailwindcss for a given part of the AST, similar to how // prettier-ignore allows developers to opt-out of a given part of the AST.

How?

Functionally

I suspect it would primarily be some modifications in src/parsers/typescript.ts, src/parsers/babel.ts, src/parsers/vue.ts.

I don't really see the need to modify CSS or HTML parsers.

Behaviorally

It should behave similarly to // prettier-ignore.

// prettier-ignore on a new line affects the next item in the AST,

so for prettier-tailwind it could be like this:

before

const small =     "rounded    py-1.5 text-xs   px-2.5";

// prettier-tailwind
const large =     "rounded-md py-3   text-base px-6";

after

const small = "rounded    py-1.5 text-xs   px-2.5";

// prettier-tailwind
const large = "px-6 py-3 text-base rounded-md";

Note they both had incorrect spacing after the assignment operator which both got corrected by prettier, however, only of the strings was corrected by prettier-plugin-tailwind

and // prettier-ignore at the end of a line affects the previous item in the AST,

so for prettier-tailwind, it could be like this:

before

const small =     "rounded    py-1.5 text-xs   px-2.5"; // prettier-tailwind


const large =     "rounded-md py-3   text-base px-6";

after

const small = "px-2.5 py-1.5 text-xs rounded"; // prettier-tailwind


const large = "rounded-md py-3   text-base px-6";

Same here as above: note they both had incorrect spacing after the assignment operator which both got corrected by prettier, however, only of the strings was corrected by prettier-plugin-tailwind

Additional Details

A consequence of focusing on the AST is being able to define it for a function

before

// prettier-tailwind
function  Button({size, ...props}: ButtonProps) {
    const small =  "rounded    py-1.5 text-xs   px-2.5"; 
 const large =     "rounded-md py-3   text-base px-6";
  
   return (
  <button className={  size === 'small' ? small : large} {...props}/>
  )
}

after

// prettier-tailwind
function Button({ size, ...props }: ButtonProps) {
  const small = "px-2.5 py-1.5 text-xs rounded";
  const large = "px-6 py-3 text-base rounded-md";

  return <button className={size === "small" ? small : large} {...props} />;
}

Any guidance on how/where to get started would be appreciated but I'll probably tinker with this at some point for fun anyway.