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

Commit 5bc78fb

Browse files
znckznck
committed
✨ Multiple Styles
Fixes #34 Fixes #38
1 parent f21019e commit 5bc78fb

File tree

9 files changed

+334
-436
lines changed

9 files changed

+334
-436
lines changed

‎config/build.js

+1-2
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ rollup.rollup({
1818
entry: 'src/index.js',
1919
plugins: [
2020
buble({
21+
objectAssign: 'Object.assign',
2122
transforms: {
2223
dangerousForOf: true
2324
}
@@ -37,5 +38,3 @@ rollup.rollup({
3738
.catch(function logError(e) {
3839
console.log(e)
3940
});
40-
41-

‎package.json

+7-7
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,8 @@
3535
"de-indent": "^1.0.2",
3636
"debug": "^2.2.0",
3737
"html-minifier": "^3.1.0",
38-
"magic-string": "^0.16.0",
39-
"parse5": "^2.2.2",
38+
"magic-string": "^0.19.0",
39+
"parse5": "^3.0.0",
4040
"rollup-pluginutils": "^1.5.2",
4141
"vue-template-compiler": "^2.0.3",
4242
"vue-template-es2015-compiler": "^1.2.4",
@@ -47,16 +47,16 @@
4747
"clean-css": "^3.4.20",
4848
"coveralls": "^2.11.14",
4949
"eslint": "^3.7.1",
50-
"eslint-config-airbnb": "^12.0.0",
51-
"eslint-config-airbnb-base": "^8.0.0",
50+
"eslint-config-airbnb": "^13.0.0",
51+
"eslint-config-airbnb-base": "^11.0.0",
5252
"eslint-plugin-html": "^1.5.3",
53-
"eslint-plugin-import": "^1.16.0",
54-
"eslint-plugin-jsx-a11y": "^2.2.3",
53+
"eslint-plugin-import": "^2.2.0",
54+
"eslint-plugin-jsx-a11y": "^3.0.1",
5555
"eslint-plugin-react": "^6.4.1",
5656
"istanbul": "^0.4.5",
5757
"mocha": "^3.1.2",
5858
"mocha-lcov-reporter": "^1.2.0",
59-
"rollup": "^0.36.3",
59+
"rollup": "^0.37.0",
6060
"rollup-plugin-buble": "^0.14.0",
6161
"rollup-plugin-replace": "^1.1.1",
6262
"stylus": "^0.54.5",

‎src/index.js

+9-101
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import MagicString from 'magic-string';
44

55
import vueTransform from './vueTransform';
66
import DEFAULT_OPTIONS from './options';
7+
import compileStyle from './style';
78
import debug from './debug';
89

910
function mergeOptions(options, defaults) {
@@ -43,127 +44,34 @@ export default function vue(options = {}) {
4344
}
4445
options.compileTemplate = false;
4546
}
46-
} catch (e) {
47-
}
47+
} catch (e) {}
4848
/* eslint-enable */
4949

5050
options = mergeOptions(options, DEFAULT_OPTIONS);
5151

5252
const styles = {};
53-
let rollupOptions;
54-
let generated = false;
55-
const generateStyleBundle = () => {
56-
if (options.css === false) {
57-
return;
58-
}
59-
60-
if (generated) {
61-
debug('Style already generated!');
62-
return;
63-
}
64-
65-
generated = true;
66-
67-
// Combine all stylesheets.
68-
let css = '';
69-
Object.keys(styles).forEach((key) => {
70-
css += styles[key].content || '';
71-
});
72-
73-
// Emit styles through callback
74-
if (typeof options.css === 'function') {
75-
options.css(css, styles);
76-
return;
77-
}
78-
79-
// Don't generate empty style file.
80-
if (!css.trim().length) {
81-
return;
82-
}
83-
84-
let dest = options.css;
85-
if (typeof dest !== 'string') {
86-
// Guess destination filename
87-
dest = rollupOptions.dest || 'bundle.js';
88-
if (dest.endsWith('.js')) {
89-
dest = dest.slice(0, -3);
90-
}
91-
dest = `${dest}.css`;
92-
}
93-
94-
// Emit styles to file
95-
writeFile(dest, css, (err) => {
96-
if (err) {
97-
throw err;
98-
}
99-
emitted(dest, css.length);
100-
});
101-
};
10253

10354
return {
10455
name: 'vue',
105-
options(o) {
106-
if (rollupOptions === undefined) {
107-
rollupOptions = o;
108-
debug('Set options.');
109-
}
110-
},
11156
transform(source, id) {
11257
if (!filter(id) || !id.endsWith('.vue')) {
11358
debug(`Ignore: ${id}`);
11459
return null;
11560
}
11661

11762
debug(`Transform: ${id}`);
118-
const { js, css, map } = vueTransform(source, id, options);
11963

120-
// Map of every stylesheet
121-
styles[id] = css || {};
64+
const { code, css, map } = vueTransform(source, id, options);
12265

123-
// Component javascript with inlined html template
124-
const result = {
125-
code: js,
126-
map: map.generateMap({ hires: true }),
127-
};
66+
styles[id] = css;
12867

12968
debug(`Transformed: ${id}`);
13069

131-
return result;
132-
},
133-
transformBundle(source) {
134-
generateStyleBundle();
135-
const map = new MagicString(source);
136-
const result = {
137-
code: source,
138-
map: map.generateMap({ hires: true }),
139-
};
140-
debug('with(this) fixed!');
141-
142-
return result;
70+
return { code, map };
14371
},
144-
ongenerate(opts, rendered) {
145-
debug('on generate!');
146-
generateStyleBundle();
147-
rendered.code = rendered.code.replace(
148-
/if[\s]*\(window\.__VUE_WITH_STATEMENT__\)/g, 'with(this)');
149-
debug('with(this) fixed!');
150-
},
151-
};
152-
}
15372

154-
function emitted(text, bytes) {
155-
console.log(green(text), getSize(bytes));
156-
}
157-
158-
function green(text) {
159-
return `\u001b[1m\u001b[32m${text}\u001b[39m\u001b[22m`;
160-
}
161-
162-
function getSize(bytes) {
163-
if (bytes < 10000) {
164-
return `${bytes.toFixed(0)} B`;
165-
}
166-
return bytes < 1024000
167-
? `${(bytes / 1024).toPrecision(3)} kB'`
168-
: `${(bytes / 1024 / 1024).toPrecision(4)} MB`;
73+
ongenerate() {
74+
compileStyle(styles, options);
75+
}
76+
};
16977
}

‎src/options.js

+30
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,34 @@ export default {
44
collapseWhitespace: true,
55
removeComments: true,
66
},
7+
vue: {
8+
// Remove all trasforms added by vue since it's up to the user
9+
// to use whatever he wants
10+
// https://github.com/vuejs/vue-template-es2015-compiler/blob/master/index.js#L6
11+
transforms: {
12+
stripWith: true, // remove the with statement
13+
14+
arrow: false,
15+
classes: false,
16+
collections: false,
17+
computedProperty: false,
18+
conciseMethodProperty: false,
19+
constLoop: false,
20+
dangerousForOf: false,
21+
dangerousTaggedTemplateString: false,
22+
defaultParameter: false,
23+
destructuring: false,
24+
forOf: false,
25+
generator: false,
26+
letConst: false,
27+
modules: false,
28+
numericLiteral: false,
29+
parameterDestructuring: false,
30+
reservedProperties: false,
31+
spreadRest: false,
32+
stickyRegExp: false,
33+
templateString: false,
34+
unicodeRegExp: false,
35+
},
36+
}
737
};

‎src/style.js

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
export default function (files, options) {
2+
if (options.css === false) {
3+
return;
4+
}
5+
6+
// Combine all stylesheets.
7+
let css = '';
8+
const allStyles = [];
9+
10+
Object.keys(files).forEach((file) => {
11+
files[file].forEach((style) => {
12+
css += style.code + '\n';
13+
allStyles.push(style);
14+
});
15+
});
16+
17+
// Emit styles through callback
18+
if (typeof options.css === 'function') {
19+
options.css(css, allStyles);
20+
21+
return;
22+
}
23+
24+
// Don't generate empty style file.
25+
if (!css.trim().length) {
26+
return;
27+
}
28+
29+
let dest = options.css;
30+
31+
if (typeof dest !== 'string') {
32+
return;
33+
}
34+
35+
// Emit styles to file
36+
writeFile(dest, css, (err) => {
37+
if (err) throw err;
38+
emitted(dest, css.length);
39+
});
40+
};

0 commit comments

Comments
 (0)