diff --git a/package.json b/package.json index 56faa21..6c63669 100644 --- a/package.json +++ b/package.json @@ -58,6 +58,7 @@ "mocha-lcov-reporter": "^1.2.0", "rollup": "^0.37.0", "rollup-plugin-buble": "^0.14.0", + "rollup-plugin-css-only": "^0.1.0", "rollup-plugin-replace": "^1.1.1", "uglify-js": "^2.7.3", "vue-hot-reload-api": "^2.0.6" diff --git a/src/index.js b/src/index.js index 7112033..80dba4d 100644 --- a/src/index.js +++ b/src/index.js @@ -51,25 +51,36 @@ export default function vue (options = {}) { return { name: 'vue', + resolveId (id) { + if (id.indexOf('.vue.component.') > -1) { + return id + } + }, + load (id) { + if (id.indexOf('.vue.component.') > -1) { + const parts = id.split('.') + const component = parts.slice(0, parts.length - 4).join('.') + const index = parseInt(parts[parts.length - 4]) + + return styles[component][index] || '' + } + }, transform (source, id) { if (!filter(id) || !id.endsWith('.vue')) { debug(`Ignore: ${id}`) return null } - debug(`Transform: ${id}`) - const { code, css, map } = vueTransform(source, id, options) - styles[id] = css - debug(`Transformed: ${id}`) - return { code, map } }, ongenerate () { - compileStyle(styles, options) + if (options.styleToImports !== true) { + compileStyle(styles, options) + } } } } diff --git a/src/options.js b/src/options.js index 3399959..1a038f8 100644 --- a/src/options.js +++ b/src/options.js @@ -33,5 +33,6 @@ export default { templateString: false, unicodeRegExp: false } - } + }, + styleToImports: false } diff --git a/src/vueTransform.js b/src/vueTransform.js index db89bed..f6c2740 100644 --- a/src/vueTransform.js +++ b/src/vueTransform.js @@ -43,10 +43,15 @@ function injectRender (script, render, lang, options) { if (['js', 'babel'].indexOf(lang.toLowerCase()) > -1) { const matches = /(export default[^{]*\{)/g.exec(script) if (matches) { - const renderScript = transpileVueTemplate('module.exports={' + + let renderScript = 'module.exports={' + `render: ${wrapRenderFunction(render.render)},` + 'staticRenderFns: [' + - `${render.staticRenderFns.map(wrapRenderFunction).join(',')}],}`, options.vue) + `${render.staticRenderFns.map(wrapRenderFunction).join(',')}],}` + + if (options.stripWith !== false) { + renderScript = transpileVueTemplate(renderScript, options.vue) + } + const result = script.split(matches[1]) .join(renderScript.replace('module.exports={', 'export default {').replace(/\}$/, '')) @@ -168,5 +173,18 @@ export default function vueTransform (code, id, options) { const js = processScript(nodes.script[0], id, code, options, nodes) const css = processStyle(nodes.style, id, code, options, nodes) + const isProduction = process.env.NODE_ENV === 'production' + const isWithStripped = options.stripWith !== false + + if (!isProduction && !isWithStripped) { + js.code = js.code + '\nmodule.exports.render._withStripped = true' + } + + if (options.styleToImports === true) { + const style = css.map((s, i) => 'import ' + JSON.stringify(`${id}.${i}.vue.component.${s.lang}`) + ';').join(' ') + + return { css, code: style + js.code, map: js.map } + } + return { css, code: js.code, map: js.map } } diff --git a/test/test.js b/test/test.js index 9b6482c..44d6044 100644 --- a/test/test.js +++ b/test/test.js @@ -1,5 +1,6 @@ /* global describe, it */ var vuePlugin = require('../') +var cssPlugin = require('rollup-plugin-css-only') var assert = require('assert') var fs = require('fs') var rollup = require('rollup') @@ -52,3 +53,32 @@ describe('rollup-plugin-vue', function () { test(file.substr(0, file.length - 4)) }) }) + +describe('styleToImports', function () { + it('should convert style to import', function () { + var entry = './fixtures/style.vue' + var expectedCss = read('expects/style.css') + var actualCss + + return rollup.rollup({ + format: 'cjs', + entry: entry, + plugins: [ + vuePlugin({ + styleToImports: true, + }), + cssPlugin({ + output: function (css) { + actualCss = css + }, + }), + ], + }).then(function (bundle) { + bundle.generate() + + assert.equal(expectedCss.trim(), actualCss.trim(), 'should import style') + }).catch(function (error) { + throw error + }) + }) +}) diff --git a/yarn.lock b/yarn.lock index 4551d2c..c0aa6bb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1509,6 +1509,12 @@ rollup-plugin-buble@^0.14.0: buble "^0.14.0" rollup-pluginutils "^1.5.0" +rollup-plugin-css-only@^0.1.0: + version "0.1.0" + resolved "https://registry.yarnpkg.com/rollup-plugin-css-only/-/rollup-plugin-css-only-0.1.0.tgz#1a9f20c034400a3ab600df3bf6490afab0bbfc48" + dependencies: + rollup-pluginutils "^1.5.2" + rollup-plugin-replace@^1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/rollup-plugin-replace/-/rollup-plugin-replace-1.1.1.tgz#396315ded050a6ce43b9518a886a3f60efb1ea33"