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

Commit 9491d7a

Browse files
znckznck
authored
Merge pull request #12 from thgh/master
Update css callback as in proposal
2 parents f3b0f27 + 3e2223e commit 9491d7a

File tree

5 files changed

+156
-104
lines changed

5 files changed

+156
-104
lines changed

‎README.md

+40-1
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,45 @@ rollup({
5656
});
5757
```
5858

59+
Below is how you can use it from the command line with Bublé.
60+
Run `rollup -c` and it will find the config.
61+
62+
```js
63+
// rollup.config.js
64+
import vue from 'rollup-plugin-vue'
65+
import buble from 'rollup-plugin-buble' // rollup-plugin-babel also works
66+
67+
export default {
68+
entry: 'index.js',
69+
plugins: [
70+
vue(),
71+
buble()
72+
]
73+
}
74+
```
75+
76+
### Options
77+
78+
```js
79+
vue({
80+
// Filename to write all styles to
81+
css: 'bundle.scss',
82+
83+
// Callback that will be called ongenerate with two arguments:
84+
// - styles: the contents of all style tags combined
85+
// - styleNodes: an array of style objects: [{lang: 'css', content: 'body { color: green }'}]
86+
css: function (styles, styleNodes) {
87+
writeFileSync(cssPath, styles)
88+
}
89+
90+
// Disable any style output or callbacks
91+
css: false,
92+
93+
// Default behaviour is to write all styles to the bundle destination where .js is replaced by .css
94+
css: null
95+
})
96+
```
97+
5998
## Change log
6099

61100
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 [email protected] instead of
77116
## Credits
78117

79118
- [Rahul Kadyan][link-author]
80-
- [Thomas Ghysels](https://github/thgh)
119+
- [Thomas Ghysels](https://github.com/thgh)
81120
- [All Contributors][link-contributors]
82121

83122
## License

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

+39-34
Original file line numberDiff line numberDiff line change
@@ -129,45 +129,43 @@ function vueTransform(code, filePath) {
129129
// 4. Process template
130130
var template = processTemplate(nodes.template, filePath, code);
131131

132-
// 5. Process script
133-
var output = {
132+
// 5. Process script & style
133+
return {
134134
js: processScript(nodes.script, filePath, code, template),
135+
css: nodes.style && {
136+
content: parse5.serialize(nodes.style),
137+
lang: checkLang(nodes.style),
138+
},
135139
};
136-
137-
// 6. Process style
138-
if (nodes.style) {
139-
output.css = parse5.serialize(nodes.style);
140-
output.cssLang = checkLang(nodes.style);
141-
}
142-
143-
return output;
144140
}
145141

146142
function vue(options) {
147143
if ( options === void 0 ) options = {};
148144

149145
var filter = rollupPluginutils.createFilter(options.include, options.exclude);
150-
var cssContent = {};
151-
var cssLang = {};
152-
var dest = 'bundle.js';
146+
var styles = {};
147+
var dest = options.css;
153148

154149
return {
155150
name: 'vue',
156151
transform: function transform(source, id) {
157152
if (!filter(id) || !id.endsWith('.vue')) {
153+
if (id.endsWith('vue.common.js')) {
154+
return source.replace(/process\.env\.NODE_ENV/g,
155+
process.env.NODE_ENV || 'window.NODE_ENV');
156+
}
158157
return null;
159158
}
160159

161160
var ref = vueTransform(source, id);
161+
var js = ref.js;
162+
var css = ref.css;
162163

163-
// Map of every stylesheet content
164-
cssContent[id] = ref.css || '';
165-
166-
// Map of every stylesheet lang
167-
cssLang[id] = ref.cssLang || 'css';
164+
// Map of every stylesheet
165+
styles[id] = css || {};
168166

169167
// Component javascript with inlined html template
170-
return ref.js;
168+
return js;
171169
},
172170
ongenerate: function ongenerate(opts) {
173171
if (options.css === false) {
@@ -176,33 +174,36 @@ function vue(options) {
176174

177175
// Combine all stylesheets
178176
var css = '';
179-
Object.keys(cssContent).forEach(function (key) {
180-
css += cssContent[key];
177+
Object.keys(styles).forEach(function (key) {
178+
css += styles[key].content || '';
181179
});
182180

183-
// Emit styles through callback or file
181+
// Emit styles through callback
184182
if (typeof options.css === 'function') {
185-
options.css(css);
186-
183+
options.css(css, styles);
187184
return;
188185
}
189186

190-
// Guess destination filename
191-
if (typeof options.css !== 'string') {
187+
if (typeof dest !== 'string') {
188+
// Don't create unwanted empty stylesheets
189+
if (!css.length) {
190+
return;
191+
}
192+
193+
// Guess destination filename
192194
dest = opts.dest || 'bundle.js';
193195
if (dest.endsWith('.js')) {
194196
dest = dest.slice(0, -3);
195197
}
196-
/* eslint-disable */
197-
options.css = dest + ".css";
198-
/* eslint-enable */
198+
dest = dest + ".css";
199199
}
200200

201-
fs.writeFile(options.css, css, function (err) {
201+
// Emit styles to file
202+
fs.writeFile(dest, css, function (err) {
202203
if (err) {
203204
throw err;
204205
}
205-
emitted(options.css, css.length);
206+
emitted(dest, css.length);
206207
});
207208
},
208209
};
@@ -216,9 +217,13 @@ function green(text) {
216217
return ("\u001b[1m\u001b[32m" + text + "\u001b[39m\u001b[22m");
217218
}
218219

219-
function getSize(size) {
220-
var bytes = size / 1024;
221-
return bytes < 1000 ? ((bytes.toPrecision(3)) + " kB") : (((bytes / 1024).toPrecision(3)) + " MB");
220+
function getSize(bytes) {
221+
if (bytes < 10000) {
222+
return ((bytes.toFixed(0)) + " B");
223+
}
224+
return bytes < 1024000
225+
? (((bytes / 1024).toPrecision(3)) + " kB'")
226+
: (((bytes / 1024 / 1024).toPrecision(4)) + " MB");
222227
}
223228

224229
module.exports = vue;

‎dist/rollup-plugin-vue.js

+39-34
Original file line numberDiff line numberDiff line change
@@ -125,45 +125,43 @@ function vueTransform(code, filePath) {
125125
// 4. Process template
126126
var template = processTemplate(nodes.template, filePath, code);
127127

128-
// 5. Process script
129-
var output = {
128+
// 5. Process script & style
129+
return {
130130
js: processScript(nodes.script, filePath, code, template),
131+
css: nodes.style && {
132+
content: parse5.serialize(nodes.style),
133+
lang: checkLang(nodes.style),
134+
},
131135
};
132-
133-
// 6. Process style
134-
if (nodes.style) {
135-
output.css = parse5.serialize(nodes.style);
136-
output.cssLang = checkLang(nodes.style);
137-
}
138-
139-
return output;
140136
}
141137

142138
function vue(options) {
143139
if ( options === void 0 ) options = {};
144140

145141
var filter = rollupPluginutils.createFilter(options.include, options.exclude);
146-
var cssContent = {};
147-
var cssLang = {};
148-
var dest = 'bundle.js';
142+
var styles = {};
143+
var dest = options.css;
149144

150145
return {
151146
name: 'vue',
152147
transform: function transform(source, id) {
153148
if (!filter(id) || !id.endsWith('.vue')) {
149+
if (id.endsWith('vue.common.js')) {
150+
return source.replace(/process\.env\.NODE_ENV/g,
151+
process.env.NODE_ENV || 'window.NODE_ENV');
152+
}
154153
return null;
155154
}
156155

157156
var ref = vueTransform(source, id);
157+
var js = ref.js;
158+
var css = ref.css;
158159

159-
// Map of every stylesheet content
160-
cssContent[id] = ref.css || '';
161-
162-
// Map of every stylesheet lang
163-
cssLang[id] = ref.cssLang || 'css';
160+
// Map of every stylesheet
161+
styles[id] = css || {};
164162

165163
// Component javascript with inlined html template
166-
return ref.js;
164+
return js;
167165
},
168166
ongenerate: function ongenerate(opts) {
169167
if (options.css === false) {
@@ -172,33 +170,36 @@ function vue(options) {
172170

173171
// Combine all stylesheets
174172
var css = '';
175-
Object.keys(cssContent).forEach(function (key) {
176-
css += cssContent[key];
173+
Object.keys(styles).forEach(function (key) {
174+
css += styles[key].content || '';
177175
});
178176

179-
// Emit styles through callback or file
177+
// Emit styles through callback
180178
if (typeof options.css === 'function') {
181-
options.css(css);
182-
179+
options.css(css, styles);
183180
return;
184181
}
185182

186-
// Guess destination filename
187-
if (typeof options.css !== 'string') {
183+
if (typeof dest !== 'string') {
184+
// Don't create unwanted empty stylesheets
185+
if (!css.length) {
186+
return;
187+
}
188+
189+
// Guess destination filename
188190
dest = opts.dest || 'bundle.js';
189191
if (dest.endsWith('.js')) {
190192
dest = dest.slice(0, -3);
191193
}
192-
/* eslint-disable */
193-
options.css = dest + ".css";
194-
/* eslint-enable */
194+
dest = dest + ".css";
195195
}
196196

197-
fs.writeFile(options.css, css, function (err) {
197+
// Emit styles to file
198+
fs.writeFile(dest, css, function (err) {
198199
if (err) {
199200
throw err;
200201
}
201-
emitted(options.css, css.length);
202+
emitted(dest, css.length);
202203
});
203204
},
204205
};
@@ -212,9 +213,13 @@ function green(text) {
212213
return ("\u001b[1m\u001b[32m" + text + "\u001b[39m\u001b[22m");
213214
}
214215

215-
function getSize(size) {
216-
var bytes = size / 1024;
217-
return bytes < 1000 ? ((bytes.toPrecision(3)) + " kB") : (((bytes / 1024).toPrecision(3)) + " MB");
216+
function getSize(bytes) {
217+
if (bytes < 10000) {
218+
return ((bytes.toFixed(0)) + " B");
219+
}
220+
return bytes < 1024000
221+
? (((bytes / 1024).toPrecision(3)) + " kB'")
222+
: (((bytes / 1024 / 1024).toPrecision(4)) + " MB");
218223
}
219224

220225
export default vue;

0 commit comments

Comments
 (0)