hovering / color decoration support for custom patterns

[jamessouth]

Hello, there doesn't seem to be a way to customize class name contexts like in TW. Here is the TW issue. Intellisense works with className=.... but not with className: .... etc. Could such support be added?

Thank you!

[alexanderniebuhr]

You can configure that with custom regex pattern I guess.

[alexanderniebuhr]

for that className: .... i think it would something like this

"windicss.includeLanguages": {
    "<filetype_identifier>": {
        "type":"html",
        "patterns": [
            (\\s*class(Name)?\\s*\\:\\s*{?\\s*[\"'`])[^\"'`]*$
        ]
    }
},

[jamessouth]

well I tried several regexes, including what worked for me with TW, for js/jsreact and couldn't get it to recognize className: ...., but thank you for your help.

[alexanderniebuhr]

If you can show me an example code, I could look into it for you.

[jamessouth]

JS like this, React without JSX, also similar to the JS ReScript compiles to:

//App.js
const ce = React.createElement;
export default function App() {
  return ce(
        "div",
        {
          className: "mt-8",
        }
  );
}

Hovering over the 'mt-8' does nothing unless I replace the ': ' with an equal sign. So in settings I tried:

"windicss.includeLanguages": {
    "<filetype_identifier>": {
        "type":"html",
        "patterns": [
            "(\\s*class(Name)?\\s*\\:\\s*{?\\s*[\"'`])[^\"'`]*$"
        ]
    }
}

with javascript and javascriptreact for filetype_identifier, html and js for type, and your suggested regex plus "(\\s*class(Name)?\\s*\\:\\s*{?\\s*[\"'`])[^\"'`]*\"" and "className:\\s*\"([^\"]*)\"" for patterns. I reloaded the window each time but never got it to show the CSS class definition on hover.

[alexanderniebuhr]

@jamessouth, so does autocomplete of classes works?
I think includeLanguages has only support for autocomplete for now, color boxes and hovering had to be added in another PR. :/

[alexanderniebuhr]

https://github.com/windicss/windicss-intellisense/releases/tag/v0.21.4

[jamessouth]

Yes, thank you, with this on 21.4

    "windicss.includeLanguages": {
        "rescript": "html",
        "javascript": {
            "type":"js",
            "patterns": [
                "(\\s*class(Name)?\\s*\\:\\s*{?\\s*[\"'`])[^\"'`]*$"
            ]
        }
    }

the JS hovering and class completion work, but I am not getting color boxes in JS once I select a class from the drop-down menu. I do get color boxes in rescript files though.

[alexanderniebuhr]

yeah that is something i have to include in a later release

[jamessouth]

Ok. Thank you for all your help Alexander!