From f97e67664a8db3fde4a87c72ee96d357b7547863 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Fri, 6 Apr 2018 17:41:25 -0400
Subject: [PATCH] feat: support style/script hoisting + css modules

---
 docs/test.md                  |  5 ----
 docs/using-vue.md             |  9 +++----
 lib/markdown/component.js     |  6 ++---
 lib/markdown/hoist.js         | 20 +++++++++++++++
 lib/markdown/index.js         |  2 ++
 lib/webpack/baseConfig.js     | 47 ++++++++++++++++++++---------------
 lib/webpack/markdownLoader.js |  9 +++++--
 package.json                  |  2 +-
 yarn.lock                     |  6 ++---
 9 files changed, 67 insertions(+), 39 deletions(-)
 delete mode 100644 docs/test.md

diff --git a/docs/test.md b/docs/test.md
deleted file mode 100644
index 8d5c7ab7e5..0000000000
--- a/docs/test.md
+++ /dev/null
@@ -1,5 +0,0 @@
-<demo-1></demo-1>
-
-<Demo>
-  <p>hello</p>
-</Demo>
diff --git a/docs/using-vue.md b/docs/using-vue.md
index 06cb227221..0839db3ce4 100644
--- a/docs/using-vue.md
+++ b/docs/using-vue.md
@@ -79,10 +79,10 @@ Make sure a custom component's names either contains a hyphen or is in PascalCas
 
 Sometimes you may need to apply some JavaScript or CSS only to the current page. In those case you can directly write root-level `<script>` or `<style>` blocks in the markdown file, and they will be hoisted out of the compiled HTML and used as the `<script>` and `<style>` blocks for the resulting Vue single-file component.
 
-<div id="inline-script-style-example"></div>
+<div :class="$style.example"></div>
 
-<!-- <style>
-#inline-script-style-example {
+<style module>
+.example {
   color: #41b883;
 }
 </style>
@@ -90,9 +90,8 @@ Sometimes you may need to apply some JavaScript or CSS only to the current page.
 <script>
 export default {
   mounted () {
-    document.getElementById('inline-script-style-example')
+    document.querySelector(`.${this.$style.example}`)
       .textContent = 'Hello from inline script!'
   }
 }
 </script>
- -->
diff --git a/lib/markdown/component.js b/lib/markdown/component.js
index 749adf43ed..1aab66e81b 100644
--- a/lib/markdown/component.js
+++ b/lib/markdown/component.js
@@ -1,7 +1,7 @@
 // Replacing the default htmlBlock rule to allow using custom components at
 // root level
 
-const blockNames = require('markdown-it/lib/common/htmlBlocks')
+const blockNames = require('markdown-it/lib/common/html_blocks')
 const HTML_OPEN_CLOSE_TAG_RE = require('markdown-it/lib/common/html_re').HTML_OPEN_CLOSE_TAG_RE
 
 // An array of opening and corresponding closing sequences for html tags,
@@ -21,7 +21,7 @@ const HTML_SEQUENCES = [
 ]
 
 module.exports = md => {
-  md.block.ruler.at('htmlBlock', htmlBlock)
+  md.block.ruler.at('html_block', htmlBlock)
 }
 
 function htmlBlock (state, startLine, endLine, silent) {
@@ -73,7 +73,7 @@ function htmlBlock (state, startLine, endLine, silent) {
 
   state.line = nextLine
 
-  const token = state.push('htmlBlock', '', 0)
+  const token = state.push('html_block', '', 0)
   token.map = [startLine, nextLine]
   token.content = state.getLines(startLine, nextLine, state.blkIndent, true)
 
diff --git a/lib/markdown/hoist.js b/lib/markdown/hoist.js
index fb54163953..48313efa4f 100644
--- a/lib/markdown/hoist.js
+++ b/lib/markdown/hoist.js
@@ -1,3 +1,23 @@
 module.exports = md => {
+  const RE = /^<(script|style)(?=(\s|>|$))/i
+  let hoistedTags
 
+  md.renderer.rules.html_block = (tokens, idx) => {
+    const content = tokens[idx].content
+    if (hoistedTags && RE.test(content.trim())) {
+      hoistedTags.push(content)
+      return ''
+    } else {
+      return content
+    }
+  }
+
+  md.renderWithHoisting = (...args) => {
+    hoistedTags = []
+    const html = md.render(...args)
+    return {
+      html,
+      hoistedTags
+    }
+  }
 }
diff --git a/lib/markdown/index.js b/lib/markdown/index.js
index 9c1eaf8f73..2ef788bcb0 100644
--- a/lib/markdown/index.js
+++ b/lib/markdown/index.js
@@ -1,6 +1,7 @@
 const highlight = require('./highlight')
 const highlightLines = require('./highlightLines')
 const component = require('./component')
+const hoistScriptStyle = require('./hoist')
 const convertRouterLink = require('./link')
 const emoji = require('markdown-it-emoji')
 const anchor = require('markdown-it-anchor')
@@ -21,6 +22,7 @@ module.exports = ({ markdown = {}}) => {
     .use(component)
     .use(highlightLines)
     .use(convertRouterLink)
+    .use(hoistScriptStyle)
     // 3rd party plugins
     .use(emoji)
     .use(anchor, Object.assign({ permalink: true, permalinkBefore: true }, markdown.anchor))
diff --git a/lib/webpack/baseConfig.js b/lib/webpack/baseConfig.js
index 6e59916a2a..ae6aaa608f 100644
--- a/lib/webpack/baseConfig.js
+++ b/lib/webpack/baseConfig.js
@@ -134,26 +134,33 @@ module.exports = function createBaseConfig ({
         })
 
   function createCSSRule (lang, test, loader, options) {
-    const rule = config.module
-      .rule(lang)
-        .test(test)
-
-    if (isProd) {
-      rule
-        .use('extract-css-loader').loader(CSSExtractPlugin.loader).end()
-        .use('css-loader').loader('css-loader').options({ minimize: true })
-    } else {
-      rule
-        .use('vue-style-loader').loader('vue-style-loader').end()
-        .use('css-loader').loader('css-loader')
-    }
-
-    rule.use('postcss-loader').loader('postcss-loader').options({
-      plugins: [require('autoprefixer')]
-    })
-
-    if (loader) {
-      rule.use(loader).loader(loader).options(options)
+    const baseRule = config.module.rule(lang).test(test)
+    const modulesRule = baseRule.oneOf('modules').resourceQuery(/module/)
+    const normalRule = baseRule.oneOf('normal')
+
+    applyLoaders(modulesRule, true)
+    applyLoaders(normalRule, false)
+
+    function applyLoaders (rule, modules) {
+      if (isProd) {
+        rule.use('extract-css-loader').loader(CSSExtractPlugin.loader)
+      } else {
+        rule.use('vue-style-loader').loader('vue-style-loader')
+      }
+
+      rule.use('css-loader').loader('css-loader').options({
+        modules,
+        minimize: isProd,
+        localIdentName: `[local]_[hash:base64:8]`
+      })
+
+      rule.use('postcss-loader').loader('postcss-loader').options({
+        plugins: [require('autoprefixer')]
+      })
+
+      if (loader) {
+        rule.use(loader).loader(loader).options(options)
+      }
     }
   }
 
diff --git a/lib/webpack/markdownLoader.js b/lib/webpack/markdownLoader.js
index 24064b65a7..f77eae089d 100644
--- a/lib/webpack/markdownLoader.js
+++ b/lib/webpack/markdownLoader.js
@@ -4,6 +4,11 @@ const frontmatter = require('yaml-front-matter')
 module.exports = function (src) {
   const { markdown } = getOptions(this)
   const content = frontmatter.loadFront(src).__content
-  const html = markdown.render(content)
-  return `<template><div class="markdown">${html}</div></template>`
+  const { html, hoistedTags } = markdown.renderWithHoisting(content)
+  return (
+    `<template>\n` +
+      `<div class="markdown">${html}</div>\n` +
+    `</template>\n` +
+    hoistedTags.join('\n')
+  )
 }
diff --git a/package.json b/package.json
index b1993f8266..3e46ee9026 100644
--- a/package.json
+++ b/package.json
@@ -70,7 +70,7 @@
     "rimraf": "^2.6.2",
     "url-loader": "^1.0.1",
     "vue": "^2.5.16",
-    "vue-loader": "^15.0.0-beta.7",
+    "vue-loader": "^15.0.0-rc.1",
     "vue-router": "^3.0.1",
     "vue-server-renderer": "^2.5.16",
     "vue-template-compiler": "^2.5.16",
diff --git a/yarn.lock b/yarn.lock
index 72c4b40aa1..653176cc4d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5766,9 +5766,9 @@ vue-hot-reload-api@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.0.tgz#97976142405d13d8efae154749e88c4e358cf926"
 
-vue-loader@^15.0.0-beta.7:
-  version "15.0.0-beta.7"
-  resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-15.0.0-beta.7.tgz#2066ea26a940eed1fd97d2751c6abf5282f87b54"
+vue-loader@^15.0.0-rc.1:
+  version "15.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-15.0.0-rc.1.tgz#b34009276e7681f541967e151357b56158efa9b3"
   dependencies:
     "@vue/component-compiler-utils" "^1.0.0"
     hash-sum "^1.0.2"