fix: don't move composed classes early (#856)

Because it can cause invalid output if they get moved ahead of their dependencies, and we don't need to handle them at this point anyways

Author: tivac

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

@@ -26,7 +26,6 @@ const DEFAULTS = {
 const {
     selectorKey,
     isFile,
-    isSelector,
     isValue,
 } = Processor;
 
@@ -108,14 +107,8 @@ exports.transform = (file, processor, opts = {}) => {
 
         const imported = importsMap.get(depFile);
 
-        // File we're transforming
+        // Local deps are ignored at this point
         if(depFile === id) {
-            // Track this selector as part of the keys to be exported, adding
-            // here so it'll be sorted topologically
-            if(isSelector(depKey)) {
-                exportedKeys.add(data.selector);
-            }
-
             return;
         }
 

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

@@ -268,9 +268,38 @@ Object {
 }
 `;
 
+exports[`/rollup.js should express local & remote-composed classes correctly 1`] = `
+Object {
+  "assets/multiple-composition.css": "
+/* packages/rollup/test/specimens/multiple-composition/other.css */
+.mc_other {
+    color: green;
+}
+/* packages/rollup/test/specimens/multiple-composition/multiple-composition.css */
+.mc_one {
+    color: red;
+}
+.mc_two {
+    background: blue;
+}",
+  "multiple-composition.js": "
+const other = \\"mc_other\\";
+
+const one = \\"mc_one\\";
+const two = other + \\" \\" + one + \\" \\" + \\"mc_two\\";
+var css = {
+    one,
+two
+};
+
+console.log(css);
+",
+}
+`;
+
 exports[`/rollup.js should express locally-composed classes correctly 1`] = `
 Object {
-  "assets/local-composition-1485bb4a.css": "
+  "assets/local-composition.css": "
 /* packages/rollup/test/specimens/local-composition.css */
 .mc_one {
     color: red;

packages/rollup/test/rollup.test.js

@@ -51,6 +51,7 @@ describe("/rollup.js", () => {
         expect(
             await bundle.generate({
                 format,
+                assetFileNames,
             })
         ).toMatchRollupCodeSnapshot();
     });
@@ -66,6 +67,23 @@ describe("/rollup.js", () => {
         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`),
+            plugins : [
+                createPlugin(),
+            ],
+        });
+
+        expect(
+            await bundle.generate({
+                format,
+                assetFileNames,
             })
         ).toMatchRollupSnapshot();
     });
@@ -81,6 +99,7 @@ describe("/rollup.js", () => {
         expect(
             await bundle.generate({
                 format,
+                assetFileNames,
             })
         ).toMatchRollupCodeSnapshot();
     });

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

@@ -0,0 +1,10 @@
+.one {
+    color: red;
+}
+
+.two {
+    composes: other from "./other.css";
+    composes: one;
+
+    background: blue;
+}

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

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

packages/rollup/test/specimens/multiple-composition/other.css

@@ -0,0 +1,3 @@
+.other {
+    color: green;
+}