gencer/SCSS-Everywhere

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

mark-night opened this issue · 10 comments

mark-night commented

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 commented

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 commented

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 commented

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 commented

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

gencer commented

First phase of implementation is in new version.

mark-night commented

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.

  • 👍2
  • 🚀1
gencer commented

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.

  • ❤️1
mark-night commented

Sure thing! Thank you gencer!

LeeBuckle commented

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 commented

@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.