Remove underscore and integer from CSS Module localIdentName with single file components.

[DaemonCahill]

What problem does this feature solve?

I'm loving CSS Modules with Vue.js but am having an issue dealing with a static export for server side rendering. I've been using the following for my localIdentName in webpack config:

cssModules: { localIdentName: '[name]-[local]' },

However, all of my classnames are generating with an _0 at the end which appears to be the direct result of using CSS modules in single file components. If the style tag uses an external source then the integer will go away, and if there are multiple styles the integer will be incremented accordingly.

Ideally, there would be a workaround where I could use single file components with inline modules without having the _integer generated by default.

What does the proposed API look like?

Unclear. Presumably this would be a minor setting or customization in the webpack configuration for vue loader.

[DaemonCahill]

Attaching an image for reference:

[DaemonCahill]

Is there any indication whether this is an issue with Vue.js, Vue loader, or something external such as Webpack, CSS modules, PostCSS? That would be incredibly helpful...

[LinusBorg]

This is appended by vue-loader intentionally:

https://github.com/vuejs/vue-loader/blob/master/lib/loader.js#L154-L157

// Note:
// Class name is generated according to its filename.
// Different <style> tags in the same .vue file may generate same names.
// Append _[index] to class name to avoid this.

So with that reasoning explained, why would you want those indexes gone?

As a sidenote, can you explain to me your choice for localIdentName? I'm no CSS modules expert, but it seems to me your chosen naming convention would make it even more likely to create duplicate classnames across your app than the scenario that vue-router tries to prevent with the appended _0 index.

[DaemonCahill]

@LinusBorg Thanks Linus! I am something of an odd situation where I am writing a proprietary functional component library that needs to accommodate both a Vue implementation and exporting to a legacy system with accessible HTML and CSS class names. Using localIdentName appears to be the best way to build the modular infrastructure of the future without necessarily relying on it for absolute guaranteed uniqueness at this point in time.

Certainly open to suggestions if you have any!

[liamwang]

I strongly suggest removing the _[index] suffix of localIdentName.

<style module="a">
</style>

<style module="b">
</style>

<!--
class = "[base64]_a"
class = "[base64]_b"
-->

You must specify a value to module attribute when there is more than one <style> tags in the same .vue file.

Giving an error or warning like that when there is more than one <style> tags without value specified module in the same .vue file would be better.

After all, single moduled <style> tag in a .vue file is the most often case.

[Jinjiang]

I guess #1104 will help you.
Thanks.