tailwindcss-intellisense icon indicating copy to clipboard operation
tailwindcss-intellisense copied to clipboard

classRegex in a complex js object

Open Nagell opened this issue 2 months ago • 2 comments

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.

Nagell avatar Jun 19 '24 13:06 Nagell