test: advanced features

package.json

@@ -43,6 +43,7 @@
     "jest": "^22.4.2",
     "jsdom": "^11.6.2",
     "lint-staged": "^7.0.0",
+    "mini-css-extract-plugin": "^0.2.0",
     "node-sass": "^4.7.2",
     "normalize-newline": "^3.0.0",
     "postcss-loader": "^2.1.2",
@@ -69,7 +70,7 @@
     "postcss": "^6.0.20",
     "postcss-selector-parser": "^3.1.1",
     "prettier": "^1.11.1",
-    "source-map": "^0.7.2",
+    "source-map": "^0.5.6",
     "vue-component-compiler": "vuejs/vue-component-compiler#master",
     "vue-hot-reload-api": "^2.3.0",
     "vue-style-loader": "^4.0.2",

test/advanced.spec.js

-test('advanced', () => {
+const path = require('path')
+const { SourceMapConsumer } = require('source-map')
+const normalizeNewline = require('normalize-newline')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 
+const {
+  mfs,
+  genId,
+  bundle,
+  mockBundleAndRun
+} = require('./utils')
+
+test('support chaining with other loaders', done => {
+  mockBundleAndRun({
+    entry: 'basic.vue',
+    modify: config => {
+      config.module.rules[0] = {
+        test: /\.vue$/,
+        use: [
+          'vue-loader',
+          require.resolve('./mock-loaders/js')
+        ]
+      }
+    }
+  }, ({ module }) => {
+    expect(module.data().msg).toBe('Changed!')
+    done()
+  })
+})
+
+test('expose filename', done => {
+  mockBundleAndRun({
+    entry: 'basic.vue'
+  }, ({ module }) => {
+    expect(module.__file).toBe(path.normalize('test/fixtures/basic.vue'))
+    done()
+  })
+})
+
+test('source map', done => {
+  bundle({
+    entry: 'basic.vue',
+    devtool: '#source-map'
+  }, code => {
+    const map = mfs.readFileSync('/test.build.js.map', 'utf-8')
+    const smc = new SourceMapConsumer(JSON.parse(map))
+    let line
+    let col
+    const targetRE = /^\s+msg: 'Hello from Component A!'/
+    code.split(/\r?\n/g).some((l, i) => {
+      if (targetRE.test(l)) {
+        line = i + 1
+        col = 0
+        return true
+      }
+    })
+    const pos = smc.originalPositionFor({
+      line: line,
+      column: col
+    })
+    expect(pos.source.indexOf('basic.vue') > -1)
+    expect(pos.line).toBe(9)
+    done()
+  })
+})
+
+test('extract CSS', done => {
+  bundle({
+    entry: 'extract-css.vue',
+    modify: config => {
+      config.module.rules = [
+        {
+          test: /\.vue$/,
+          use: 'vue-loader'
+        },
+        {
+          test: /\.css$/,
+          use: [
+            MiniCssExtractPlugin.loader,
+            'css-loader'
+          ]
+        },
+        {
+          test: /\.stylus$/,
+          use: [
+            MiniCssExtractPlugin.loader,
+            'css-loader',
+            'stylus-loader'
+          ]
+        }
+      ]
+    },
+    plugins: [
+      new MiniCssExtractPlugin({
+        filename: 'test.output.css'
+      })
+    ]
+  }, code => {
+    const css = normalizeNewline(mfs.readFileSync('/test.output.css').toString())
+    const id = `data-v-${genId('extract-css.vue')}`
+    expect(css).toContain(`h1 {\n  color: #f00;\n}`)
+    // extract + scoped
+    expect(css).toContain(`h2[${id}] {\n  color: green;\n}`)
+    done()
+  })
 })
+
+// TODO
+// test('multiple rule definitions', done => {
+//   mockBundleAndRun({
+//     modify: config => {
+//       // remove default rule
+//       config.module.rules.shift()
+//     },
+//     entry: './test/fixtures/multiple-rules.js',
+//     module: {
+//       rules: [
+//         {
+//           test: /\.vue$/,
+//           oneOf: [
+//             {
+//               include: /-1\.vue$/,
+//               loader: loaderPath,
+//               options: {
+//                 postcss: [
+//                   css => {
+//                     css.walkDecls('font-size', decl => {
+//                       decl.value = `${parseInt(decl.value, 10) * 2}px`
+//                     })
+//                   }
+//                 ],
+//                 compilerModules: [{
+//                   postTransformNode: el => {
+//                     el.staticClass = '"multiple-rule-1"'
+//                   }
+//                 }]
+//               }
+//             },
+//             {
+//               include: /-2\.vue$/,
+//               loader: loaderPath,
+//               options: {
+//                 postcss: [
+//                   css => {
+//                     css.walkDecls('font-size', decl => {
+//                       decl.value = `${parseInt(decl.value, 10) / 2}px`
+//                     })
+//                   }
+//                 ],
+//                 compilerModules: [{
+//                   postTransformNode: el => {
+//                     el.staticClass = '"multiple-rule-2"'
+//                   }
+//                 }]
+//               }
+//             }
+//           ]
+//         }
+//       ]
+//     }
+//   }, (window, module) => {
+//     const vnode1 = mockRender(window.rules[0])
+//     const vnode2 = mockRender(window.rules[1])
+//     expect(vnode1.data.staticClass).toBe('multiple-rule-1')
+//     expect(vnode2.data.staticClass).toBe('multiple-rule-2')
+//     const styles = window.document.querySelectorAll('style')
+//     const expr = /\.multiple-rule-\d\s*\{\s*font-size:\s*([.0-9]+)px;/
+//     for (let i = 0, l = styles.length; i < l; i++) {
+//       const content = styles[i].textContent
+//       if (expr.test(content)) {
+//         expect(parseFloat(RegExp.$1)).toBe(14)
+//       }
+//     }
+//     done()
+//   })
+// })

test/fixtures/extract-css.vue

@@ -3,7 +3,7 @@ h1
   color red
 </style>
 
-<style>
+<style scoped>
 h2 {
   color: green;
 }

yarn.lock

@@ -5038,6 +5038,13 @@ min-document@^2.19.0:
   dependencies:
     dom-walk "^0.1.0"
 
+mini-css-extract-plugin@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.2.0.tgz#7a16b0e1096c86de8e4d1c3b063aa1aeae88d41d"
+  dependencies:
+    loader-utils "^1.1.0"
+    webpack-sources "^1.1.0"
+
 minimalistic-assert@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.0.tgz#702be2dda6b37f4836bcb3f5db56641b64a1d3d3"
@@ -7172,10 +7179,6 @@ source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
 
-source-map@^0.7.2:
-  version "0.7.2"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.2.tgz#115c3e891aaa9a484869fd2b89391a225feba344"
-
 spawn-sync@^1.0.15:
   version "1.0.15"
   resolved "https://registry.yarnpkg.com/spawn-sync/-/spawn-sync-1.0.15.tgz#b00799557eb7fb0c8376c29d44e8a1ea67e57476"