Permalink
Browse files

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

  • Loading branch information...
znck committed May 6, 2018
1 parent 4110dbb commit 3a64402db096232a0541e2dc0575118729915f15
Showing with 36 additions and 15 deletions.
  1. +1 −0 package.json
  2. +3 −4 src/index.js
  3. +8 −3 test/baseline.spec.js
  4. +14 −5 test/setup/index.js
  5. +10 −3 yarn.lock
@@ -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",
@@ -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: '' }
}
})
@@ -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))
})
@@ -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]
}

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.

0 comments on commit 3a64402

Please sign in to comment.