Merge pull request #8 from joshwnj/dedupe

Simple caching to prevent duplicate styles

Author: geelen

src/file-system-loader.js

@@ -25,6 +25,7 @@ export default class FileSystemLoader {
     this.sources = {}
     this.importNr = 0
     this.core = new Core(plugins)
+    this.tokensByFile = {};
   }
 
   fetch( _newPath, relativeTo, _trace ) {
@@ -35,11 +36,15 @@ export default class FileSystemLoader {
         rootRelativePath = path.resolve( relativeDir, newPath ),
         fileRelativePath = path.resolve( path.join( this.root, relativeDir ), newPath )
 
+      const tokens = this.tokensByFile[fileRelativePath]
+      if (tokens) { return resolve(tokens) }
+
       fs.readFile( fileRelativePath, "utf-8", ( err, source ) => {
         if ( err ) reject( err )
         this.core.load( source, rootRelativePath, trace, this.fetch.bind( this ) )
           .then( ( { injectableSource, exportTokens } ) => {
             this.sources[trace] = injectableSource
+            this.tokensByFile[fileRelativePath] = exportTokens
             resolve( exportTokens )
           }, reject )
       } )

test/test-cases.js

@@ -32,3 +32,24 @@ Object.keys( pipelines ).forEach( dirname => {
     } );
   } );
 } )
+
+// special case for testing multiple sources
+describe( 'multiple sources', () => {
+  let testDir = path.join( __dirname, 'test-cases' )
+  let testCase = 'multiple-sources';
+  let dirname = 'test-cases';
+  if ( fs.existsSync( path.join( testDir, testCase, "source1.css" ) ) ) {
+    it( "should " + testCase.replace( /-/g, " " ), done => {
+      let expected = normalize( fs.readFileSync( path.join( testDir, testCase, "expected.css" ), "utf-8" ) )
+      let loader = new FileSystemLoader( testDir, pipelines[dirname] )
+      let expectedTokens = JSON.parse( fs.readFileSync( path.join( testDir, testCase, "expected.json" ), "utf-8" ) )
+      loader.fetch( `${testCase}/source1.css`, "/" ).then( tokens1 => {
+        loader.fetch( `${testCase}/source2.css`, "/" ).then( tokens2 => {
+          assert.equal( loader.finalSource, expected )
+          const tokens = Object.assign({}, tokens1, tokens2);
+          assert.equal( JSON.stringify( tokens ), JSON.stringify( expectedTokens ) )
+        } ).then( done, done )
+      })
+    } );
+  }
+} );

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

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

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

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

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

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

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

@@ -0,0 +1,20 @@
+
+._multiple_sources_d__d {
+  color: #ddd;
+}
+
+._multiple_sources_b__b {
+  color: #bbb;
+}
+
+._multiple_sources_c__c {
+  color: #ccc;
+}
+
+._multiple_sources_source1__a {
+  color: #aaa;
+}
+
+._multiple_sources_source2__foo {
+  color: #f00;
+}

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

@@ -0,0 +1,4 @@
+{
+  "a": "_multiple_sources_source1__a _multiple_sources_b__b _multiple_sources_d__d _multiple_sources_c__c",
+  "foo": "_multiple_sources_source2__foo _multiple_sources_b__b _multiple_sources_d__d"
+}

test/test-cases/multiple-sources/source1.css

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

test/test-cases/multiple-sources/source2.css

@@ -0,0 +1,4 @@
+.foo {
+  composes: b from "./b.css";
+  color: #f00;
+}