fix: Generate meaningful CSS Modules class names (meteor-vue#357)

red-meadow · Akryum · commit 6f9c1eecb60f · 2019-08-29T15:01:48.000+02:00
Using class names in the form of `.&lt;vue_component_name&gt;_&lt;local_class_name&gt;__&lt;hash&gt;` (similarly to `vue-loader`) instead of `.vue-module-&lt;hash&gt;-&lt;hash&gt;` should simplify debugging a lot.
diff --git a/packages/vue-component/plugin/tag-handler.js b/packages/vue-component/plugin/tag-handler.js
@@ -358,9 +358,10 @@ VueComponentTagHandler = class VueComponentTagHandler {
                 if (cssModules === undefined) { cssModules = {} }
                 cssModules[moduleName] = { ...(cssModules[moduleName] || {}), ...json }
               },
-              generateScopedName (exportedName, filePath) {
-                return `vue-module-${Hash(filePath)}-${Hash(exportedName)}`
-              },
+
+              // Generate a class name in the form of .<vue_component_name>_<local_class_name>__<hash>
+              // Ref.: https://github.com/css-modules/postcss-modules#generating-scoped-names
+              generateScopedName: '[name]_[local]__[hash:base64:5]'
             }))
             isAsync = true
           }
