intellisense support (question)

[ryankauk]

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]

@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

2. 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.

3. 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]

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]

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]

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]

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]

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

Jaukia's latest improvement worked great for me 🚀