Extension doesn't work with modules like "classnames"

[shadoworion]

Extension autocomplete doesn't work in code like this:

import cx from "classnames"

...

<div className={cx("flex flex-row justify-center items-center", { "mr-2": align === "right", "ml-2": align === "left" })}></div>

[alexanderniebuhr]

It should. Also you can setup .includeLanguages to support your custom pattern

[epavanello]

It should. Also you can setup .includeLanguages to support your custom pattern

Can you provide the custom pattern?

[epavanello]

That solved the problem for me:

"windicss.includeLanguages": {
    "svelte": {  // .svelte or your extension file
      "type": "html",
      "patterns": [
        "classnames\\(([^)]*)\\)",
        "[\"'`]([^\"'`]*).*?[\"'`]"
      ],
    },
  }

[sin7777]

@epavanello Why doesn't it work in my .tsx file, can you help me see it

"windicss.includeLanguages": {
    "tsx": {  // .tsx or your extension file
      "type": "html",
      "patterns": [
        "classnames\\(([^)]*)\\)",
        "[\"'`]([^\"'`]*).*?[\"'`]"
      ],
    },
  }

[epavanello]

@epavanello Why doesn't it work in my .tsx file, can you help me see it

"windicss.includeLanguages": {
    "tsx": {  // .tsx or your extension file
      "type": "html",
      "patterns": [
        "classnames\\(([^)]*)\\)",
        "[\"'`]([^\"'`]*).*?[\"'`]"
      ],
    },
  }

Verify to restart your vscode after each config change. Anyway, that pattern works for me but isn’t perfect, because the extension suggests windi classes also out of classnames utility function 🤦🏻‍♂️ New suggestions are appreciated

[sin7777]

@epavanello Do you have Hover Preview when hovering over it?

[alexanderniebuhr]

I wonder why it's not working by default.. Have to check that again

[epavanello]

@epavanello Do you have Hover Preview when hovering over it?

Yes

[bluescurry]

I ran into the same problem. Here is my vscode configuration, everything else is the default configuration of windicss-intellisense

"windicss.enableCodeFolding": true,
    "windicss.includeLanguages": {
        "tsx": { // .tsx
            "type": "html",
            "patterns": [
                "classnames\\(([^)]*)\\)",
                "[\"'`]([^\"'`]*).*?[\"'`]"
            ],
        },
    }

[galkatz373]

This should work

"windicss.includeLanguages": {
    "typescriptreact": {
      "type": "js",
      "patterns": ["(\\s+class(Name)?\\s*=\\s*{?\\s*(cx\\((.*[{,]\\s?)?)?[\"'\\`])[^\"'\\`]*$"]
    }
  },

[bluescurry]

I tried your configuration, unfortunately it didn't work.Is it ok for you to apply to your TSX files?

[epavanello]

Nothings works

[alexanderniebuhr]

There are many reasons why this issue did not get any more bandwidth or attention, one being not clear enough what is broken by providing a test repo, another that we don't use tsx files at all.

I think there is a fix to this, and it would be great if it will get fixed at some point. But upfront there is very little chance that we have time right now for this. We do accept PRs with a solution as well with a way to support tsx natively without the includeLanguages setting.