Support for tailwind-styled-component

[ohyjek]

Hello,

I've been searching the internet for a prettier plugin that is able to do something very similar to what this plugin does (multiline).

In the package tailwind styled component, we often write the tailwind css classes in a multiline fashion

// ...

// Create a <Title> react component that renders an <h1> which is
// indigo and sized at 1.125rem
interface TitleProps {
    $large: boolean;
}

const Title = tw.h1<TitleProps>`
  ${(p) => (p.$large ? "text-lg" : "text-base")}
  text-indigo-500
`

// Create a <SpecialBlueContainer> react component that renders a <section> with
// a special blue background color
const SpecialBlueContainer = styled.section`
    background-color: #0366d6;
`

// Create a <Container> react component that extends the SpecialBlueContainer to render
// a tailwind <section> with the special blue background and adds the flex classes
const Container = tw(SpecialBlueContainer)`
    flex
    items-center
    justify-center
    w-full
`

This is all fine and good but as it stands today we need to manually move each class to its own line.

I have been researching and thinking about writing my own prettier plugin to do this automatically and this is the closest plugin to the desired functionality I have come across.

The simplest example would be...

// Written initially like...
const Container = tw.div`flex items-center justify-center w-full`

// Formatted to...
const Container = tw.div`
flex
items-center
justify-center
w-full
`;

So overall I'm opening this issue to ask two questions

1. Does this functionality seem all that feasible to you?
2. If so, should I write my own plugin or is there a plugin in mind that it might be a useful enhancement?

Thanks for your time!