fix(rollup): generated JS always uses clean names

packages/css-to-js/css-to-js.js

@@ -45,7 +45,12 @@ const deconflict = (map, source) => {
 };
 
 const prop = ([ key, value ]) => (key === value ? key : `${JSON.stringify(key)} : ${value}`);
-const esm = (key, value) => (key === value ? key : `${key} as ${value}`);
+const esm = (key, value) => {
+    const safeKey = identifierfy(key);
+    const safeValue = identifierfy(value);
+
+    return safeKey === safeValue ? safeKey : `${safeKey} as ${safeValue}`;
+};
 
 exports.transform = (file, processor, opts = {}) => {
     const options = {
@@ -288,9 +293,11 @@ exports.transform = (file, processor, opts = {}) => {
         out.push(`export var styles = ${JSON.stringify(details.result.css)};`);
     }
 
+    const code = out.join("\n");
+
     // Return JS representation
     return {
-        code : out.join("\n"),
+        code,
         dependencies,
         namedExports,
         warnings,

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

@@ -1,5 +1,90 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`/rollup.js Exports option should generated valid JS even when identifiers aren't 1`] = `
+Object {
+  "entry": "
+const fooBar = \\"mc_foo-bar\\";
+
+const out = fooBar + \\" \\" + \\"mc_out\\";
+var style = {
+    out
+};
+
+console.log(style);
+",
+}
+`;
+
+exports[`/rollup.js Exports option should provide named exports by default 1`] = `
+Object {
+  "named": "
+const a = \\"mc_a\\";
+
+console.log(a);
+",
+}
+`;
+
+exports[`/rollup.js Exports option should warn & ignore invalid identifiers (namedExports.rewriteInvalid = false) 1`] = `
+Object {
+  "code": "PLUGIN_WARNING",
+  "hook": "transform",
+  "id": Any<String>,
+  "message": "\\"fooga-wooga\\" is not a valid JS identifier",
+  "plugin": "@modular-css/rollup",
+  "toString": [Function],
+}
+`;
+
+exports[`/rollup.js Exports option should warn & ignore invalid identifiers (namedExports.rewriteInvalid = false) 2`] = `
+Object {
+  "invalid-name": "
+const fooga = \\"mc_fooga\\";
+const foogaWooga = \\"mc_fooga-wooga\\";
+var css = {
+    fooga,
+\\"fooga-wooga\\" : foogaWooga
+};
+
+console.log(css, fooga);
+",
+}
+`;
+
+exports[`/rollup.js Exports option should warn & rewrite invalid identifiers (namedExports.rewriteInvalid = true) 1`] = `
+Object {
+  "code": "PLUGIN_WARNING",
+  "hook": "transform",
+  "id": Any<String>,
+  "message": "\\"fooga-wooga\\" is not a valid JS identifier, exported as \\"foogaWooga\\"",
+  "plugin": "@modular-css/rollup",
+  "toString": [Function],
+}
+`;
+
+exports[`/rollup.js Exports option should warn & rewrite invalid identifiers (namedExports.rewriteInvalid = true) 2`] = `
+Object {
+  "invalid-name": "
+const fooga = \\"mc_fooga\\";
+const foogaWooga = \\"mc_fooga-wooga\\";
+var css = {
+    fooga,
+\\"fooga-wooga\\" : foogaWooga
+};
+
+console.log(css, fooga);
+",
+}
+`;
+
+exports[`/rollup.js Exports option should warn if named exports are falsey 1`] = `
+Array [
+  Array [
+    "@modular-css/rollup doesn't allow namedExports to be disabled",
+  ],
+]
+`;
+
 exports[`/rollup.js dev mode option should output a proxy 1`] = `
 Object {
   "simple": "
@@ -75,76 +160,6 @@ Object {
 }
 `;
 
-exports[`/rollup.js namedExports option should provide named exports by default 1`] = `
-Object {
-  "named": "
-const a = \\"mc_a\\";
-
-console.log(a);
-",
-}
-`;
-
-exports[`/rollup.js namedExports option should warn & ignore invalid identifiers (namedExports.rewriteInvalid = false) 1`] = `
-Object {
-  "code": "PLUGIN_WARNING",
-  "hook": "transform",
-  "id": Any<String>,
-  "message": "\\"fooga-wooga\\" is not a valid JS identifier",
-  "plugin": "@modular-css/rollup",
-  "toString": [Function],
-}
-`;
-
-exports[`/rollup.js namedExports option should warn & ignore invalid identifiers (namedExports.rewriteInvalid = false) 2`] = `
-Object {
-  "invalid-name": "
-const fooga = \\"mc_fooga\\";
-const foogaWooga = \\"mc_fooga-wooga\\";
-var css = {
-    fooga,
-\\"fooga-wooga\\" : foogaWooga
-};
-
-console.log(css, fooga);
-",
-}
-`;
-
-exports[`/rollup.js namedExports option should warn & rewrite invalid identifiers (namedExports.rewriteInvalid = true) 1`] = `
-Object {
-  "code": "PLUGIN_WARNING",
-  "hook": "transform",
-  "id": Any<String>,
-  "message": "\\"fooga-wooga\\" is not a valid JS identifier, exported as \\"foogaWooga\\"",
-  "plugin": "@modular-css/rollup",
-  "toString": [Function],
-}
-`;
-
-exports[`/rollup.js namedExports option should warn & rewrite invalid identifiers (namedExports.rewriteInvalid = true) 2`] = `
-Object {
-  "invalid-name": "
-const fooga = \\"mc_fooga\\";
-const foogaWooga = \\"mc_fooga-wooga\\";
-var css = {
-    fooga,
-\\"fooga-wooga\\" : foogaWooga
-};
-
-console.log(css, fooga);
-",
-}
-`;
-
-exports[`/rollup.js namedExports option should warn if named exports are falsey 1`] = `
-Array [
-  Array [
-    "@modular-css/rollup doesn't allow namedExports to be disabled",
-  ],
-]
-`;
-
 exports[`/rollup.js processor option should accept an existing processor instance (no css in bundle) 1`] = `
 Object {
   "assets/fake.css": "

packages/rollup/test/rollup.test.js

@@ -435,7 +435,7 @@ describe("/rollup.js", () => {
         });
     });
 
-    describe("namedExports option", () => {
+    describe("Exports option", () => {
         it("should provide named exports by default", async () => {
             const bundle = await rollup({
                 input   : require.resolve("./specimens/named.js"),
@@ -507,6 +507,23 @@ describe("/rollup.js", () => {
 
             expect(spy).toMatchLogspySnapshot();
         });
+
+        it("should generated valid JS even when identifiers aren't", async () => {
+            logspy("warn");
+
+            const bundle = await rollup({
+                input   : require.resolve("./specimens/composes-from-invalid-js/entry.js"),
+                plugins : [
+                    createPlugin(),
+                ],
+            });
+
+            expect(
+                await bundle.generate({
+                    format,
+                })
+            ).toMatchRollupCodeSnapshot();
+        });
     });
 
     describe("styleExport option", () => {

packages/rollup/test/specimens/composes-from-invalid-js/entry.js

@@ -0,0 +1,3 @@
+import style from "./one.css";
+
+console.log(style);

packages/rollup/test/specimens/composes-from-invalid-js/one.css

@@ -0,0 +1,3 @@
+.out {
+    composes: foo-bar from "./two.css";
+}

packages/rollup/test/specimens/composes-from-invalid-js/two.css

@@ -0,0 +1,3 @@
+.foo-bar {
+    color: salmon;
+}