reordering the output css [fixes #3]

Author: geelen

lib/index.js

@@ -102,8 +102,17 @@ exports['default'] = function (css) {
   /* Perform replacements */
   (0, _icssReplaceSymbols2['default'])(css, definitions);
 
+  /* Add export rules if any */
+  if (exportDeclarations.length > 0) {
+    css.prepend(_postcss2['default'].rule({
+      selector: ':export',
+      raws: { after: "\n" },
+      nodes: exportDeclarations
+    }));
+  }
+
   /* Add import rules */
-  importAliases.forEach(function (_ref) {
+  importAliases.reverse().forEach(function (_ref) {
     var path = _ref.path;
     var imports = _ref.imports;
 
@@ -122,15 +131,6 @@ exports['default'] = function (css) {
       })
     }));
   });
-
-  /* Add export rules if any */
-  if (exportDeclarations.length > 0) {
-    css.prepend(_postcss2['default'].rule({
-      selector: ':export',
-      raws: { after: "\n" },
-      nodes: exportDeclarations
-    }));
-  }
 };
 
 module.exports = exports['default'];

src/index.js

@@ -68,8 +68,17 @@ export default css => {
   /* Perform replacements */
   replaceSymbols(css, definitions)
 
+  /* Add export rules if any */
+  if (exportDeclarations.length > 0) {
+    css.prepend(postcss.rule({
+      selector: `:export`,
+      raws: { after: "\n" },
+      nodes: exportDeclarations
+    }))
+  }
+
   /* Add import rules */
-  importAliases.forEach(({path, imports}) => {
+  importAliases.reverse().forEach(({path, imports}) => {
     css.prepend(postcss.rule({
       selector: `:import(${path})`,
       raws: { after: "\n" },
@@ -81,13 +90,4 @@ export default css => {
       }))
     }))
   })
-
-  /* Add export rules if any */
-  if (exportDeclarations.length > 0) {
-    css.prepend(postcss.rule({
-      selector: `:export`,
-      raws: { after: "\n" },
-      nodes: exportDeclarations
-    }))
-  }
 }

test/index.js

@@ -28,47 +28,47 @@ describe('constants', () => {
   })
 
   it('should import and re-export a simple constant', () => {
-    test('@value red from "./colors.css";', ':export {\n  red: i__const_red_0\n}\n:import("./colors.css") {\n  i__const_red_0: red\n}')
+    test('@value red from "./colors.css";', ':import("./colors.css") {\n  i__const_red_0: red\n}\n:export {\n  red: i__const_red_0\n}')
   })
 
   it('should import a simple constant and replace usages', () => {
-    test('@value red from "./colors.css"; .foo { color: red; }', ':export {\n  red: i__const_red_1;\n}\n:import("./colors.css") {\n  i__const_red_1: red;\n}\n.foo { color: i__const_red_1; }')
+    test('@value red from "./colors.css"; .foo { color: red; }', ':import("./colors.css") {\n  i__const_red_1: red;\n}\n:export {\n  red: i__const_red_1;\n}\n.foo { color: i__const_red_1; }')
   })
 
   it('should import and alias a constant and replace usages', () => {
-    test('@value blue as red from "./colors.css"; .foo { color: red; }', ':export {\n  red: i__const_red_2;\n}\n:import("./colors.css") {\n  i__const_red_2: blue;\n}\n.foo { color: i__const_red_2; }')
+    test('@value blue as red from "./colors.css"; .foo { color: red; }', ':import("./colors.css") {\n  i__const_red_2: blue;\n}\n:export {\n  red: i__const_red_2;\n}\n.foo { color: i__const_red_2; }')
   })
 
   it('should import multiple from a single file', () => {
     test(
       `@value blue, red from "./colors.css";
 .foo { color: red; }
 .bar { color: blue }`,
-      `:export {
-  blue: i__const_blue_3;
-  red: i__const_red_4;
-}
-:import("./colors.css") {
+      `:import("./colors.css") {
   i__const_blue_3: blue;
   i__const_red_4: red;
 }
+:export {
+  blue: i__const_blue_3;
+  red: i__const_red_4;
+}
 .foo { color: i__const_red_4; }
 .bar { color: i__const_blue_3 }`)
   })
 
   it('should import from a definition', () => {
     test(
       '@value colors: "./colors.css"; @value red from colors;',
-      ':export {\n  colors: "./colors.css";\n  red: i__const_red_5\n}\n' +
-      ':import("./colors.css") {\n  i__const_red_5: red\n}'
+      ':import("./colors.css") {\n  i__const_red_5: red\n}\n' +
+      ':export {\n  colors: "./colors.css";\n  red: i__const_red_5\n}'
     )
   })
 
   it('should only allow values for paths if defined in the right order', () => {
     test(
       '@value red from colors; @value colors: "./colors.css";',
-      ':export {\n  red: i__const_red_6;\n  colors: "./colors.css"\n}\n' +
-      ':import(colors) {\n  i__const_red_6: red\n}'
+      ':import(colors) {\n  i__const_red_6: red\n}\n' +
+      ':export {\n  red: i__const_red_6;\n  colors: "./colors.css"\n}'
     )
   })
 
@@ -85,5 +85,9 @@ describe('constants', () => {
       ':export {\n  base: 10px;\n  large: calc(10px * 2);\n}\n.a { margin: calc(10px * 2); }'
     )
   })
+
+  it('should preserve import order', () => {
+    test('@value a from "./a.css"; @value b from "./b.css";', ':import("./a.css") {\n  i__const_a_7: a\n}\n:import("./b.css") {\n  i__const_b_8: b\n}\n:export {\n  a: i__const_a_7;\n  b: i__const_b_8\n}')
+  })
 })