Improvement to autocomplete for camelization of classnames

[kumarharsh]

Hi, it's really good to see the autocomplete coming to imported css-modules. I'm using a flag in my css-loader named camelCase which lets me write camelCase class names in my javascript, but still let me write kebab-case classes in my css file. Can this plugin support that usecase? I can submit a PR if you'd like to include it in the plugin.

[clinyong]

Yes, I am so glad to see your PR.

[evisong]

I've got the same requirement: styles['link-label-disabled']. Looking forward to this PR.

Also, thanks for the plugin.

[evisong]

Hi, @kumarharsh and @clinyong , we have different use case in our project.

To our developers, CSSModule's camelCase=true changes link-label-disabled to linkLabelDisabled, which seems kinds of "magic" and is implicit. They prefer to keep using styles['link-label-disabled'] instead of styles.linkLabelDisabled in JS so that future search/replace would be easier.

Btw, in bundled JS, CSSModule's camelCase=true keeps the original key and appends a new camelCase key, which is somehow a duplicate. This may add 70 kB bundle size when there is 1000 CSS Module classes in the project.

Is it possible to support such use case in the plugin as well?

Looking forward to your feedback. Thanks.

[kumarharsh]

@evisong If your devs use the kebab-case classes in JS, then you don't need to set camelCase property at all.

[clinyong]

@kumarharsh is right. And I prefer camelCase classes in JS.

Btw, in bundled JS, CSSModule's camelCase=true keeps the original key and appends a new camelCase key, which is somehow a duplicate. This may add 70 kB bundle size when there is 1000 CSS Module classes in the project.

The plugin can not do this.

[kumarharsh]

The plugin can not do this.

@evisong The retention of the original key and the camelized keys is done by the css-loader plugin. You'll have to ask them for this. This is just an editor plugin.

[evisong]

If your devs use the kebab-case classes in JS, then you don't need to set camelCase property at all.

@kumarharsh, thanks for your timely response, sorry I didn't notice the email notification.

Maybe a picture would better explain my proposed feature:

Please look into the yellow text, when selecting ['link-in-group'] option, the plugin will automatically delete the . and append ['link-in-group'] in editor, @clinyong do you think this is a valid use case?

Thanks.

[evisong]

The retention of the original key and the camelized keys is done by the css-loader plugin. You'll have to ask them for this.

@kumarharsh You're right. Will do, thanks.

[kumarharsh]

@evisong it's already done actually 😉 webpack/css-loader#440 (comment)

[evisong]

it's already done actually 😉 webpack/css-loader#440 (comment)

You're super! Thanks.

[evisong]

Just created a similar ticket to css-modules-require-hook: css-modules/css-modules-require-hook#89, as we're using babel-plugin-css-modules-transform instead of css-loader.