CSS imports

.gitignore

@@ -13,3 +13,4 @@ node_modules
 # Build files
 dist
 /test/**/output.*
+/test/**/output/

package.json

@@ -8,8 +8,10 @@
   "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:imports": "cd test/imports && rm -rf output && rollup -c && cmp output/bundle.js expected/bundle.js && cmp output/bundle.css expected/bundle.css && cd ../..",
+    "test": "npm run test:simple && npm run test:nested && npm run test:imports",
     "lint": "prettier rollup.config.js src/**",
     "prepare": "npm run build",
     "prepublish": "npm run build"

src/index.js

@@ -1,53 +1,130 @@
 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
+}
+
+function splitImports(code) {
+  const imports = [];
+  const codeWithoutImports = code.replace(/@import\s+(.*);(\r\n)+/gm, (_, group) => {
+    imports.push(group.replace(/(["'])~/, '$1'));
+    return '';
+  });
+  return {
+    imports,
+    codeWithoutImports
+  };
+}
+
+// Get all CSS modules in the order that they were imported
+function getCSSModules(id, getModuleInfo) {
+  const modules = [];
+  const visited = new Set();
+
+  // traversal logic
+  // 1. mark node as visited
+  // 2. add to list at the end
+  // 3. go down with imports but in reverse order
+  // 4. reverse full list
+  // example
+  // root
+  //  1
+  //   11
+  //   12
+  //  2
+  //   21
+  //   22
+  // will result in the list: root, 2, 22, 21, 1, 12, 11 
+  // revered: 11, 12, 1, 21, 22, 2, root
+  const visitModule = (id) => {
+    if (visited.has(id)) {
+      return;
+    }
+    visited.add(id);
+    if (filter(id)) {
+      modules.push(id);
+    }
+    const reverseChildren = getModuleInfo(id).importedIds.slice().reverse();
+    reverseChildren.forEach(visitModule);
+  }
+  visitModule(id);
+  return modules.reverse();
+};
+
 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 = []
 
   return {
     name: 'css',
+    buildStart() {
+      hasChanged = false
+    },
     transform(code, id) {
       if (!filter(id)) {
         return
       }
 
+      const { imports, codeWithoutImports } = splitImports(code);
+
       // When output is disabled, the stylesheet is exported as a string
       if (options.output === false) {
+        if (imports.length === 0) {
+          return {
+            code: `export default ['${JSON.stringify(code)}'`,
+            map: { mappings: '' }
+          }
+        }
+        const importNamed = imports.map((d, i) => `import i${i} from ${d}`).join('\n');
         return {
-          code: 'export default ' + JSON.stringify(code),
+          code: `
+            ${importNamed}
+            export default ${imports.map((_, i) => `i${i}`).join(' + ')} + '${JSON.stringify(codeWithoutImports)}'`,
           map: { mappings: '' }
         }
       }
 
-      // 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
-      if (styles[id] !== code && (styles[id] || code)) {
-        styles[id] = code
-        changes++
+      // NOTE: If we are in transform block, we can assume styles[id] !== code, right?
+      if (styles[id] !== codeWithoutImports && (styles[id] || codeWithoutImports)) {
+        styles[id] = codeWithoutImports
+        hasChanged = true
       }
 
-      return ''
+      // return a list of imports
+      return imports.map((d) => `import ${d}`).join('\n');
     },
     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(...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/imports/css/first.css

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

test/imports/css/input.css

@@ -0,0 +1,5 @@
+@import './second.css';
+
+.last {
+  color: green;
+}

test/imports/css/second.css

@@ -0,0 +1,5 @@
+@import './fist.css';
+
+.second {
+  color: green;
+}

test/imports/expected/bundle.css

@@ -0,0 +1,12 @@
+.first {
+  color: blue;
+}
+
+.second {
+  color: green;
+}
+
+.last {
+  color: green;
+}
+

test/imports/input.js

@@ -0,0 +1,3 @@
+import './css/input.css'
+
+console.log('css imported')

test/imports/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/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/input.css → test/simple/input.css

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

test/simple/rollup.config.js

@@ -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' })
   ]
 }