Merge pull request css-modules#2 from css-modules/source-order-failing-test

Source order failing test

Author: geelen

package.json

@@ -8,7 +8,7 @@
   },
   "dependencies": {
     "postcss": "^4.1.11",
-    "postcss-modules-extract-imports": "0.0.1",
+    "postcss-modules-extract-imports": "0.0.2",
     "postcss-modules-local-by-default": "0.0.7",
     "postcss-modules-scope": "0.0.3"
   },
@@ -17,7 +17,7 @@
     "babel-eslint": "^3.1.9",
     "babelify": "^6.1.2",
     "chokidar-cli": "^0.2.1",
-    "eslint": "^0.21.2",
+    "eslint": "^0.22.1",
     "mocha": "^2.2.5"
   },
   "scripts": {

src/file-system-loader.js

@@ -2,27 +2,51 @@ import Core from './index.js'
 import fs from 'fs'
 import path from 'path'
 
+// Sorts dependencies in the following way:
+// AAA comes before AA and A
+// AB comes after AA and before A
+// All Bs come after all As
+// This ensures that the files are always returned in the following order:
+// - In the order they were required, except
+// - After all their dependencies
+const traceKeySorter = ( a, b ) => {
+  if ( a.length < b.length ) {
+    return a < b.substring( 0, a.length ) ? -1 : 1
+  } else if ( a.length > b.length ) {
+    return a.substring( 0, b.length ) <= b ? -1 : 1
+  } else {
+    return a < b ? -1 : 1
+  }
+};
+
 export default class FileSystemLoader {
   constructor( root ) {
     this.root = root
-    this.sources = []
+    this.sources = {}
     this.seenPaths = new Set()
+    this.importNr = 0
   }
 
-  fetch( _newPath, relativeTo ) {
-    let newPath = _newPath.replace( /^["']|["']$/g, "" )
+  fetch( _newPath, relativeTo, _trace ) {
+    let newPath = _newPath.replace( /^["']|["']$/g, "" ),
+      trace = _trace || String.fromCharCode( this.importNr++ )
     return new Promise( ( resolve, reject ) => {
       let rootRelativePath = path.resolve( path.dirname( relativeTo ), newPath ),
         fileRelativePath = this.root + rootRelativePath
 
       fs.readFile( fileRelativePath, "utf-8", ( err, source ) => {
         if ( err ) reject( err )
-        Core.load( source, rootRelativePath, this.fetch.bind( this ) )
+        Core.load( source, rootRelativePath, trace, this.fetch.bind( this ) )
           .then( ( { injectableSource, exportTokens } ) => {
-            this.sources.push( injectableSource )
+            this.sources[trace] = injectableSource
             resolve( exportTokens )
           }, reject )
       } )
     } )
   }
+
+  get finalSource() {
+    return Object.keys( this.sources ).sort( traceKeySorter ).map( s => this.sources[s] )
+      .join( "" )
+  }
 }

src/index.js

@@ -18,8 +18,8 @@ export default {
     scope
   ],
 
-  load( sourceString, sourcePath, pathFetcher ) {
-    let parser = new Parser( pathFetcher )
+  load( sourceString, sourcePath, trace, pathFetcher ) {
+    let parser = new Parser( pathFetcher, trace )
 
     return postcss( this.plugins.concat( [parser.plugin] ) )
       .process( sourceString, { from: "/" + sourcePath } )

src/parser.js

@@ -1,11 +1,12 @@
 const importRegexp = /^:import\((.+)\)$/
 
 export default class Parser {
-  constructor( pathFetcher ) {
+  constructor( pathFetcher, trace ) {
     this.pathFetcher = pathFetcher
     this.plugin = this.plugin.bind( this )
     this.exportTokens = {}
     this.translations = {}
+    this.trace = trace
   }
 
   plugin( css, result ) {
@@ -17,7 +18,7 @@ export default class Parser {
     let imports = []
     css.each( node => {
       if ( node.type == "rule" && node.selector.match( importRegexp ) ) {
-        imports.push( this.fetchImport( node, css.source.input.from ) )
+        imports.push( this.fetchImport( node, css.source.input.from, imports.length ) )
       }
     } )
     return imports
@@ -41,9 +42,10 @@ export default class Parser {
     exportNode.removeSelf()
   }
 
-  fetchImport( importNode, relativeTo ) {
-    let file = importNode.selector.match( importRegexp )[1]
-    return this.pathFetcher( file, relativeTo ).then( exports => {
+  fetchImport( importNode, relativeTo, depNr ) {
+    let file = importNode.selector.match( importRegexp )[1],
+      depTrace = this.trace + String.fromCharCode(depNr)
+    return this.pathFetcher( file, relativeTo, depTrace ).then( exports => {
       importNode.each( decl => {
         if ( decl.type == 'decl' ) {
           this.translations[decl.value] = exports[decl.prop]

test/test-cases.js

@@ -18,7 +18,7 @@ describe( "test-cases", () => {
         let loader = new FileSystemLoader( testDir )
         let expectedTokens = JSON.parse( fs.readFileSync( path.join( testDir, testCase, "expected.json" ), "utf-8" ) )
         loader.fetch( `${testCase}/source.css`, "/" ).then( tokens => {
-          assert.equal( loader.sources.join( "" ), expected )
+          assert.equal( loader.finalSource, expected )
           assert.equal( JSON.stringify( tokens ), JSON.stringify( expectedTokens ) )
         } ).then( done, done )
       } );

test/test-cases/multiple-dependencies/b.css

@@ -0,0 +1,4 @@
+.b {
+  extends: d from "./d.css";
+  color: #bbb;
+}

test/test-cases/multiple-dependencies/c.css

@@ -0,0 +1,3 @@
+.c {
+  color: #ccc;
+}

test/test-cases/multiple-dependencies/d.css

@@ -0,0 +1,3 @@
+.d {
+  color: #ddd;
+}

test/test-cases/multiple-dependencies/expected.css

@@ -0,0 +1,17 @@
+
+._multiple_dependencies_d__d {
+  color: #ddd;
+}
+
+._multiple_dependencies_b__b {
+  color: #bbb;
+}
+
+._multiple_dependencies_c__c {
+  color: #ccc;
+}
+
+._multiple_dependencies_source__a {
+  color: #aaa;
+}
+

test/test-cases/multiple-dependencies/expected.json

@@ -0,0 +1,3 @@
+{
+  "a": "_multiple_dependencies_source__a _multiple_dependencies_b__b _multiple_dependencies_d__d _multiple_dependencies_c__c"
+}

test/test-cases/multiple-dependencies/source.css

@@ -0,0 +1,6 @@
+.a {
+  extends: b from "./b.css";
+  extends: c from "./c.css";
+  color: #aaa;
+}
+