Customize classNames generated by css modules

[MalikBagwala]

Currently css modules generate classNames according to the folder name , filename and class. I wanted it to generate a simpler 8 digit hash instead to make it more maintainable

eg. k7cz35w2 . Is there any way to achieve this?

[drwpow]

I actually want this as well 😄 . Currently there’s not a way to customize it, as we use the css-modules-loader-core implementation in Snowpack core. But I’m personally more of a fan of the [readable class name]-[hash] format which I see Next.js and some other projects using.

@FredKSchott thoughts on switching?

[FredKSchott]

+1 on switching but -1 on writing our own css-modules compiler. Is there a better one that supports this?

[drwpow]

Perhaps a good alternative to what we use now would be css-modules/generic-names:

var genericNames = require('generic-names');
var generate = genericNames('[name]__[local]___[hash:base64:5]', {
  context: process.cwd()
});
generate('foo', '/case/source.css'); // 'source__foo___3mRq8'

It’s the same project, same spec, well-supported and recently-updated (the wrapper hasn’t been touched in a while but the core is actively-maintained). I think this could generate more terse CSS classnames.

As to customizing itself I’d probably a soft -1 for configuration, unless we simply exposed the first param for genericNames() as an optional, advanced config. But I think this would generate classnames more like some other projects do.

[benmccann]

css-modules-loader-core is causing SvelteKit to not be compatible with npm 7. Not sure if any other Snowpack users have hit this yet, but it might be an additional reason to consider switching.

[FredKSchott]

Great catch, fix added: #1666