fix: When using extract CSS add scopeId to component for scoped CSS (vuejs#188)

Fixes vuejs#186

Author: znck

package.json

@@ -55,6 +55,7 @@
     "rollup": "^0.58.2",
     "rollup-plugin-babel": "^4.0.0-beta.4",
     "rollup-plugin-commonjs": "^9.1.0",
+    "rollup-plugin-css-only": "^0.4.0",
     "rollup-plugin-image": "^1.0.2",
     "rollup-plugin-md": "^0.0.7",
     "rollup-plugin-node-resolve": "^3.3.0",

src/index.js

@@ -9,7 +9,6 @@ import * as path from 'path'
 import { parse } from '@vue/component-compiler-utils'
 import { createDefaultCompiler, assemble } from '@vue/component-compiler'
 import hash from 'hash-sum'
-import { relative } from 'path'
 
 export default function vue(opts = {}) {
   const isVue = createVueFilter(opts.include, opts.exclude)
@@ -91,7 +90,7 @@ export default function vue(opts = {}) {
           if (input.template.errors && input.template.errors.length) {
             console.error(
               '> Errors: ' +
-                relative(process.cwd(), filename) +
+                path.relative(process.cwd(), filename) +
                 '\n' +
                 input.template.errors.map(it => '  - ' + it).join('\n')
             )
@@ -100,7 +99,7 @@ export default function vue(opts = {}) {
           if (input.template.tips && input.template.tips.length) {
             console.log(
               '> Tips: ' +
-                relative(process.cwd(), filename) +
+                path.relative(process.cwd(), filename) +
                 '\n' +
                 input.template.tips.map(it => '  - ' + it).join('\n')
             )
@@ -139,7 +138,7 @@ export default function vue(opts = {}) {
                   index
                 )}'`
 
-              if (style.module) {
+              if (style.module || descriptor.styles[index].scoped) {
                 return { ...style, code: '' }
               }
             })

test/baseline.spec.js

@@ -16,10 +16,14 @@ beforeAll(async () => {
 })
 afterAll(async () => browser && (await browser.close()))
 
-const testRunner = async fixture => {
+const testRunner = async (fixture, extractCss) => {
   const filename = join(__dirname, 'fixtures', fixture + '.vue')
-  const code = await build(filename)
-  const page = await open(fixture, browser, code)
+  const code = await build(filename, extractCss)
+  const page = await open(
+    fixture + (extractCss ? '-extract' : ''),
+    browser,
+    code
+  )
   expect(await page.$('#test')).toBeTruthy()
   expect(
     await page.evaluate(() => document.getElementById('test').textContent)
@@ -35,4 +39,5 @@ const testRunner = async fixture => {
 }
 fixtures.forEach(fixture => {
   test(fixture, () => testRunner(fixture, false))
+  test(fixture + ' (extract css)', () => testRunner(fixture, true))
 })

test/setup/index.js

@@ -1,6 +1,6 @@
 const { rollup } = require('rollup')
 const babel = require('rollup-plugin-babel')
-// const commonjs = require('rollup-plugin-commonjs')
+const css = require('rollup-plugin-css-only')
 const nodeResolve = require('rollup-plugin-node-resolve')
 const image = require('rollup-plugin-image')
 const { readFileSync } = require('fs')
@@ -30,16 +30,20 @@ const babelIt = babel({
 
 const cache = {}
 
-async function build(filename) {
-  const cacheKey = filename
+async function build(filename, extractCss = false) {
+  const cacheKey = JSON.stringify({filename, extractCss})
   if (cacheKey in cache) return cache[cacheKey]
   const input = filename + '__app.js'
 
-  const options = { defaultLang: { markdown: 'md' } }
+  const options = { defaultLang: { markdown: 'md' }, css: extractCss }
+  let style
   let bundle = await rollup({
     input,
     plugins: [
       md(),
+      css({ include: '**/*.css?*', output(s) {
+        style = s
+      } }),
       vue(options),
       image(),
       nodeResolve(),
@@ -66,7 +70,12 @@ async function build(filename) {
   cache[cacheKey] = (await bundle.generate({
     format: 'iife',
     name: 'App'
-  })).code
+  })).code + (style ? `;(function() { 
+    var s = document.createElement('style'); 
+    s.type = 'text/css'; 
+    document.head.appendChild(s);
+    s.appendChild(document.createTextNode(${JSON.stringify(style)}))
+  })()` : '')
 
   return cache[cacheKey]
 }

yarn.lock

@@ -486,7 +486,7 @@
     invariant "^2.2.2"
     semver "^5.3.0"
 
-"@babel/runtime@^7.0.0-beta.39":
+"@babel/runtime@^7.0.0-beta.46":
   version "7.0.0-beta.46"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.0.0-beta.46.tgz#466a9c0498f6d12d054a185981eef742d59d4871"
   dependencies:
@@ -3889,7 +3889,7 @@ preserve@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
 
-prettier@^1.11.1:
+prettier@^1.11.1, prettier@^1.12.1:
   version "1.12.1"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.12.1.tgz#c1ad20e803e7749faf905a409d2367e06bbe7325"
 
@@ -4361,6 +4361,13 @@ rollup-plugin-commonjs@^9.1.0:
     resolve "^1.5.0"
     rollup-pluginutils "^2.0.1"
 
+rollup-plugin-css-only@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-css-only/-/rollup-plugin-css-only-0.4.0.tgz#eaf10c79b17c88dc95712fe91518e3afedfb657a"
+  dependencies:
+    mkdirp "^0.5.1"
+    rollup-pluginutils "^1.5.2"
+
 rollup-plugin-image@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/rollup-plugin-image/-/rollup-plugin-image-1.0.2.tgz#77c6782daedebee6e0a858c4017905846919da2a"
@@ -4384,7 +4391,7 @@ rollup-plugin-node-resolve@^3.3.0:
     is-module "^1.0.0"
     resolve "^1.1.6"
 
-rollup-pluginutils@^1.3.1, rollup-pluginutils@^1.5.0, rollup-pluginutils@^1.5.1:
+rollup-pluginutils@^1.3.1, rollup-pluginutils@^1.5.0, rollup-pluginutils@^1.5.1, rollup-pluginutils@^1.5.2:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-1.5.2.tgz#1e156e778f94b7255bfa1b3d0178be8f5c552408"
   dependencies: