test vue-style-loader SSR style extraction

Author: yyx990803

package.json

@@ -38,7 +38,7 @@
     "postcss-selector-parser": "^2.0.0",
     "source-map": "^0.5.6",
     "vue-hot-reload-api": "^2.0.1",
-    "vue-style-loader": "^1.0.0",
+    "vue-style-loader": "^2.0.0",
     "vue-template-es2015-compiler": "^1.2.2"
   },
   "peerDependencies": {
@@ -73,6 +73,7 @@
     "sugarss": "^0.2.0",
     "url-loader": "^0.5.7",
     "vue": "^2.1.0",
+    "vue-server-renderer": "^2.1.10",
     "vue-template-compiler": "^2.1.0",
     "webpack": "^2.2.0"
   }

test/fixtures/ssr-style.js

@@ -0,0 +1,4 @@
+var Vue = require('vue')
+var App = require('./ssr-style.vue')
+
+module.exports = new Vue(App)

test/fixtures/ssr-style.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <h1>Hello</h1>
+    <basic/>
+  </div>
+</template>
+
+<script>
+import Basic from './basic.vue'
+
+export default {
+  components: { Basic }
+}
+</script>
+
+<style>
+h1 { color: green; }
+</style>
+
+<style src="./style-import.css"></style>

test/test.js

@@ -6,12 +6,14 @@ var webpack = require('webpack')
 var MemoryFS = require('memory-fs')
 var expect = require('chai').expect
 var genId = require('../lib/gen-id')
+var SSR = require('vue-server-renderer')
 var compiler = require('../lib/template-compiler')
 var normalizeNewline = require('normalize-newline')
 var ExtractTextPlugin = require("extract-text-webpack-plugin")
 var SourceMapConsumer = require('source-map').SourceMapConsumer
 
-var loaderPath = 'expose-loader?vueModule!' + path.resolve(__dirname, '../index.js')
+var rawLoaderPath = path.resolve(__dirname, '../index.js')
+var loaderPath = 'expose-loader?vueModule!' + rawLoaderPath
 var mfs = new MemoryFS()
 var globalConfig = {
   output: {
@@ -49,6 +51,11 @@ function bundle (options, cb) {
         console.error(err.message)
       })
     }
+    if (stats.compilation.errors) {
+      stats.compilation.errors.forEach(err => {
+        console.error(err.message)
+      })
+    }
     expect(stats.compilation.errors).to.be.empty
     cb(mfs.readFileSync('/test.build.js').toString())
   })
@@ -511,4 +518,36 @@ describe('vue-loader', function () {
       done()
     })
   })
+
+  it('SSR style extraction', done => {
+    bundle({
+      target: 'node',
+      entry: './test/fixtures/ssr-style.js',
+      output: {
+        path: '/',
+        filename: 'test.build.js',
+        libraryTarget: 'commonjs2'
+      },
+      externals: ['vue'],
+      module: {
+        rules: [{ test: /\.vue$/, loader: rawLoaderPath }]
+      }
+    }, code => {
+      const renderer = SSR.createBundleRenderer(code)
+      const context = {}
+      renderer.renderToString(context, (err, res) => {
+        if (err) return done(err)
+        expect(res).to.contain('server-rendered')
+        expect(res).to.contain('<h1>Hello</h1>')
+        expect(res).to.contain('Hello from Component A!')
+        // from main component
+        expect(context.styles).to.contain('h1 { color: green;')
+        // from imported child component
+        expect(context.styles).to.contain('comp-a h2 {\n  color: #f00;')
+        // from imported css file
+        expect(context.styles).to.contain('h1 { color: red;')
+        done()
+      })
+    })
+  })
 })