From 5763e4459fe67413a7d5950b8ee0b0c2e8b41336 Mon Sep 17 00:00:00 2001 From: Rahul Kadyan Date: Sun, 6 May 2018 20:08:39 +0530 Subject: [PATCH] fix: When using extract CSS add scopeId to component for scoped CSS --- package.json | 1 + src/index.js | 7 +++---- test/baseline.spec.js | 11 ++++++++--- test/setup/index.js | 19 ++++++++++++++----- yarn.lock | 13 ++++++++++--- 5 files changed, 36 insertions(+), 15 deletions(-) diff --git a/package.json b/package.json index f74a7c6..33e4e70 100644 --- a/package.json +++ b/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", diff --git a/src/index.js b/src/index.js index 34daf0a..0a10b1d 100644 --- a/src/index.js +++ b/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: '' } } }) diff --git a/test/baseline.spec.js b/test/baseline.spec.js index 2ed09f5..eed5f5d 100644 --- a/test/baseline.spec.js +++ b/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)) }) diff --git a/test/setup/index.js b/test/setup/index.js index 46c142c..bbd998f 100644 --- a/test/setup/index.js +++ b/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] } diff --git a/yarn.lock b/yarn.lock index 233a91a..c44cf9d 100644 --- a/yarn.lock +++ b/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: