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

Lines changed: 1 addition & 2 deletions
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

Lines changed: 7 additions & 7 deletions
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

Lines changed: 9 additions & 101 deletions
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

Lines changed: 30 additions & 0 deletions
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

Lines changed: 40 additions & 0 deletions
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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy