prettier-plugin-tailwind
prettier-plugin-tailwind copied to clipboard
Support override comments for unknown strings, like // prettier-tailwind
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.