Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support dynamic access of CSS module classes #86

Closed
strlns opened this issue Mar 1, 2023 · 4 comments · Fixed by #87
Closed

Support dynamic access of CSS module classes #86

strlns opened this issue Mar 1, 2023 · 4 comments · Fixed by #87
Assignees
Labels
enhancement New feature or request help wanted Extra attention is needed

Comments

@strlns
Copy link
Collaborator

strlns commented Mar 1, 2023

Is your feature request related to a problem? Please describe.
Admittedly this is an edge case and probably hard to implement, but if I do something like

classNames[size]

, VSCode flags it as a "problem":

Selector 'size' does not exist in 'src/styles/Container.module.css'.

Describe the solution you'd like
Ideal solution:

Probably you'd need to use VSCode's TypeScript language server to try and statically analyze if the given
string corresponds to a valid selector. This might be overly expensive or hard to implement, I'm not sure.

Pragmatic solution
Detect dynamic property access and print a different or no warning in this case. Also, the warning seems to assume size is used as a literal property name in my example, which it definitely is not.

Differentiating dynamic and static access would allow me to disable the warning for dynamic property access, but still benefit from the warning for a static selector.

Describe alternatives you've considered

Additional context
image

@strlns strlns added the enhancement New feature or request label Mar 1, 2023
@Viijay-Kr
Copy link
Owner

@strlns Thanks for opening the issue.

I do like your ideas ,

Probably you'd need to use VSCode's TypeScript language server to try and statically analyze if the given
string corresponds to a valid selector. This might be overly expensive or hard to implement, I'm not sure.

This could be achieved through a typescript server plugin by intercepting the editor actions such as hover and definition.
However it might be expensive to implement.

Detect dynamic property access and print a different or no warning in this case. Also, the warning seems to assume size is used as a literal property name in my example, which it definitely is not.

This might be a littler easier to compute thus requiring less effort. I will try to resolve this sooner in the meantime if you'd like to contribute feel free to open a PR

@Viijay-Kr
Copy link
Owner

@strlns

Detect dynamic property access and print a different or no warning in this case. Also, the warning seems to assume size is used as a literal property name in my example, which it definitely is not.

This turned to be quite easy to plug in. So it should be fixed by #87

In the future it might be possible to provided some nice solution to the first idea you presented.

I can open a new issue by listing out various possible actions that can happen applied to dynamic selectors

@strlns
Copy link
Collaborator Author

strlns commented Mar 1, 2023

Nice!
I have not contributed to VSCode extensions before so I was just starting to read the docs.
Will look at your fix and extension code for learning a bit about extension development.
Thank you for your swift reaction!
Moritz

@Viijay-Kr
Copy link
Owner

@strlns I opened a new issue #88 where I've brainstormed a bit . feel free to join that thread to provide your input.

Again, thanks for opening this issue

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request help wanted Extra attention is needed
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants