Merge pull request #29 from jerekshoe/retain-order-during-watch

Nested import handling

Author: thgh

package.json

@@ -8,8 +8,9 @@
   "scripts": {
     "build": "rollup -c",
     "dev": "rollup -cw",
-    "test:simple": "cd test/simple && rm -f output.* && rollup -c && cmp output.js ../expected.js && cmp output.css expected.css && cd ../..",
-    "test": "npm run test:simple",
+    "test:nested": "cd test/nested && rm -rf output && rollup -c && cmp output/bundle.js expected/bundle.js && cmp output/bundle.css expected/bundle.css && cd ../..",
+    "test:simple": "cd test/simple && rm -rf output && rollup -c && cmp output/output.js expected.js && cmp output/output.css expected.css && cd ../..",
+    "test": "npm run test:simple && npm run test:nested",
     "lint": "prettier rollup.config.js src/**",
     "prepare": "npm run build",
     "prepublish": "npm run build"

src/index.js

@@ -1,14 +1,43 @@
 import { createFilter } from '@rollup/pluginutils'
 
+var arraysEqual = function(a, b) {
+  if (a.length !== b.length) return false
+
+  for (let i = a.length; i--;) {
+    if (a[i] !== b[i]) return false
+  }
+
+  return true
+}
+
 export default function css(options = {}) {
   const filter = createFilter(options.include || ['**/*.css'], options.exclude)
   const styles = {}
-  const order = []
   let dest = options.output
-  let changes = 0
+  let hasChanged = false
+  let prevIds = []
+
+  // Get all CSS modules in the order that they were imported
+  const getCSSModules = (id, getModuleInfo, modules = new Set()) => {
+    if (modules.has(id)) {
+      return new Set()
+    }
+    
+    if (filter(id)) modules.add(id)
+    
+    // Recursively retrieve all of imported CSS modules
+    getModuleInfo(id).importedIds.forEach(importId => {
+      modules = new Set([].concat(Array.from(modules), Array.from(getCSSModules(importId, getModuleInfo, modules))))
+    });
+  
+    return modules
+  };
 
   return {
     name: 'css',
+    buildStart() {
+      hasChanged = false
+    },
     transform(code, id) {
       if (!filter(id)) {
         return
@@ -22,32 +51,37 @@ export default function css(options = {}) {
         }
       }
 
-      // Track the order that each stylesheet is imported.
-      if (!order.includes(id)) {
-        order.push(id)
-      }
-
       // Keep track of every stylesheet
       // Check if it changed since last render
+      // NOTE: If we are in transform block, we can assume styles[id] !== code, right?
       if (styles[id] !== code && (styles[id] || code)) {
         styles[id] = code
-        changes++
+        hasChanged = true
       }
 
       return ''
     },
     generateBundle(opts, bundle) {
-      // No stylesheet needed
-      if (!changes || options.output === false) {
-        return
+      const ids = []
+
+      // Determine import order of files
+      for (const file in bundle) {
+        const root = bundle[file].facadeModuleId
+        const modules = getCSSModules(root, this.getModuleInfo)
+        ids.push(...Array.from(modules))
       }
-      changes = 0
 
-      // Combine all stylesheets, respecting import order
+      // If the files are imported in the same order and there are no changes
+      // or options.output is false, there is no work to be done
+      if (arraysEqual(prevIds, ids) && !hasChanged || options.output === false) return
+      prevIds = ids
+
       let css = ''
-      for (let x = 0; x < order.length; x++) {
-        const id = order[x]
-        css += styles[id] || ''
+
+      // Combine all stylesheets, respecting import order
+      for (const index in ids) {
+        let id = ids[index]
+        css += styles[id] + '\n' || ''
       }
 
       // Emit styles through callback

test/nested/README.md

@@ -0,0 +1,2 @@
+## Test Case
+This is to test that nested imports are bundled in the proper order

test/nested/css/b.css

@@ -0,0 +1,3 @@
+body {
+  background-color: blue;
+}

test/nested/css/g.css

@@ -0,0 +1,3 @@
+body {
+  background-color: green;
+}

test/nested/css/r.css

@@ -0,0 +1,3 @@
+body {
+  background-color: red;
+}

test/nested/expected/bundle.css

@@ -0,0 +1,9 @@
+body {
+  background-color: blue;
+}
+body {
+  background-color: red;
+}
+body {
+  background-color: green;
+}

test/nested/expected/bundle.js

@@ -0,0 +1,3 @@
+console.log('This should happen first');
+
+console.log('This should happen second');

test/nested/input.js

@@ -0,0 +1,5 @@
+import './js/b.js';
+import './css/r.css';
+import './css/g.css';
+
+console.log('This should happen second');

test/nested/js/b.js

@@ -0,0 +1,3 @@
+import '../css/b.css';
+
+console.log('This should happen first');

test/nested/rollup.config.js

@@ -0,0 +1,12 @@
+import css from '../../src/index.js'
+
+export default {
+  input: 'input.js',
+  output: {
+    file: 'output/bundle.js',
+    format: 'esm'
+  },
+  plugins: [
+    css({ output: 'bundle.css' })
+  ]
+}

test/expected.js renamed to test/simple/expected.js

@@ -1,4 +1,4 @@
 .rollup {
   color: green;
   user-select: none;
-}
+}

test/input.css renamed to test/simple/input.css

@@ -1,12 +1,12 @@
 import css from '../../src/index.js'
 
 export default {
-  input: '../input.js',
+  input: 'input.js',
   output: {
-    file: 'output.js',
+    file: 'output/output.js',
     format: 'esm'
   },
   plugins: [
-    css()
+    css({ output: 'output.css' })
   ]
 }