search

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

Order classes on @apply on .css and .sccs files #69

Open filipesmedeiros opened 4 years ago

filipesmedeiros commented 4 years ago

Is your feature request related to a problem? Please describe. No problem.

Additional context Just do exactly the same, but in front of @apply in .css (and friends) files.

I can try to help if you point me in the right direction!

rareyman commented 4 years ago

I would expect we could do something like this…

"headwind.classRegex": {
    "css": "(?<=apply).*[^\\;]",
    "postcss": "(?<=apply).*[^\\;]",
 }

…but to be clear: this does not work.

I'm guessing that Headwind is specifically looking inside of HTML elements and not looking inside a plain line of code (or in this case a CSS definition).

Xeevis commented 3 years ago

Works fine for me in *.pcss after I've duplicated css regex as postcss and restarted VS Code

"headwind.classRegex": {
  "css": "\\B@apply\\s+([_a-zA-Z0-9\\s\\-\\:\\/]+);",
  "postcss": "\\B@apply\\s+([_a-zA-Z0-9\\s\\-\\:\\/]+);",  
}

lxSm8qn0lb

memark commented 3 years ago

I don't understand how this works. How is "postcss" mapped to "*.pcss"? What is the list of possible file type keys?

In my case I want it to work on *.sass files (which it doesn't). What should I add?

hacknug commented 3 years ago

I don't understand how this works. How is "postcss" mapped to "*.pcss"? What is the list of possible file type keys?

https://code.visualstudio.com/docs/languages/identifiers

In my case I want it to work on *.sass files (which it doesn't). What should I add?

In that case I think you should use scss. Not 100% sure but you won't waste much time trying it out :wink:

ghost commented 1 year ago

Bump 👋🏽 Would be great to get this working on pre-compiled CSS and SCSS files.