fix: only include direct deps in compositions (#857)

Because of how the css-in-js package works the deps already contain all of *their* deps, so by concatenating all of the deps of the selector you actually end up with duplicated classes in the output and it looks a real mess.

Author: tivac

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

@@ -68,10 +68,10 @@ exports.transform = (file, processor, opts = {}) => {
 
     // Only want direct dependencies and any first-level dependencies
     // of this file to be processed
-    graph.outgoingEdges[Processor.fileKey(id)].forEach((dep) => {
+    graph.directDependenciesOf(Processor.fileKey(id)).forEach((dep) => {
         dependencies.add(dep);
 
-        graph.outgoingEdges[dep].forEach((d) => {
+        graph.directDependenciesOf(dep).forEach((d) => {
             dependencies.add(d);
         });
     });
@@ -215,15 +215,14 @@ exports.transform = (file, processor, opts = {}) => {
 
         // Build the list of composed classes for this class
         if(graph.hasNode(sKey)) {
-            graph.dependenciesOf(sKey).forEach((dep) => {
+            graph.directDependenciesOf(sKey).forEach((dep) => {
                 const { file: src, selector } = graph.getNodeData(dep);
 
                 // Get the value from the right place
-                if(src !== id) {
-                    elements.push(externalsMap.get(dep));
-                } else {
-                    elements.push(internalsMap.get(selector));
-                }
+                elements.push(src !== id ?
+                    externalsMap.get(dep) :
+                    internalsMap.get(selector)
+                );
             });
         }
 

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

@@ -268,21 +268,51 @@ Object {
 }
 `;
 
+exports[`/rollup.js should express layers of locally-composed classes correctly 1`] = `
+Object {
+  "assets/composition-layers.css": "
+/* packages/rollup/test/specimens/composition-layers/composition-layers.css */
+.mc_a {
+    color: red;
+}
+
+.mc_b {
+    color: blue;
+}
+
+.mc_c {
+    color: green;
+}",
+  "composition-layers.js": "
+const a = \\"mc_a\\";
+const b = a + \\" \\" + \\"mc_b\\";
+const c = b + \\" \\" + \\"mc_c\\";
+var css = {
+    a,
+b,
+c
+};
+
+console.log(css);
+",
+}
+`;
+
 exports[`/rollup.js should express local & remote-composed classes correctly 1`] = `
 Object {
-  "assets/multiple-composition.css": "
-/* packages/rollup/test/specimens/multiple-composition/other.css */
+  "assets/internal-external-composition.css": "
+/* packages/rollup/test/specimens/internal-external-composition/other.css */
 .mc_other {
     color: green;
 }
-/* packages/rollup/test/specimens/multiple-composition/multiple-composition.css */
+/* packages/rollup/test/specimens/internal-external-composition/internal-external-composition.css */
 .mc_one {
     color: red;
 }
 .mc_two {
     background: blue;
 }",
-  "multiple-composition.js": "
+  "internal-external-composition.js": "
 const other = \\"mc_other\\";
 
 const one = \\"mc_one\\";

packages/rollup/test/rollup.test.js

@@ -72,9 +72,25 @@ describe("/rollup.js", () => {
         ).toMatchRollupSnapshot();
     });
 
+    it("should express layers of locally-composed classes correctly", async () => {
+        const bundle = await rollup({
+            input   : require.resolve(`./specimens/composition-layers/composition-layers.js`),
+            plugins : [
+                createPlugin(),
+            ],
+        });
+
+        expect(
+            await bundle.generate({
+                format,
+                assetFileNames,
+            })
+        ).toMatchRollupSnapshot();
+    });
+
     it("should express local & remote-composed classes correctly", async () => {
         const bundle = await rollup({
-            input   : require.resolve(`./specimens/multiple-composition/multiple-composition.js`),
+            input   : require.resolve(`./specimens/internal-external-composition/internal-external-composition.js`),
             plugins : [
                 createPlugin(),
             ],

packages/rollup/test/specimens/composition-layers/composition-layers.css

@@ -0,0 +1,15 @@
+.a {
+    color: red;
+}
+
+.b {
+    composes: a;
+
+    color: blue;
+}
+
+.c {
+    composes: b;
+
+    color: green;
+}

packages/rollup/test/specimens/composition-layers/composition-layers.js

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

…ple-composition/multiple-composition.css …sition/internal-external-composition.csspackages/rollup/test/specimens/multiple-composition/multiple-composition.css renamed to packages/rollup/test/specimens/internal-external-composition/internal-external-composition.css packages/rollup/test/specimens/multiple-composition/multiple-composition.css renamed to packages/rollup/test/specimens/internal-external-composition/internal-external-composition.css

@@ -0,0 +1,3 @@
+import css from "./internal-external-composition.css";
+
+console.log(css);