From 1d7883ac8cb3ddd199ba3921056e3926e44946a5 Mon Sep 17 00:00:00 2001
From: red-meadow <38740713+red-meadow@users.noreply.github.com>
Date: Tue, 9 Apr 2019 23:13:27 +0300
Subject: [PATCH] Generate meaningful CSS Modules class names

Using class names in the form of `.<vue_component_name>_<local_class_name>__<hash>` (similarly to `vue-loader`) instead of `.vue-module-<hash>-<hash>` should simplify debugging a lot.
---
 packages/vue-component/plugin/tag-handler.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/vue-component/plugin/tag-handler.js b/packages/vue-component/plugin/tag-handler.js
index 4bc17c6..ee74d80 100644
--- 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
           }