Open ryankauk opened 2 years ago
@ryankauk @vinpac
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
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
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!
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])?))\\))",
]
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.
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!
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.
@eduardodallmann @jpcmf and @jaukia Thank you, guys!
Jaukia's latest improvement worked great for me :rocket:
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