local -> scoped

Author: yyx990803

lib/loader.js

@@ -27,13 +27,13 @@ module.exports = function (content) {
   loaders.css = loaders.css || 'style!css'
   loaders.js = loaders.js || ''
 
-  function getRequire (type, part, index, local) {
+  function getRequire (type, part, index, scoped) {
     return 'require(' +
       loaderUtils.stringifyRequest(self,
         // disable system loaders (except post loaders)
         '-!' +
         // get loader string for pre-processors
-        getLoaderString(type, part, local) +
+        getLoaderString(type, part, scoped) +
         // select the corresponding part from the vue file
         getSelectorString(type, index || 0) +
         // the url to the actual vuefile
@@ -46,15 +46,15 @@ module.exports = function (content) {
     return 'require(' +
       loaderUtils.stringifyRequest(self,
         '-!' +
-        getLoaderString('style', impt, impt.local) +
+        getLoaderString('style', impt, impt.scoped) +
         impt.src
       ) +
     ')\n'
   }
 
-  function getLoaderString (type, part, local) {
+  function getLoaderString (type, part, scoped) {
     var lang = part.lang || defaultLang[type]
-    var rewriter = local ? rewriters[type] || '' : ''
+    var rewriter = scoped ? rewriters[type] || '' : ''
     var loader = loaders[lang]
     if (loader !== undefined) {
       // lang with default or pre-configured loader
@@ -91,14 +91,14 @@ module.exports = function (content) {
 
     // add requires for src imports
     parts.styleImports.forEach(function (impt) {
-      if (impt.local) hasLocalStyles = true
+      if (impt.scoped) hasLocalStyles = true
       output += getRequireForImport(impt)
     })
 
     // add requires for styles
     parts.style.forEach(function (style, i) {
-      if (style.local) hasLocalStyles = true
-      output += getRequire('style', style, i, style.local)
+      if (style.scoped) hasLocalStyles = true
+      output += getRequire('style', style, i, style.scoped)
     })
 
     // only one script tag allowed

lib/parser.js

@@ -17,7 +17,7 @@ module.exports = function (content) {
     var type = node.tagName
     var lang = getAttribute(node, 'lang')
     var src = getAttribute(node, 'src')
-    var local = getAttribute(node, 'local') != null
+    var scoped = getAttribute(node, 'scoped') != null
 
     if (src) {
       if (type !== 'style') {
@@ -28,7 +28,7 @@ module.exports = function (content) {
       output.styleImports.push({
         src: src,
         lang: lang,
-        local: local
+        scoped: scoped
       })
       return
     }
@@ -63,7 +63,7 @@ module.exports = function (content) {
     var end = node.childNodes[node.childNodes.length - 1].__location.end
     output[type].push({
       lang: lang,
-      local: local,
+      scoped: scoped,
       content: content.substring(start, end).trim()
     })
   })

test/fixtures/import.local.css renamed to test/fixtures/import-scoped.css

@@ -1,2 +1,2 @@
 <style src="./import.css"></style>
-<style src="./import.local.css" local></style>
+<style src="./import-scoped.css" scoped></style>

test/fixtures/import.vue

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

test/fixtures/local-css.js

@@ -1,4 +1,4 @@
-<style local>
+<style scoped>
 body {
   color: yellow;
 }

test/fixtures/scoped-css.js

@@ -89,12 +89,12 @@ describe('vue-loader', function () {
     })
   })
 
-  it('local style', function (done) {
+  it('scoped style', function (done) {
     test({
-      entry: './test/fixtures/local-css.js'
+      entry: './test/fixtures/scoped-css.js'
     }, function (window) {
       var module = window.testModule
-      var cls = '.v-' + hash(require.resolve('./fixtures/local-css.vue'))
+      var cls = '.v-' + hash(require.resolve('./fixtures/scoped-css.vue'))
       expect(module.template).to.contain(
         '<div class="' + cls.slice(1) + '"><h1>hi</h1></div>\n' +
         '<p class="abc def ' + cls.slice(1) + '">hi</p>'
@@ -119,8 +119,8 @@ describe('vue-loader', function () {
     }, function (window) {
       var styles = window.document.querySelectorAll('style')
       expect(styles[0].textContent).to.contain('h1 { color: red; }')
-      // import with local
-      var cls = '.v-' + hash(require.resolve('./fixtures/import.local.css'))
+      // import with scoped
+      var cls = '.v-' + hash(require.resolve('./fixtures/import-scoped.css'))
       expect(styles[1].textContent).to.contain(cls + ' h1 {\n    color: green;\n}')
       done()
     })