vinpac / windstitch

Windstitch is a 1.4kB, Simple Styling Library that helps you set when a className should be applied to a component.
https://windstitch.vercel.app
MIT License
255 stars 6 forks source link

intellisense support (question) #14

Open ryankauk opened 1 year ago

ryankauk commented 1 year ago

Hey, love the idea of this package, I was wondering if you knew a way to get tailwind intellisense working with the strings in this package

felipeolliveira commented 1 year ago

@ryankauk @vinpac

Regexp

I made a Regexp expression and added it inside the intellisense configuration of TailwindCSS in VSCode:

{
  "tailwindCSS.experimental.classRegex": [
    "(w(?:\\.[a-z]+)?\\((?:[\\s\\S]+?)(?:[`'\"][\\s\\S]+[`'\"])*?\\}(?:[\\s\\S])?\\))",
  ]
}

This selection by Regexp already gives the possibility to use intellisense with the Tag Name and Custom Component functions of w

Testing in Regexr.com

However, there are still improvements to be made.

Even with these small problems I'm using it this way because it's a good help to identify the theme tokens

Issues with regex

  1. An annoying thing that still happens is that the suggestions don't just stay inside the quotes, they extend to the entire scope of the function

image

  1. Inside the quotes it is necessary to start with a white space for intellisense to work normally. If that first space doesn't exist, the first class doesn't show the suggestions.

image image

  1. An object brackets is needed before closing the w function. The Regexp code knows the function is closed by the final bracket before the parentheses
    
    const button = w.button('text-sm') // not working

const button = w.button('text-sm', { }) // working



### Hope it can help you!
eduardodallmann commented 1 year ago

Please let me contribute a variation of the regex to catch some scenarios.

https://regex101.com/r/uZ6FNJ/1

"tailwindCSS.experimental.classRegex": [
  "(w(?:\\.[a-z]+)?\\((?:(?:[`'\"][^\\)]+[`'\"])|(?:(?:[\\s\\S]+?)(?:[`'\"][\\s\\S]+[`'\"])*?\\},?(?:[\\s\\S])?))\\))",
]
jpcmf commented 1 year ago

Please let me contribute a variation of the regex to catch some scenarios.

https://regex101.com/r/uZ6FNJ/1

"tailwindCSS.experimental.classRegex": [
  "(w(?:\\.[a-z]+)?\\((?:(?:[`'\"][^\\)]+[`'\"])|(?:(?:[\\s\\S]+?)(?:[`'\"][\\s\\S]+[`'\"])*?\\},?(?:[\\s\\S])?))\\))",
]

@eduardodallmann your regex works for me, thanks. But the first tailwind class after open a ` or " is not detected. You need to add a space then intellisense works.

jaukia commented 1 year ago

Here is what I came up with, works quite nicely at least with my code:

  "tailwindCSS.experimental.classRegex": [
    [
      "((?:w)(?:[\\.a-zA-Z0-9]*)?\\((?:[^)(]|\\((?:[^)(]|\\((?:[^)(]|\\([^)(]*\\))*\\))*\\))*\\))",
      "(?:')([^']*)(?:')"
    ],
    [
      "((?:w)(?:[\\.a-zA-Z0-9]*)?\\((?:[^)(]|\\((?:[^)(]|\\((?:[^)(]|\\([^)(]*\\))*\\))*\\))*\\))",
      "(?:\")([^\"]*)(?:\")"
    ],
    [
      "((?:w)(?:[\\.a-zA-Z0-9]*)?\\((?:[^)(]|\\((?:[^)(]|\\((?:[^)(]|\\([^)(]*\\))*\\))*\\))*\\))",
      "(?:`)([^`]*)(?:`)"
    ]
  ],

The idea here is that the first part matches the whole "w(...) { ... }" function call, and then the second part matches any quoted sections within it. This should handle whitespace or strings starting/ending with a quote without problems. But it might have issues with escaped quotes.

The function-matching is based on this: https://stackoverflow.com/questions/546433/regular-expression-to-match-balanced-parentheses

I tried combining the second part into a conditional regex that would cover all of the quote alternatives, but for some reason I couldn't make that work.

Feel free to improve/share it if you come up with something better!

eduardodallmann commented 1 year ago

Here is what I came up with, works quite nicely at least with my code:

  "tailwindCSS.experimental.classRegex": [
    [
      "((?:w)(?:[\\.a-zA-Z0-9]*)?\\((?:[^)(]|\\((?:[^)(]|\\((?:[^)(]|\\([^)(]*\\))*\\))*\\))*\\))",
      "(?:')([^']*)(?:')"
    ],
    [
      "((?:w)(?:[\\.a-zA-Z0-9]*)?\\((?:[^)(]|\\((?:[^)(]|\\((?:[^)(]|\\([^)(]*\\))*\\))*\\))*\\))",
      "(?:\")([^\"]*)(?:\")"
    ],
    [
      "((?:w)(?:[\\.a-zA-Z0-9]*)?\\((?:[^)(]|\\((?:[^)(]|\\((?:[^)(]|\\([^)(]*\\))*\\))*\\))*\\))",
      "(?:`)([^`]*)(?:`)"
    ]
  ],

The idea here is that the first part matches the whole "w(...) { ... }" function call, and then the second part matches any quoted sections within it. This should handle whitespace or strings starting/ending with a quote without problems. But it might have issues with escaped quotes.

The function-matching is based on this: https://stackoverflow.com/questions/546433/regular-expression-to-match-balanced-parentheses

I tried combining the second part into a conditional regex that would cover all of the quote alternatives, but for some reason I couldn't make that work.

Feel free to improve/share it if you come up with something better!

This works perfectly. It should be included in the official documentation.

felipeolliveira commented 1 year ago

@eduardodallmann @jpcmf and @jaukia Thank you, guys!

Jaukia's latest improvement worked great for me :rocket: