heybourn / headwind

An opinionated Tailwind CSS class sorter built for Visual Studio Code
https://marketplace.visualstudio.com/items?itemName=heybourn.headwind
MIT License
1.38k stars 46 forks source link

Multline breaks #137

Open Shahaed opened 3 years ago

Shahaed commented 3 years ago

Using this regex: (from the readme for twinmacro)

 "typescriptreact": [
      "(?:\\bclass(?:Name)?\\s*=\\s*(?:{([\\w\\d\\s_\\-:/${}()[\\]\"'`,]+)})|([\"'`][\\w\\d\\s_\\-:/]+[\"'`]))|(?:\\btw\\s*(`[\\w\\d\\s_\\-:/]+`))",
      "(?:[\"'`]([\\w\\d\\s_\\-:/${}()[\\]\"']+)[\"'`])"
    ]

for this code

const Input = tw.input`block w-full px-4 py-3 text-gray-700 transition-all duration-150 ease-out bg-transparent border-gray-300 rounded-md shadow-sm outline-none focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm`;

//or
const Input = tw.input`
block
w-full
px-4 py-3
text-gray-700
transition-all duration-150 ease-out
bg-transparent
border-gray-300
rounded-md
shadow-sm
outline-none
focus:border-indigo-500
focus:ring-indigo-500
sm:text-sm
`;

// Formatted becomes

const Input = tw.inputw-full px-4 py-3 text-gray-700 transition-all duration-150 ease-out bg-transparent border-gray-300 rounded-md shadow-sm outline-none `block focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm`;

This is invalid javascript since the initial backtick is moved to where the block has gone. In addition for the second input the newlines have been stripped.