fix: order multiple inputs correctly

src/index.js

@@ -19,20 +19,28 @@ function inferOption(option, defaultValue) {
  * Recursively get the correct import order from rollup
  * We only process a file once
  *
- * @param {string} id
+ * @param {Array<string>} ids
  * @param {Function} getModuleInfo
  * @param {Set<string>} seen
  */
-function getRecursiveImportOrder(id, getModuleInfo, seen = new Set()) {
+function getRecursiveImportOrder(ids, getModuleInfo, seen = new Set()) {
+  return ids.flatMap((id) => {
+    return getRecursiveImportOrderForModule(id, getModuleInfo, seen)
+  })
+}
+
+function getRecursiveImportOrderForModule(id, getModuleInfo, seen = new Set()) {
   if (seen.has(id)) {
     return []
   }
 
   seen.add(id)
 
   const result = [id]
-  getModuleInfo(id).importedIds.forEach(importFile => {
-    result.push(...getRecursiveImportOrder(importFile, getModuleInfo, seen))
+  getModuleInfo(id).importedIds.forEach((importFile) => {
+    result.push(
+      ...getRecursiveImportOrderForModule(importFile, getModuleInfo, seen)
+    )
   })
 
   return result
@@ -163,6 +171,11 @@ export default (options = {}) => {
           options_.dir,
           Object.keys(bundle).find(fileName => bundle[fileName].isEntry)
         )
+      const entryFiles = options_.file
+        ? [options_.file]
+        : Object.keys(bundle)
+            .filter((fileName) => bundle[fileName].isEntry)
+            .map((fileName) => path.join(options_.dir, fileName))
       const getExtracted = () => {
         let fileName = `${path.basename(file, path.extname(file))}.css`
         if (typeof postcssLoaderOptions.extract === 'string') {
@@ -171,13 +184,19 @@ export default (options = {}) => {
 
         const concat = new Concat(true, fileName, '\n')
         const entries = [...extracted.values()]
-        const { modules, facadeModuleId } = bundle[
-          normalizePath(path.relative(dir, file))
-        ]
-
-        if (modules) {
+        const facadeModuleIds = entryFiles
+          .map((entryFile) => {
+            const { modules, facadeModuleId } = bundle[
+              normalizePath(path.relative(dir, entryFile))
+            ]
+            if (modules) return facadeModuleId
+            return false
+          })
+          .filter((n) => n)
+
+        if (facadeModuleIds.length > 0) {
           const moduleIds = getRecursiveImportOrder(
-            facadeModuleId,
+            facadeModuleIds,
             this.getModuleInfo
           )
           entries.sort(

test/__snapshots__/index.test.js.snap

@@ -251,6 +251,52 @@ console.log(foo, bar);
 "
 `;
 
+exports[`extract multiple-inputs-resolve: css code 1`] = `
+".should-be-first {
+  color: red;
+}
+
+.from-index {
+  color: red;
+}
+
+.from-other {
+  color: blue;
+}
+
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImZpcnN0QW5kU2hhcmVkLmNzcyIsImJ1bmRsZS5jc3MiLCJvdGhlci5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxVQUFVO0FBQ1o7O0FDRkE7RUFDRSxVQUFVO0FBQ1o7O0FDRkE7RUFDRSxXQUFXO0FBQ2IiLCJmaWxlIjoiaW5kZXguY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLnNob3VsZC1iZS1maXJzdCB7XG4gIGNvbG9yOiByZWQ7XG59XG4iLCIuZnJvbS1pbmRleCB7XG4gIGNvbG9yOiByZWQ7XG59XG4iLCIuZnJvbS1vdGhlciB7XG4gIGNvbG9yOiBibHVlO1xufVxuIl19*/"
+`;
+
+exports[`extract multiple-inputs-resolve: js code 1`] = `
+"'use strict';
+
+console.log('here to prevent warnings');
+"
+`;
+
+exports[`extract multiple-inputs-resolve-reverse: css code 1`] = `
+".should-be-first {
+  color: red;
+}
+
+.from-other {
+  color: blue;
+}
+
+.from-index {
+  color: red;
+}
+
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImZpcnN0QW5kU2hhcmVkLmNzcyIsIm90aGVyLmNzcyIsImJ1bmRsZS5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxVQUFVO0FBQ1o7O0FDRkE7RUFDRSxXQUFXO0FBQ2I7O0FDRkE7RUFDRSxVQUFVO0FBQ1oiLCJmaWxlIjoiaW5kZXguY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLnNob3VsZC1iZS1maXJzdCB7XG4gIGNvbG9yOiByZWQ7XG59XG4iLCIuZnJvbS1vdGhlciB7XG4gIGNvbG9yOiBibHVlO1xufVxuIiwiLmZyb20taW5kZXgge1xuICBjb2xvcjogcmVkO1xufVxuIl19*/"
+`;
+
+exports[`extract multiple-inputs-resolve-reverse: js code 1`] = `
+"'use strict';
+
+console.log('here to prevent warnings');
+"
+`;
+
 exports[`extract nested: css code 1`] = `
 "body {
   color: red;

test/fixtures/multiple-inputs/bundle.css

@@ -0,0 +1,3 @@
+.from-index {
+  color: red;
+}

test/fixtures/multiple-inputs/bundle.js

@@ -0,0 +1,4 @@
+import './firstAndShared.css'
+import './bundle.css'
+
+console.log('here to prevent warnings')

test/fixtures/multiple-inputs/firstAndShared.css

@@ -0,0 +1,3 @@
+.should-be-first {
+  color: red;
+}

test/fixtures/multiple-inputs/other.css

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

test/fixtures/multiple-inputs/other.js

@@ -0,0 +1,4 @@
+import './firstAndShared.css'
+import './other.css'
+
+console.log('here to prevent warnings')

test/index.test.js

@@ -42,16 +42,20 @@ async function write({
   }
 
   outDir = fixture('dist', outDir)
+  const multipleInputs = Array.isArray(input)
+  const formattedInput = multipleInputs
+    ? input.map((i) => fixture(i))
+    : fixture(input)
   const bundle = await rollup({
-    input: fixture(input),
+    input: formattedInput,
     plugins: [postcss(postCssOptions), delayResolve && lateResolve].filter(
       Boolean
     )
   })
-  await bundle.write({
-    format: 'cjs',
-    file: path.join(outDir, 'bundle.js')
-  })
+  const writeOptions = multipleInputs
+    ? { format: 'cjs', dir: outDir }
+    : { format: 'cjs', file: path.join(outDir, 'bundle.js') }
+  await bundle.write(writeOptions)
   let cssCodePath = path.join(outDir, 'bundle.css')
   if (typeof options.extract === 'string') {
     cssCodePath = path.isAbsolute(options.extract) ? options.extract : path.join(outDir, options.extract)
@@ -336,6 +340,24 @@ snapshotMany('extract', [
       extract: true,
       delayResolve: true
     }
+  },
+  {
+    title: 'multiple-inputs-resolve',
+    input: ['multiple-inputs/bundle.js', 'multiple-inputs/other.js'],
+    options: {
+      sourceMap: 'inline',
+      extract: 'index.css',
+      delayResolve: true,
+    },
+  },
+  {
+    title: 'multiple-inputs-resolve-reverse',
+    input: ['multiple-inputs/other.js', 'multiple-inputs/bundle.js'],
+    options: {
+      sourceMap: 'inline',
+      extract: 'index.css',
+      delayResolve: true,
+    },
   }
 ])