diff --git a/README.md b/README.md index bc9713e..15bc5fe 100644 --- a/README.md +++ b/README.md @@ -56,6 +56,45 @@ rollup({ }); ``` +Below is how you can use it from the command line with Bublé. +Run `rollup -c` and it will find the config. + +```js +// rollup.config.js +import vue from 'rollup-plugin-vue' +import buble from 'rollup-plugin-buble' // rollup-plugin-babel also works + +export default { + entry: 'index.js', + plugins: [ + vue(), + buble() + ] +} +``` + +### Options + +```js +vue({ + // Filename to write all styles to + css: 'bundle.scss', + + // Callback that will be called ongenerate with two arguments: + // - styles: the contents of all style tags combined + // - styleNodes: an array of style objects: [{lang: 'css', content: 'body { color: green }'}] + css: function (styles, styleNodes) { + writeFileSync(cssPath, styles) + } + + // Disable any style output or callbacks + css: false, + + // Default behaviour is to write all styles to the bundle destination where .js is replaced by .css + css: null +}) +``` + ## Change log Please see [CHANGELOG](CHANGELOG.md) for more information what has changed recently. @@ -77,7 +116,7 @@ If you discover any security related issues, please email hi@znck.me instead of ## Credits - [Rahul Kadyan][link-author] -- [Thomas Ghysels](https://github/thgh) +- [Thomas Ghysels](https://github.com/thgh) - [All Contributors][link-contributors] ## License diff --git a/dist/rollup-plugin-vue.common.js b/dist/rollup-plugin-vue.common.js index 1eff511..d335816 100644 --- a/dist/rollup-plugin-vue.common.js +++ b/dist/rollup-plugin-vue.common.js @@ -129,45 +129,43 @@ function vueTransform(code, filePath) { // 4. Process template var template = processTemplate(nodes.template, filePath, code); - // 5. Process script - var output = { + // 5. Process script & style + return { js: processScript(nodes.script, filePath, code, template), + css: nodes.style && { + content: parse5.serialize(nodes.style), + lang: checkLang(nodes.style), + }, }; - - // 6. Process style - if (nodes.style) { - output.css = parse5.serialize(nodes.style); - output.cssLang = checkLang(nodes.style); - } - - return output; } function vue(options) { if ( options === void 0 ) options = {}; var filter = rollupPluginutils.createFilter(options.include, options.exclude); - var cssContent = {}; - var cssLang = {}; - var dest = 'bundle.js'; + var styles = {}; + var dest = options.css; return { name: 'vue', transform: function transform(source, id) { if (!filter(id) || !id.endsWith('.vue')) { + if (id.endsWith('vue.common.js')) { + return source.replace(/process\.env\.NODE_ENV/g, + process.env.NODE_ENV || 'window.NODE_ENV'); + } return null; } var ref = vueTransform(source, id); + var js = ref.js; + var css = ref.css; - // Map of every stylesheet content - cssContent[id] = ref.css || ''; - - // Map of every stylesheet lang - cssLang[id] = ref.cssLang || 'css'; + // Map of every stylesheet + styles[id] = css || {}; // Component javascript with inlined html template - return ref.js; + return js; }, ongenerate: function ongenerate(opts) { if (options.css === false) { @@ -176,33 +174,36 @@ function vue(options) { // Combine all stylesheets var css = ''; - Object.keys(cssContent).forEach(function (key) { - css += cssContent[key]; + Object.keys(styles).forEach(function (key) { + css += styles[key].content || ''; }); - // Emit styles through callback or file + // Emit styles through callback if (typeof options.css === 'function') { - options.css(css); - + options.css(css, styles); return; } - // Guess destination filename - if (typeof options.css !== 'string') { + if (typeof dest !== 'string') { + // Don't create unwanted empty stylesheets + if (!css.length) { + return; + } + + // Guess destination filename dest = opts.dest || 'bundle.js'; if (dest.endsWith('.js')) { dest = dest.slice(0, -3); } - /* eslint-disable */ - options.css = dest + ".css"; - /* eslint-enable */ + dest = dest + ".css"; } - fs.writeFile(options.css, css, function (err) { + // Emit styles to file + fs.writeFile(dest, css, function (err) { if (err) { throw err; } - emitted(options.css, css.length); + emitted(dest, css.length); }); }, }; @@ -216,9 +217,13 @@ function green(text) { return ("\u001b[1m\u001b[32m" + text + "\u001b[39m\u001b[22m"); } -function getSize(size) { - var bytes = size / 1024; - return bytes < 1000 ? ((bytes.toPrecision(3)) + " kB") : (((bytes / 1024).toPrecision(3)) + " MB"); +function getSize(bytes) { + if (bytes < 10000) { + return ((bytes.toFixed(0)) + " B"); + } + return bytes < 1024000 + ? (((bytes / 1024).toPrecision(3)) + " kB'") + : (((bytes / 1024 / 1024).toPrecision(4)) + " MB"); } module.exports = vue; \ No newline at end of file diff --git a/dist/rollup-plugin-vue.js b/dist/rollup-plugin-vue.js index aed65dd..4043e20 100644 --- a/dist/rollup-plugin-vue.js +++ b/dist/rollup-plugin-vue.js @@ -125,45 +125,43 @@ function vueTransform(code, filePath) { // 4. Process template var template = processTemplate(nodes.template, filePath, code); - // 5. Process script - var output = { + // 5. Process script & style + return { js: processScript(nodes.script, filePath, code, template), + css: nodes.style && { + content: parse5.serialize(nodes.style), + lang: checkLang(nodes.style), + }, }; - - // 6. Process style - if (nodes.style) { - output.css = parse5.serialize(nodes.style); - output.cssLang = checkLang(nodes.style); - } - - return output; } function vue(options) { if ( options === void 0 ) options = {}; var filter = rollupPluginutils.createFilter(options.include, options.exclude); - var cssContent = {}; - var cssLang = {}; - var dest = 'bundle.js'; + var styles = {}; + var dest = options.css; return { name: 'vue', transform: function transform(source, id) { if (!filter(id) || !id.endsWith('.vue')) { + if (id.endsWith('vue.common.js')) { + return source.replace(/process\.env\.NODE_ENV/g, + process.env.NODE_ENV || 'window.NODE_ENV'); + } return null; } var ref = vueTransform(source, id); + var js = ref.js; + var css = ref.css; - // Map of every stylesheet content - cssContent[id] = ref.css || ''; - - // Map of every stylesheet lang - cssLang[id] = ref.cssLang || 'css'; + // Map of every stylesheet + styles[id] = css || {}; // Component javascript with inlined html template - return ref.js; + return js; }, ongenerate: function ongenerate(opts) { if (options.css === false) { @@ -172,33 +170,36 @@ function vue(options) { // Combine all stylesheets var css = ''; - Object.keys(cssContent).forEach(function (key) { - css += cssContent[key]; + Object.keys(styles).forEach(function (key) { + css += styles[key].content || ''; }); - // Emit styles through callback or file + // Emit styles through callback if (typeof options.css === 'function') { - options.css(css); - + options.css(css, styles); return; } - // Guess destination filename - if (typeof options.css !== 'string') { + if (typeof dest !== 'string') { + // Don't create unwanted empty stylesheets + if (!css.length) { + return; + } + + // Guess destination filename dest = opts.dest || 'bundle.js'; if (dest.endsWith('.js')) { dest = dest.slice(0, -3); } - /* eslint-disable */ - options.css = dest + ".css"; - /* eslint-enable */ + dest = dest + ".css"; } - fs.writeFile(options.css, css, function (err) { + // Emit styles to file + fs.writeFile(dest, css, function (err) { if (err) { throw err; } - emitted(options.css, css.length); + emitted(dest, css.length); }); }, }; @@ -212,9 +213,13 @@ function green(text) { return ("\u001b[1m\u001b[32m" + text + "\u001b[39m\u001b[22m"); } -function getSize(size) { - var bytes = size / 1024; - return bytes < 1000 ? ((bytes.toPrecision(3)) + " kB") : (((bytes / 1024).toPrecision(3)) + " MB"); +function getSize(bytes) { + if (bytes < 10000) { + return ((bytes.toFixed(0)) + " B"); + } + return bytes < 1024000 + ? (((bytes / 1024).toPrecision(3)) + " kB'") + : (((bytes / 1024 / 1024).toPrecision(4)) + " MB"); } export default vue; \ No newline at end of file diff --git a/src/index.js b/src/index.js index 3c8bbc0..b4d9502 100644 --- a/src/index.js +++ b/src/index.js @@ -5,27 +5,27 @@ import vueTransform from './vueTransform'; export default function vue(options = {}) { const filter = createFilter(options.include, options.exclude); - const cssContent = {}; - const cssLang = {}; - let dest = 'bundle.js'; + const styles = {}; + let dest = options.css; return { name: 'vue', transform(source, id) { if (!filter(id) || !id.endsWith('.vue')) { + if (id.endsWith('vue.common.js')) { + return source.replace(/process\.env\.NODE_ENV/g, + process.env.NODE_ENV || 'window.NODE_ENV'); + } return null; } - const ref = vueTransform(source, id); - - // Map of every stylesheet content - cssContent[id] = ref.css || ''; + const { js, css } = vueTransform(source, id); - // Map of every stylesheet lang - cssLang[id] = ref.cssLang || 'css'; + // Map of every stylesheet + styles[id] = css || {}; // Component javascript with inlined html template - return ref.js; + return js; }, ongenerate(opts) { if (options.css === false) { @@ -34,33 +34,36 @@ export default function vue(options = {}) { // Combine all stylesheets let css = ''; - Object.keys(cssContent).forEach((key) => { - css += cssContent[key]; + Object.keys(styles).forEach((key) => { + css += styles[key].content || ''; }); - // Emit styles through callback or file + // Emit styles through callback if (typeof options.css === 'function') { - options.css(css); - + options.css(css, styles); return; } - // Guess destination filename - if (typeof options.css !== 'string') { + if (typeof dest !== 'string') { + // Don't create unwanted empty stylesheets + if (!css.length) { + return; + } + + // Guess destination filename dest = opts.dest || 'bundle.js'; if (dest.endsWith('.js')) { dest = dest.slice(0, -3); } - /* eslint-disable */ - options.css = `${dest}.css`; - /* eslint-enable */ + dest = `${dest}.css`; } - writeFile(options.css, css, (err) => { + // Emit styles to file + writeFile(dest, css, (err) => { if (err) { throw err; } - emitted(options.css, css.length); + emitted(dest, css.length); }); }, }; @@ -74,7 +77,11 @@ function green(text) { return `\u001b[1m\u001b[32m${text}\u001b[39m\u001b[22m`; } -function getSize(size) { - const bytes = size / 1024; - return bytes < 1000 ? `${bytes.toPrecision(3)} kB` : `${(bytes / 1024).toPrecision(3)} MB`; +function getSize(bytes) { + if (bytes < 10000) { + return `${bytes.toFixed(0)} B`; + } + return bytes < 1024000 + ? `${(bytes / 1024).toPrecision(3)} kB'` + : `${(bytes / 1024 / 1024).toPrecision(4)} MB`; } diff --git a/src/vueTransform.js b/src/vueTransform.js index 8dee309..4d20df2 100644 --- a/src/vueTransform.js +++ b/src/vueTransform.js @@ -109,16 +109,12 @@ export default function vueTransform(code, filePath) { // 4. Process template const template = processTemplate(nodes.template, filePath, code); - // 5. Process script - const output = { + // 5. Process script & style + return { js: processScript(nodes.script, filePath, code, template), + css: nodes.style && { + content: parse5.serialize(nodes.style), + lang: checkLang(nodes.style), + }, }; - - // 6. Process style - if (nodes.style) { - output.css = parse5.serialize(nodes.style); - output.cssLang = checkLang(nodes.style); - } - - return output; }