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.

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);

packages/rollup/test/specimens/internal-external-composition/internal-external-composition.js

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