How to get class names suggestion in css for class names defined in React Component?

[mark-night]

Document says "className" and "class" in TypeScript React, JavaScript and JavaScript React language modes does this mean class names defined in React Component will be included in autocomplete suggestions? I have these in my vscode user settings: "html-css-class-completion.includeGlobPattern": "**/*.{css,scss,sass,eex,slim,haml,svelte,tpl,latte,php,html,twig,js}" (appended "js" to the default patterns) I've clicked the lighting icon in status bar to cache class names, but still, class names defined in React Component are missing in suggestion list when I edit css files.

Any idea?

[gencer]

Hi @mark-night

Sorry for the misleading documentation. At the moment, there is no way to include defined classnames from TypeScript/React (TSX/JSX) in autocomplete but this can be done of course.

How do you define classnames, can you gave me an example?

I may create a custom parser for tsx/jsx files so that it can be included in intellisense (and without clicking cache button. Just save it then type it elsewhere.)

See current parses from: https://github.com/gencer/SCSS-Everywhere/tree/master/src/parse-engines/types

[mark-night]

Hi @gencer thank you for making this clear. As for defining classnames in React Component, I just include className="some-class some-other-class" in the html tags returned by the component, nothing special. It's common to reference javascript variable in the definition as well, in which case it might look like this className={someVariable + " some-class"}.

[gencer]

className="some-class some-other-class" would be extremely easy to parse. However, I doubt for notations and merges like variable and string. For example;

className={someVariable + " some-class"}

In this case, I may able to show you "some-class" but will not be possible to show someVariable. Because it is dynamic. Also let's say you have something like this:

const my_prefix = "hello"
className={`${my_prefix}-class`}

// Expected Output:
// > hello-class

// Actual Output:
// > -class

I'm not so sure in this case too.

But as for first example, It will be very easy to parse them.

I'm evaluating my possible solutions at the moment...

[mark-night]

It makes sense to only parse explicitly coded class names. I guess I understand it. Thank you gencer!

[gencer]

First phase of implementation is in new version.

[mark-night]

First phase of implementation is in new version.

Does the vs code extension auto update? I can see in my vs code the installed version is 1.7.6, and plain classes defined in JSX via "className" are showing up when editing scss files. Great job! Thank you.

[gencer]

Yes, If you didn't disable that auto update feature, It will do.

v1.7.6 has simple auto complete from JSX/TSX to SCSS/CSS. I will improve it more. Let me know if you see something weird in this feature.

[mark-night]

Sure thing! Thank you gencer!

[LeeBuckle]

v1.7.6 has simple auto complete from JSX/TSX to SCSS/CSS. I will improve it more. Let me know if you see something weird in this feature.

@gencer thanks for this, it makes writing SCSS so much easier! Just need to figure out how to make it cache automatically so I don't have to click the lightening bolt now 😅

Is it possible to enable it for .js files too? In my react and next.js projects I don't usually use the .jsx extension. I tried adding 'js' to the glob pattern but that doesn't seem to work.

[gencer]

@LeeBuckle Thank you for your kind words. As I mentioned in other issue, I'll be working on in 1-2 weeks. You can read more on that issue.