Skip to content

Commit 166bfb2

Browse files
tivactivac
authored
fix: Correctly support named exports of @value (#399)
* fix: named exports of string values are broken Was quoting & not escaping values at all, which creates invalid JS in some cases. Now using `JSON.stringify()` for these values. WARNING: code like `@value val: "value"` will be `"\"value\""` in JS, I don't want to introduce special handling for it. * test: specimen/snapshot updates for exported @value * test: provide a few more examples * chore: update svelte deps * test: update svelte snapshot * chore: update rollup dep * test: update rollup snapshot
1 parent fe82167 commit 166bfb2

File tree

12 files changed

+49
-28
lines changed

12 files changed

+49
-28
lines changed

‎packages/rollup/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
"postcss"
1919
],
2020
"devDependencies": {
21-
"rollup": "^0.51.8",
21+
"rollup": "^0.56.1",
2222
"test-utils": "^8.0.0"
2323
},
2424
"dependencies": {

‎packages/rollup/rollup.js

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -67,11 +67,10 @@ module.exports = function(opts) {
6767
)
6868
)
6969
.then((results) => {
70-
var result = results[0],
71-
classes = output.join(result.exports),
72-
named = Object.keys(classes),
73-
out = [
74-
`export default ${JSON.stringify(classes, null, 4)};`
70+
var result = results[0],
71+
exported = output.join(result.exports),
72+
out = [
73+
`export default ${JSON.stringify(exported, null, 4)};`
7574
];
7675

7776
// Add dependencies
@@ -88,14 +87,14 @@ module.exports = function(opts) {
8887
};
8988
}
9089

91-
named.forEach((ident) => {
90+
Object.keys(exported).forEach((ident) => {
9291
if(keyword.isReservedWordES6(ident) || !keyword.isIdentifierNameES6(ident)) {
9392
options.onwarn(`Invalid JS identifier "${ident}", unable to export`);
9493

9594
return;
9695
}
9796

98-
out.push(`export var ${ident} = "${classes[ident]}";`);
97+
out.push(`export var ${ident} = ${JSON.stringify(exported[ident])};`);
9998
});
10099

101100
return {

‎packages/rollup/test/__snapshots__/rollup.test.js.snap

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
exports[`/rollup.js should allow disabling of named exports 1`] = `
44
"var css = {
5+
\\"str\\": \\"\\\\\\"string\\\\\\"\\",
56
\\"fooga\\": \\"fooga\\"
67
};
78
@@ -22,27 +23,29 @@ exports[`/rollup.js should generate CSS 1`] = `
2223
color: red;
2324
}
2425
25-
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NwZWNpbWVucy9zaW1wbGUuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLCtDQUFDO0FBQUQ7SUFDSSxXQUFXO0NBQ2QiLCJmaWxlIjoic2ltcGxlLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5mb29nYSB7XG4gICAgY29sb3I6IHJlZDtcbn1cbiJdfQ== */"
26+
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NwZWNpbWVucy9zaW1wbGUuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLCtDQUFDO0FBRUQ7SUFDSSxXQUFXO0NBQ2QiLCJmaWxlIjoic2ltcGxlLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIkB2YWx1ZSBzdHI6IFwic3RyaW5nXCI7XG5cbi5mb29nYSB7XG4gICAgY29sb3I6IHJlZDtcbn1cbiJdfQ== */"
2627
`;
2728

2829
exports[`/rollup.js should generate JSON 1`] = `
2930
"{
3031
\\"packages/rollup/test/specimens/simple.css\\": {
32+
\\"str\\": \\"\\\\\\"string\\\\\\"\\",
3133
\\"fooga\\": \\"fooga\\"
3234
}
3335
}"
3436
`;
3537

3638
exports[`/rollup.js should generate exports 1`] = `
3739
"var css = {
40+
\\"str\\": \\"\\\\\\"string\\\\\\"\\",
3841
\\"fooga\\": \\"fooga\\"
3942
};
4043
4144
console.log(css);
4245
"
4346
`;
4447

45-
exports[`/rollup.js should generate external source maps 1`] = `"{\\"version\\":3,\\"sources\\":[\\"../specimens/simple.css\\"],\\"names\\":[],\\"mappings\\":\\"AAAA,+CAAC;AAAD;IACI,WAAW;CACd\\",\\"file\\":\\"simple.css\\",\\"sourcesContent\\":[\\".fooga {\\\\n color: red;\\\\n}\\\\n\\"]}"`;
48+
exports[`/rollup.js should generate external source maps 1`] = `"{\\"version\\":3,\\"sources\\":[\\"../specimens/simple.css\\"],\\"names\\":[],\\"mappings\\":\\"AAAA,+CAAC;AAED;IACI,WAAW;CACd\\",\\"file\\":\\"simple.css\\",\\"sourcesContent\\":[\\"@value str: \\\\\\"string\\\\\\";\\\\n\\\\n.fooga {\\\\n color: red;\\\\n}\\\\n\\"]}"`;
4649

4750
exports[`/rollup.js should not output sourcemaps when they are disabled 1`] = `
4851
"/* packages/rollup/test/specimens/simple.css */
@@ -53,9 +56,13 @@ exports[`/rollup.js should not output sourcemaps when they are disabled 1`] = `
5356
`;
5457

5558
exports[`/rollup.js should provide named exports 1`] = `
56-
"var a = \\"a\\";
59+
"var str = \\"\\\\\\"string\\\\\\"\\";
60+
var num = \\"10\\";
61+
var dim = \\"10px\\";
62+
var mix = \\"1px solid red\\";
63+
var a = \\"a\\";
5764
58-
console.log(a);
65+
console.log(a, str, num, dim, mix);
5966
"
6067
`;
6168

@@ -81,8 +88,8 @@ console.log(css, fooga);
8188

8289
exports[`/rollup.js shouldn't disable sourcemap generation 1`] = `
8390
Object {
84-
"file": null,
85-
"mappings": ";;;;AAEA,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC",
91+
"file": "simple.js",
92+
"mappings": ";;;;;AAEA,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC",
8693
"names": Array [],
8794
"sourcesContent": Array [
8895
"import css from \\"./simple.css\\";

‎packages/rollup/test/specimens/named.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
@value str: "string";
2+
@value num: 10;
3+
@value dim: 10px;
4+
@value mix: 1px solid red;
5+
16
.a {
27
color: red;
38
}

‎packages/rollup/test/specimens/named.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
import {a} from "./named.css";
1+
import { a, str, num, dim, mix } from "./named.css";
22

3-
console.log(a);
3+
console.log(a, str, num, dim, mix);

‎packages/rollup/test/specimens/simple.css

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@value str: "string";
2+
13
.fooga {
24
color: red;
35
}

‎packages/svelte/package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,9 @@
2222
],
2323
"devDependencies": {
2424
"dedent": "^0.7.0",
25-
"rollup": "^0.51.8",
26-
"rollup-plugin-svelte": "^3.3.0",
27-
"svelte": "^1.46.0"
25+
"rollup": "^0.56.1",
26+
"rollup-plugin-svelte": "^4.0.0",
27+
"svelte": "^1.55.0"
2828
},
2929
"dependencies": {
3030
"mkdirp": "^0.5.1",

‎packages/svelte/test/__snapshots__/rollup.test.js.snap

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -193,6 +193,7 @@ var proto = {
193193
};
194194
195195
196+
196197
function create_main_fragment(state, component) {
197198
var div, h1, text_1, div_1, p, p_class_value;
198199

‎packages/webpack/loader.js

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,9 @@ module.exports = function(source) {
2020

2121
return processor.string(this.resourcePath, source)
2222
.then((result) => {
23-
var classes = output.join(result.exports),
24-
named = Object.keys(classes),
25-
out = [
26-
`export default ${JSON.stringify(classes, null, 4)};`
23+
var exported = output.join(result.exports),
24+
out = [
25+
`export default ${JSON.stringify(exported, null, 4)};`
2726
];
2827

2928
processor.dependencies(this.resourcePath).forEach(this.addDependency);
@@ -35,14 +34,14 @@ module.exports = function(source) {
3534

3635
// Warn if any of the exported CSS wasn't able to be used as a valid JS identifier
3736
// and exclude from the output
38-
named.forEach((ident) => {
37+
Object.keys(exported).forEach((ident) => {
3938
if(keyword.isReservedWordES6(ident) || !keyword.isIdentifierNameES6(ident)) {
4039
this.emitWarning(new Error(`Invalid JS identifier "${ident}", unable to export`));
4140

4241
return;
4342
}
4443

45-
out.push(`export var ${ident} = "${classes[ident]}";`);
44+
out.push(`export var ${ident} = ${JSON.stringify(exported[ident])};`);
4645
});
4746

4847
return done(null, out.join("\n"));

‎packages/webpack/test/__snapshots__/webpack.test.js.snap

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -905,12 +905,15 @@ console.log(__WEBPACK_IMPORTED_MODULE_0__es2015_css__[\\"a\\" /* default */]);
905905
/***/ (function(module, __webpack_exports__, __webpack_require__) {
906906
907907
\\"use strict\\";
908+
/* unused harmony export val */
908909
/* unused harmony export a */
909910
/* unused harmony export b */
910911
/* harmony default export */ __webpack_exports__[\\"a\\"] = ({
912+
\\"val\\": \\"\\\\\\"value\\\\\\"\\",
911913
\\"a\\": \\"a\\",
912914
\\"b\\": \\"b\\"
913915
});
916+
var val = \\"\\\\\\"value\\\\\\"\\";
914917
var a = \\"a\\";
915918
var b = \\"b\\";
916919
@@ -1000,20 +1003,23 @@ Object.defineProperty(__webpack_exports__, \\"__esModule\\", { value: true });
10001003
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__es2015_css__ = __webpack_require__(1);
10011004
10021005
1003-
console.log(__WEBPACK_IMPORTED_MODULE_0__es2015_css__[\\"a\\"]);
1006+
console.log(__WEBPACK_IMPORTED_MODULE_0__es2015_css__[\\"a\\"], __WEBPACK_IMPORTED_MODULE_0__es2015_css__[\\"b\\" /* val */]);
10041007
10051008
10061009
/***/ }),
10071010
/* 1 */
10081011
/***/ (function(module, __webpack_exports__, __webpack_require__) {
10091012
10101013
\\"use strict\\";
1014+
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \\"b\\", function() { return val; });
10111015
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \\"a\\", function() { return a; });
10121016
/* unused harmony export b */
10131017
/* unused harmony default export */ var _unused_webpack_default_export = ({
1018+
\\"val\\": \\"\\\\\\"value\\\\\\"\\",
10141019
\\"a\\": \\"a\\",
10151020
\\"b\\": \\"b\\"
10161021
});
1022+
var val = \\"\\\\\\"value\\\\\\"\\";
10171023
var a = \\"a\\";
10181024
var b = \\"b\\";
10191025

0 commit comments

Comments
 (0)