Skip to content
This repository was archived by the owner on Jan 18, 2022. It is now read-only.

Commit b730b69

Browse files
znckznck
committed
Fix context issues
1 parent 6dfb618 commit b730b69

File tree

6 files changed

+151
-26
lines changed

6 files changed

+151
-26
lines changed

‎dist/rollup-plugin-vue.common.js

+73-20
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*!
2-
* rollup-plugin-vue v1.0.3
2+
* rollup-plugin-vue v2.0.0
33
* (c) 2016 undefined
44
* Release under the MIT License.
55
*/
@@ -16,6 +16,7 @@ var htmlMinifier = _interopDefault(require('html-minifier'));
1616
var chalk = _interopDefault(require('chalk'));
1717
var babel = _interopDefault(require('babel-core'));
1818
var fs = _interopDefault(require('fs'));
19+
var postcss = _interopDefault(require('postcss'));
1920
var objectAssign = _interopDefault(require('object-assign'));
2021

2122
var babelHelpers = {};
@@ -77,6 +78,10 @@ var options = {
7778
useShortDoctype: true,
7879
removeEmptyAttributes: true,
7980
removeOptionalTags: true
81+
},
82+
postcss: {
83+
plugins: [],
84+
options: {}
8085
}
8186
};
8287

@@ -154,6 +159,12 @@ function checkLang(node) {
154159
}
155160
}
156161

162+
/**
163+
* Pad content with empty lines to get correct line number in errors.
164+
*
165+
* @param content
166+
* @returns {string}
167+
*/
157168
function padContent(content) {
158169
return content.split(/\r?\n/g).map(function () {
159170
return '';
@@ -162,7 +173,10 @@ function padContent(content) {
162173

163174
var Compiler = function () {
164175
function Compiler() {
176+
var options = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
165177
babelHelpers.classCallCheck(this, Compiler);
178+
179+
this.options = options;
166180
}
167181

168182
babelHelpers.createClass(Compiler, [{
@@ -215,6 +229,13 @@ var Compiler = function () {
215229
});
216230
return promise.then(function () {
217231
return _this.processTemplate(components.template, filePath, content);
232+
}).then(function (template) {
233+
if (components.style) {
234+
return _this.processStyle(components.style, filePath, content).then(function (style) {
235+
return { template: template.code, style: style.code };
236+
});
237+
}
238+
return { template: template.code, style: '' };
218239
}).then(function (compiled) {
219240
return _this.processScript(components.script, filePath, content, compiled);
220241
});
@@ -236,7 +257,9 @@ var Compiler = function () {
236257
// TODO: Up next. ${node}, ${filePath}
237258
return null;
238259
}
260+
239261
/**
262+
* Compile template: DeIndent and minify html.
240263
* @param {Node} node
241264
* @param {string} filePath
242265
* @param {string} content
@@ -245,6 +268,8 @@ var Compiler = function () {
245268
}, {
246269
key: 'processTemplate',
247270
value: function processTemplate(node, filePath, content) {
271+
var _this2 = this;
272+
248273
var template = deIndent(this.checkSrc(node, filePath) || parse5.serialize(node.content));
249274
var lang = checkLang(node);
250275
if (!lang) {
@@ -258,9 +283,8 @@ var Compiler = function () {
258283
})();
259284
}
260285
}
261-
262286
return this.compileAsPromise('template', template, lang, filePath).then(function (res) {
263-
res.code = htmlMinifier.minify(res.code, options.htmlMinifier);
287+
res.code = htmlMinifier.minify(res.code, _this2.options.htmlMinifier);
264288
return res;
265289
});
266290
}
@@ -276,36 +300,61 @@ var Compiler = function () {
276300
value: function processScript(node, filePath, content, compiled) {
277301
var lang = checkLang(node) || 'babel';
278302
var script = this.checkSrc(node, filePath);
303+
var template = compiled.template;
304+
279305
if (!script) {
280306
script = parse5.serialize(node);
281307
// pad the script to ensure correct line number for syntax errors
282308
var location = content.indexOf(script);
283309
var before = padContent(content.slice(0, location));
284310
script = before + script;
285311
}
286-
script = this.injectTemplate(script, compiled.code, lang);
312+
script = this.injectTemplate(script, template, lang);
287313
script = deIndent(script);
288-
return this.compileAsPromise('script', script, lang, filePath);
314+
return this.compileAsPromise('script', script, lang, filePath).then(function (res) {
315+
return { code: res.code };
316+
});
289317
}
290318
/**
291319
* @param {Node} node
292-
* @param {string} path
320+
* @param {string} filePath
293321
* @param {string} content
294322
*/
295323

296324
}, {
297325
key: 'processStyle',
298-
value: function processStyle(node, path, content) {}
326+
value: function processStyle(node, filePath, content) {
327+
var _this3 = this;
328+
329+
var lang = checkLang(node) || 'css';
330+
var style = this.checkSrc(node, filePath);
331+
var injectFnName = '__$styleInject';
332+
if (!style) {
333+
style = parse5.serialize(node);
334+
var location = content.indexOf(style);
335+
var before = padContent(content.slice(0, location));
336+
style = before + style;
337+
}
338+
var options = this.options.postcss;
339+
options.from = filePath;
340+
options.to = filePath;
341+
return this.compileAsPromise('style', style, lang, filePath).then(function (res) {
342+
return postcss(_this3.options.postcss.plugins || []).process(res.code, options).then(function (res) {
343+
var code = 'export ' + injectFnName + '(' + JSON.stringify(res.css) + ');';
344+
return { code: code, type: 'style' };
345+
});
346+
});
347+
}
299348
}, {
300349
key: 'compileAsPromise',
301350
value: function compileAsPromise(type, code, lang, filePath) {
302-
var _this2 = this;
351+
var _this4 = this;
303352

304353
var compiler = compilers[lang];
305354
if (compiler) {
306355
return new Promise(function (resolve, reject) {
307356
try {
308-
var compiled = compiler.compile(code, _this2, filePath);
357+
var compiled = compiler.compile(code, _this4, filePath);
309358
resolve(compiled);
310359
} catch (e) {
311360
reject(e);
@@ -327,22 +376,26 @@ var Compiler = function () {
327376
return Compiler;
328377
}();
329378

330-
var compiler = new Compiler();
331-
332379
function plugin() {
333-
var options = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
380+
var options$$ = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
381+
382+
options$$ = objectAssign({}, options, options$$, { extensions: ['.vue'] });
383+
var filter = rollupPluginutils.createFilter(options$$.include, options$$.exclude);
384+
var extensions = options$$.extensions;
385+
delete options$$.extensions;
386+
delete options$$.include;
387+
delete options$$.exclude;
334388

335-
options = objectAssign({}, options, { extensions: ['.vue'] });
336-
var filter = rollupPluginutils.createFilter(options.include, options.exclude);
337-
var extensions = options.extensions;
338-
delete options.extensions;
339-
delete options.include;
340-
delete options.exclude;
389+
var compiler = new Compiler(options$$);
341390

342391
return {
343392
transform: function transform(code, id) {
344-
if (!filter(id)) return null;
345-
if (extensions.indexOf(path.extname(id)) === -1) return null;
393+
if (!filter(id)) {
394+
return null;
395+
}
396+
if (extensions.indexOf(path.extname(id)) === -1) {
397+
return null;
398+
}
346399

347400
return new Promise(function (resolve) {
348401
compiler.compile(code, id).then(function (compiled) {

‎src/compiler.js

+41-5
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import parse5 from 'parse5'
55
import htmlMinifier from 'html-minifier'
66
import chalk from 'chalk'
77
import compilers from './compilers/index'
8+
import postcss from 'postcss'
89

910
require('es6-promise').polyfill()
1011

@@ -94,6 +95,15 @@ export default class Compiler {
9495
.then(() => {
9596
return this.processTemplate(components.template, filePath, content)
9697
})
98+
.then((template) => {
99+
if (components.style) {
100+
return this.processStyle(components.style, filePath, content)
101+
.then((style) => {
102+
return {template: template.code, style: style.code}
103+
})
104+
}
105+
return {template: template.code, style: ''}
106+
})
97107
.then((compiled) => {
98108
return this.processScript(components.script, filePath, content, compiled)
99109
})
@@ -131,9 +141,8 @@ export default class Compiler {
131141
})
132142
}
133143
}
134-
135144
return this.compileAsPromise('template', template, lang, filePath)
136-
.then(function (res) {
145+
.then((res) => {
137146
res.code = htmlMinifier.minify(res.code, this.options.htmlMinifier)
138147
return res
139148
})
@@ -147,23 +156,50 @@ export default class Compiler {
147156
processScript (node, filePath, content, compiled) {
148157
const lang = checkLang(node) || 'babel'
149158
let script = this.checkSrc(node, filePath)
159+
let {template} = compiled
150160
if (!script) {
151161
script = parse5.serialize(node)
152162
// pad the script to ensure correct line number for syntax errors
153163
const location = content.indexOf(script)
154164
const before = padContent(content.slice(0, location))
155165
script = before + script
156166
}
157-
script = this.injectTemplate(script, compiled.code, lang)
167+
script = this.injectTemplate(script, template, lang)
158168
script = deIndent(script)
159169
return this.compileAsPromise('script', script, lang, filePath)
170+
.then((res) => {
171+
return {code: res.code}
172+
})
160173
}
161174
/**
162175
* @param {Node} node
163-
* @param {string} path
176+
* @param {string} filePath
164177
* @param {string} content
165178
*/
166-
processStyle (node, path, content) {}
179+
processStyle (node, filePath, content) {
180+
const lang = checkLang(node) || 'css'
181+
let style = this.checkSrc(node, filePath)
182+
const injectFnName = '__$styleInject'
183+
if (!style) {
184+
style = parse5.serialize(node)
185+
const location = content.indexOf(style)
186+
const before = padContent(content.slice(0, location))
187+
style = before + style
188+
}
189+
let options = this.options.postcss
190+
options.from = filePath
191+
options.to = filePath
192+
return this.compileAsPromise('style', style, lang, filePath)
193+
.then((res) => {
194+
return postcss(this.options.postcss.plugins || [])
195+
.process(res.code, options)
196+
.then((res) => {
197+
const code = `export ${injectFnName}(${JSON.stringify(res.css)});`
198+
return {code: code, type: 'style'}
199+
})
200+
})
201+
}
202+
167203
compileAsPromise (type, code, lang, filePath) {
168204
var compiler = compilers[lang]
169205
if (compiler) {

‎src/index.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,10 @@ import {createFilter} from 'rollup-pluginutils'
22
import Compiler from './compiler'
33
import objectAssign from 'object-assign'
44
import path from 'path'
5+
import defaultOptions from './options'
56

67
export default function plugin (options = {}) {
7-
options = objectAssign({}, options, {extensions: ['.vue'] })
8+
options = objectAssign({}, defaultOptions, options, {extensions: ['.vue'] })
89
let filter = createFilter(options.include, options.exclude)
910
const extensions = options.extensions
1011
delete options.extensions

‎src/options.js

+4
Original file line numberDiff line numberDiff line change
@@ -34,5 +34,9 @@ export default {
3434
useShortDoctype: true,
3535
removeEmptyAttributes: true,
3636
removeOptionalTags: true
37+
},
38+
postcss: {
39+
plugins: [],
40+
options: {}
3741
}
3842
}

‎test/expects/style.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
var evens = [2, 4, 6, 8];
2+
var odds = evens.map(function (v) {
3+
return v + 1;
4+
});
5+
var style = { template: "<h1 :id=id @click=hi>hello</h1><input type=text>",
6+
data: function data() {
7+
return odds;
8+
}
9+
};
10+
11+
export default style;

‎test/fixtures/style.vue

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<template>
2+
<h1 :id="id" @click="hi">hello</h1>
3+
<input type="text">
4+
</template>
5+
6+
<script>
7+
var evens = [2,4,6,8]
8+
var odds = evens.map(v => v + 1)
9+
export default {
10+
data() {
11+
return odds
12+
}
13+
}
14+
</script>
15+
16+
<style>
17+
input[type=text] {
18+
color: red;
19+
}
20+
</style>

0 commit comments

Comments
 (0)