fix: When using extract CSS add scopeId to component for scoped CSS (v…

…uejs#188)

Fixes vuejs#186

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]
}