local css

Author: yyx990803

lib/css-rewriter.js

@@ -1,7 +1,17 @@
 var loaderUtils = require('loader-utils')
 var selectorPath = require.resolve('./selector')
 var parserPath = require.resolve('./parser')
-var cssRewriterPath = require.resolve('./css-rewriter')
+
+var defaultLang = {
+  template: 'html',
+  style: 'css',
+  script: 'js'
+}
+
+var rewriters = {
+  template: require.resolve('./template-rewriter') + '!',
+  style: require.resolve('./style-rewriter') + '!'
+}
 
 module.exports = function (content) {
   var self = this
@@ -17,25 +27,13 @@ module.exports = function (content) {
   loaders.css = loaders.css || 'style!css'
   loaders.js = loaders.js || ''
 
-  var loaderPrefix = {
-    template: 'html!template-html-loader?raw&engine=',
-    style: 'style!css!',
-    script: ''
-  }
-
-  var defaultLang = {
-    template: 'html',
-    style: 'css',
-    script: 'js'
-  }
-
-  function getRequire (type, part, index) {
+  function getRequire (type, part, index, local) {
     return 'require(' +
       loaderUtils.stringifyRequest(self,
         // disable system loaders (except post loaders)
         '-!' +
         // get loader string for pre-processors
-        getLoaderString(type, part) +
+        getLoaderString(type, part, local) +
         // select the corresponding part from the vue file
         getSelectorString(type, index || 0) +
         // the url to the actual vuefile
@@ -54,14 +52,25 @@ module.exports = function (content) {
     ')\n'
   }
 
-  function getLoaderString (type, part) {
+  function getLoaderString (type, part, local) {
     var lang = part.lang || defaultLang[type]
-    var localCssString = type === 'style' && part.local
-      ? cssRewriterPath + '!'
-      : ''
-    return loaders[lang] !== undefined
-      ? loaders[lang] + '!' + localCssString
-      : loaderPrefix[type] + localCssString + lang + '!'
+    var rewriter = local ? rewriters[type] || '' : ''
+    var loader = loaders[lang]
+    if (loader !== undefined) {
+      // lang with default or pre-configured loader
+      if (loader) loader += '!'
+      return loader + rewriter
+    } else {
+      // unknown lang, assume a loader for it is used
+      switch (type) {
+      case 'template':
+        return 'html!' + rewriter + 'template-html-loader?raw&engine=' + lang + '!'
+      case 'style':
+        return 'style!css!' + rewriter + lang + '!'
+      case 'script':
+        return lang + '!'
+      }
+    }
   }
 
   function getSelectorString (type, index) {
@@ -78,6 +87,7 @@ module.exports = function (content) {
     // parser.js on the raw vue file and get the parsing result
     // which is an object that contains info about the vue file.
     var parts = self.exec(source, url)
+    var hasLocalStyles = false
 
     // add requires for src imports
     parts.includes.forEach(function (include) {
@@ -86,19 +96,20 @@ module.exports = function (content) {
 
     // add requires for styles
     parts.style.forEach(function (style, i) {
-      output += getRequire('style', style, i)
+      if (style.local) hasLocalStyles = true
+      output += getRequire('style', style, i, hasLocalStyles)
     })
 
     // only one script tag allowed
     if (parts.script.length) {
       output += 'module.exports = ' +
-        getRequire('script', parts.script[0])
+        getRequire('script', parts.script[0], 0, hasLocalStyles)
     }
 
     // only one template tag allowed
     if (parts.template.length) {
       output += 'module.exports.template = ' +
-        getRequire('template', parts.template[0])
+        getRequire('template', parts.template[0], 0, hasLocalStyles)
     }
 
     // done

lib/loader.js

@@ -0,0 +1,33 @@
+var postcss = require('postcss')
+var nested = require('postcss-nested')
+var hash = require('hash-sum')
+
+var currentClass
+var rootRE = /:root\b/g
+var processRoot = postcss.plugin('process-root', function () {
+  return function (root) {
+    root.each(function (node) {
+      node.each(function (node) {
+        if (rootRE.test(node.selector)) {
+          // replace :root selector
+          node.selector = node.selector.replace(rootRE, currentClass)
+          // move the node to the outer scope to avoid nesting
+          node.moveBefore(root.nodes[0])
+        }
+      })
+    })
+  }
+})
+
+module.exports = function (css) {
+  this.cacheable()
+  var cb = this.async()
+  var cls = currentClass = '.v-' + hash(this.resourcePath)
+  css = cls + '{' + css + '}'
+  postcss([processRoot, nested])
+    .process(css)
+    .then(function (result) {
+      cb(null, result)
+    })
+    .catch(cb)
+}

lib/style-rewriter.js

@@ -0,0 +1,30 @@
+var parse5 = require('parse5')
+var parser = new parse5.Parser()
+var serializer = new parse5.Serializer()
+var hash = require('hash-sum')
+
+module.exports = function (html) {
+  this.cacheable()
+  var cls = 'v-' + hash(this.resourcePath)
+  var tree = parser.parseFragment(html)
+  tree.childNodes.forEach(function (node) {
+    if (node.attrs) {
+      var hasClass = false
+      for (var i = 0, l = node.attrs.length; i < l; i++) {
+        var attr = node.attrs[i]
+        if (attr.name === 'class') {
+          attr.value += ' ' + cls
+          hasClass = true
+          break
+        }
+      }
+      if (!hasClass) {
+        node.attrs.push({
+          name: 'class',
+          value: cls
+        })
+      }
+    }
+  })
+  return serializer.serialize(tree)
+}

lib/template-rewriter.js

@@ -23,8 +23,10 @@
     "test": "eslint lib && mocha test/test.js --slow 2000"
   },
   "dependencies": {
+    "hash-sum": "^1.0.2",
     "loader-utils": "^0.2.10",
-    "parse5": "^1.5.0"
+    "parse5": "^1.5.0",
+    "postcss": "^4.1.16"
   },
   "peerDependencies": {
     "css-loader": "^0.15.4",

package.json

@@ -0,0 +1 @@
+window.testModule = require('./local-css.vue')

test/fixtures/local-css.js

@@ -1,3 +1,16 @@
 <style local>
-h1 { color: red; }
+:root {
+  color: red;
+}
+div:root.test {
+  color: blue;
+}
+h1 {
+  color: green;
+}
 </style>
+
+<template>
+<div><h1>hi</h1></div>
+<p class="abc def">hi</p>
+</template>

test/fixtures/local-css.vue

@@ -100,10 +100,17 @@ describe('vue-loader', function () {
 
   it('local-css', function (done) {
     test({
-      entry: './test/fixtures/local-css.vue'
+      entry: './test/fixtures/local-css.js'
     }, function (window) {
+      var module = window.testModule
+      expect(module.template).to.contain(
+        '<div class="v-5f0cf35a"><h1>hi</h1></div>\n' +
+        '<p class="abc def v-5f0cf35a">hi</p>'
+      )
       var style = window.document.querySelector('style').textContent
-      expect(style).to.contain('h1 { color: red; }')
+      expect(style).to.match(/div\.v-5f0cf35a\.test {\s+color: blue;\n}/)
+      expect(style).to.match(/\.v-5f0cf35a {\s+color: red;\n}/)
+      expect(style).to.match(/\.v-5f0cf35a h1 {\s+color: green;\n}/)
       done()
     })
   })