OH GOD non-deterministic order-of-execution-dependant side-effects ARE THE WORST

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

@@ -16,13 +16,18 @@ export default class FileSystemLoader {
         fileRelativePath = this.root + rootRelativePath
 
       fs.readFile( fileRelativePath, "utf-8", ( err, source ) => {
-        if ( err ) reject( err )
-        Core.load( source, rootRelativePath, this.fetch.bind( this ) )
-          .then( ( { injectableSource, exportTokens } ) => {
-            this.sources.push( injectableSource )
-            resolve( exportTokens )
-          }, reject )
+        err ? reject( err ) : resolve( { source, rootRelativePath } )
       } )
     } )
   }
+
+  load( {source, rootRelativePath} ) {
+    console.log("LOADING " + rootRelativePath)
+    return Core.load( source, rootRelativePath, this )
+      .then( ( { injectableSource, exportTokens } ) => {
+        console.log("LOADED " + rootRelativePath)
+        this.sources.push( injectableSource )
+        return exportTokens
+      } )
+  }
 }

src/parser.js

@@ -9,7 +9,7 @@ export default class Parser {
   }
 
   plugin( css, result ) {
-    return Promise.all( this.fetchAllImports( css ) )
+    return this.fetchAllImports( css )
       .then( _ => this.extractExports( css ) )
   }
 
@@ -20,7 +20,13 @@ export default class Parser {
         imports.push( this.fetchImport( node, css.source.input.from ) )
       }
     } )
-    return imports
+    return Promise.all( imports )
+      .then( fetchedState => {
+        return Promise.all( fetchedState.map(
+          ( {loaderData, propResolver} ) =>
+            this.pathFetcher.load( loaderData ).then( propResolver )
+        ) )
+      } )
   }
 
   extractExports( css ) {
@@ -32,8 +38,8 @@ export default class Parser {
   handleExport( exportNode ) {
     exportNode.each( decl => {
       if ( decl.type == 'decl' ) {
-        Object.keys(this.translations).forEach( translation => {
-          decl.value = decl.value.replace(translation, this.translations[translation])
+        Object.keys( this.translations ).forEach( translation => {
+          decl.value = decl.value.replace( translation, this.translations[translation] )
         } )
         this.exportTokens[decl.prop] = decl.value
       }
@@ -43,13 +49,19 @@ export default class Parser {
 
   fetchImport( importNode, relativeTo ) {
     let file = importNode.selector.match( importRegexp )[1]
-    return this.pathFetcher( file, relativeTo ).then( exports => {
-      importNode.each( decl => {
-        if ( decl.type == 'decl' ) {
-          this.translations[decl.value] = exports[decl.prop]
+    console.log("FETCHING " + file)
+    return this.pathFetcher.fetch( file, relativeTo )
+      .then( loaderData => ({
+        loaderData,
+        propResolver: exports => {
+          console.log("RESOLVING " + file)
+          importNode.each( decl => {
+            if ( decl.type == 'decl' ) {
+              this.translations[decl.value] = exports[decl.prop]
+            }
+          } )
+          importNode.removeSelf()
         }
-      } )
-      importNode.removeSelf()
-    }, err => console.log( err ) )
+      }) )
   }
 }

test/test-cases.js

@@ -17,10 +17,12 @@ describe( "test-cases", () => {
         let expected = normalize( fs.readFileSync( path.join( testDir, testCase, "expected.css" ), "utf-8" ) )
         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( JSON.stringify( tokens ), JSON.stringify( expectedTokens ) )
-        } ).then( done, done )
+        loader.fetch( `${testCase}/source.css`, "/" )
+          .then( fetched => loader.load( fetched ) )
+          .then( tokens => {
+            assert.equal( loader.sources.join( "" ), 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,16 @@
+
+._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 @@
+{}

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

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