feat: css modules + hmr

Author: yyx990803

lib/hotReload.js

@@ -1,7 +1,6 @@
 const hotReloadAPIPath = require.resolve('vue-hot-reload-api')
 
 exports.genHotReloadCode = (id, functional) => {
-  // TODO handle CSSModules and style injection disposal
   return wrap(`
     if (!module.hot.data) {
       api.createRecord('${id}', component.options)

lib/index.js

@@ -74,7 +74,7 @@ module.exports = function (source) {
   if (descriptor.template) {
     const src = descriptor.template.src || resourcePath
     const langQuery = getLangQuery(descriptor.template)
-    const idQuery = hasScoped ? `&id=${id}` : ``
+    const idQuery = `&id=${id}`
     const fnQuery = hasFunctional ? `&functional` : ``
     const commentQuery = hasComment ? `&comment` : ``
     const query = `?vue&type=template${idQuery}${langQuery}${fnQuery}${commentQuery}`

lib/styleInjection.js

@@ -14,7 +14,7 @@ module.exports = function genStyleInjectionCode (
   let styleInjectionCode = ``
   let cssModulesHotReloadCode = ``
 
-  const hasCSSModules = false
+  let hasCSSModules = false
   const cssModuleNames = new Map()
 
   function genStyleRequest (style, i) {
@@ -26,6 +26,8 @@ module.exports = function genStyleInjectionCode (
   }
 
   function genCSSModulesCode (style, request, i) {
+    hasCSSModules = true
+
     const moduleName = style.module === true ? '$style' : style.module
     if (cssModuleNames.has(moduleName)) {
       loaderContext.emitError(`CSS module name ${moduleName} is not unique!`)

package.json

@@ -6,7 +6,8 @@
   "scripts": {
     "test": "jest --env node",
     "lint": "eslint lib test --fix",
-    "build": "webpack --config exploration/webpack.config.js"
+    "build": "webpack --config exploration/webpack.config.js",
+    "dev": "webpack-dev-server --config exploration/webpack.config.js --inline --hot"
   },
   "author": "Evan You",
   "license": "MIT",
@@ -31,6 +32,21 @@
     "css-loader": "*",
     "vue-template-compiler": "^2.0.0"
   },
+  "dependencies": {
+    "consolidate": "^0.15.0",
+    "debug": "^3.1.0",
+    "hash-sum": "^1.0.2",
+    "loader-utils": "^1.1.0",
+    "lru-cache": "^4.1.2",
+    "postcss": "^6.0.20",
+    "postcss-selector-parser": "^3.1.1",
+    "prettier": "^1.11.1",
+    "source-map": "^0.5.6",
+    "vue-component-compiler": "vuejs/vue-component-compiler#master",
+    "vue-hot-reload-api": "^2.3.0",
+    "vue-style-loader": "^4.1.0",
+    "vue-template-es2015-compiler": "^1.6.0"
+  },
   "devDependencies": {
     "babel-core": "^6.26.0",
     "babel-loader": "^7.1.4",
@@ -61,20 +77,5 @@
     "webpack-dev-server": "^3.1.1",
     "webpack-merge": "^4.1.2",
     "yorkie": "^1.0.3"
-  },
-  "dependencies": {
-    "consolidate": "^0.15.0",
-    "debug": "^3.1.0",
-    "hash-sum": "^1.0.2",
-    "loader-utils": "^1.1.0",
-    "lru-cache": "^4.1.2",
-    "postcss": "^6.0.20",
-    "postcss-selector-parser": "^3.1.1",
-    "prettier": "^1.11.1",
-    "source-map": "^0.5.6",
-    "vue-component-compiler": "vuejs/vue-component-compiler#master",
-    "vue-hot-reload-api": "^2.3.0",
-    "vue-style-loader": "^4.1.0",
-    "vue-template-es2015-compiler": "^1.6.0"
   }
 }