Best practice to compress css selector names?

What problem does this feature solve?

Hello. First, thank you for working on this useful tool.

My story: I tried to find information how to implement css selector name compression to reduce size of bundle, but I found only this article, which seems bit outdated: https://medium.com/@my_own_grave/reducing-css-generated-by-vue-loader-by-using-classnames-shorten-trick-aa1d25d77473

Is there a good solution for this task nowadays, or maybe someone solved it without monkey-patching css-loader? If it is solved somehow, I would like to see any example. I think, it would be great if vue-cli can provide such functionality.

Thanks in advance.

What does the proposed API look like?

I suggest to add some option to vue.config.js that will enable css class name compresion, such as: compressCssClassNames: true

[LinusBorg]

1. That only works with CSS modules
2. The vue-loader specific restriction mentioned in the article no longer applies.
3. People likely have many different opinions about what that id should look like.

You can simply add your own getLocalIdent function to the css loader options like this:

module.exports = {
  css: {
    loaderOptions: {
      css: {
        getLocalIdentName() => ...
        // or just:
		localIdentName: '[hash:6]'

      }
    }
  }
}

[georgyfarniev]

@LinusBorg thank you. Closing this issue.