fix media query with scoped styles

Author: yyx990803

lib/style-rewriter.js

@@ -6,7 +6,14 @@ var loaderUtils = require('loader-utils')
 var currentId
 var addId = postcss.plugin('add-id', function () {
   return function (root) {
-    root.each(function (node) {
+    root.each(function rewriteSelector (node) {
+      if (!node.selector) {
+        // handle media queries
+        if (node.type === 'atrule' && node.name === 'media') {
+          node.each(rewriteSelector)
+        }
+        return
+      }
       node.selector = selectorParser(function (selectors) {
         selectors.each(function (selector) {
           var node = null
@@ -46,5 +53,8 @@ module.exports = function (css) {
     .then(function (result) {
       cb(null, result)
     })
-    .catch(cb)
+    .catch(function (e) {
+      console.log(e)
+      cb(e)
+    })
 }

test/fixtures/media-query.js

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

test/fixtures/media-query.vue

@@ -0,0 +1,7 @@
+<style scoped>
+@media print {
+  .foo {
+    color: #000;
+  }
+}
+</style>

test/test.js

@@ -159,4 +159,15 @@ describe('vue-loader', function () {
     })
   })
 
+  it('media-query', function (done) {
+    test({
+      entry: './test/fixtures/media-query.js'
+    }, function (window) {
+      var style = window.document.querySelector('style').textContent
+      var id = '_v-' + hash(require.resolve('./fixtures/media-query.vue'))
+      expect(style).to.contain('@media print {\n  .foo[' + id + '] {\n    color: #000;\n  }\n}')
+      done()
+    })
+  })
+
 })