Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

classRegex in a complex js object #984

Open
Nagell opened this issue Jun 19, 2024 · 2 comments
Open

classRegex in a complex js object #984

Nagell opened this issue Jun 19, 2024 · 2 comments
Assignees

Comments

@Nagell
Copy link

Nagell commented Jun 19, 2024

What version of Tailwind CSS are you using?

For example: v3.4.3

What build tool (or framework if it abstracts the build tool) are you using?

N/A

What version of Node.js are you using?

For example: v18.18.0

What browser are you using?

N/A

What operating system are you using?

macOS, Windows

Other infos

VSCode version: 1.90.1
Tailwind CSS IntelliSense plugin version: v0.10.5

Reproduction URL

https://github.com/Nagell/tailwind_issue

Describe your issue

Hi there.

We are working with the newest PrimeVue tailwind based components. PrimeVue team provided a bunch of files which can be used to restyle their components, but these are containing quite complex js objects (sample below). We managed to create some regex expressions for the classRegex setting.

Starting point

Sample file can be found here

Config can be found here

"tailwindCSS.experimental.classRegex": [
    [
        // find the inner part in every "class: [inner_part]"
        "class:\\s*\\[((?:[^[\\]]|\\[(?:[^[\\]]|\\[[^[\\]]*\\])*])*?)\\]",
        // find every string from the previous results
        "(?:['\"`]([^'\"`]*)['\"`])"
    ],
],

Here you can find samples if you wanna try them out:

Problem

'On the paper' it should work. All is fine in https://regex101.com/.
We can see all color indicators (not only in the last 25 stings) for default tailwind colors in classes like border-gray-500 etc, but intellisense is working differently. Only the last 25 strings from every group filtered with the first regex are providing intellisense.

Assumption

This number is somehow to round to be a coincidence, so I assume that it's some internal optimization.

We've tried another approaches but it seems that every array of regex expressions limits its results to last 25 matches. Is there any option for increasing this number or writing a regex which will cover any of the strings separately? Important: it would have to be a string inside of the class: ['string somewhere here'] otherwise it produces false positives in other places.

@thecrypticace thecrypticace self-assigned this Jun 19, 2024
@thecrypticace thecrypticace transferred this issue from tailwindlabs/tailwindcss Jun 19, 2024
@thecrypticace
Copy link
Contributor

We slice the document to [0, cursor position + 2000 characters] when matching against a custom regex for completions, hovers, etc… We do this for performance reasons. The reason you're seeing problems is that the custom regex requires an ending ] and it's being clipped when the text is long enough. I think we could bump the range to something larger or possibly make it configurable.

@Nagell
Copy link
Author

Nagell commented Jul 5, 2024

Thank you for your answer. This explains a lot :)
Bumping it would be nice, making configurable even better.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants