Allow usage of transform and onImport options

Previously the preprocessor was overriding these options for its own
means which prevented a user from passing their own transform and
onImport options.

Now we call the user passed functions by proxy, so that it still works
as expected.

Fixes #36

Author: simonsmith

.eslintrc

@@ -1,5 +1,8 @@
 {
   "extends": "airbnb/legacy",
+  "globals": {
+    "Promise": true
+  },
   "rules": {
     "vars-on-top": 0,
     "no-console": 0,

CHANGELOG.md

@@ -1,5 +1,6 @@
 ### HEAD
 
+* Allow usage of `transform` and `onImport` in `postcss-easy-import`
 * Remove `beforeLint` feature
 * Add default browsers list for autoprefixer
 * Use `stylelint-config-suitcss` from within the preprocessor. No longer needs

lib/index.js

@@ -30,12 +30,8 @@ var defaults = {
       'ios > 6, android > 4.3, samsung > 3, chromeandroid > 50'
   },
   'postcss-easy-import': {
-    onImport: function(imported) {
-      // Update the watch task with the list of imported files
-      if (typeof global.watchCSS === 'function') {
-        global.watchCSS(imported);
-      }
-    }
+    transform: identity,
+    onImport: noop
   },
   'postcss-reporter': {
     clearMessages: true
@@ -49,7 +45,6 @@ var defaults = {
   }
 };
 
-
 /**
  * Process CSS
  *
@@ -86,18 +81,26 @@ function preprocessor(css, options) {
 function mergeOptions(options) {
   options = options || {};
   var mergedOpts = assign({}, defaults, options);
+  var easyImportOpts = mergedOpts['postcss-easy-import'];
+  var origTransform = easyImportOpts.transform;
+  var origOnImport = easyImportOpts.onImport;
 
-  // Set some core options
   if (mergedOpts.root) {
-    mergedOpts['postcss-easy-import'].root = mergedOpts.root;
+    easyImportOpts.root = mergedOpts.root;
   }
 
-  mergedOpts['postcss-easy-import'].transform = function(css, filename) {
-    return lintImportedFiles(mergedOpts, css, filename).then(function(result) {
+  easyImportOpts.transform = function(css, filename) {
+    var transformedCss = origTransform(css);
+    return lintImportedFiles(mergedOpts, transformedCss, filename).then(function(result) {
       return result.css;
     });
   };
 
+  easyImportOpts.onImport = function(importedFiles) {
+    updateWatchTaskFiles(importedFiles);
+    origOnImport(importedFiles);
+  };
+
   // Allow additional plugins to be merged with the defaults
   // but remove any duplicates so that it respects the new order
   if (!isEmpty(options.use)) {
@@ -126,5 +129,27 @@ function lintImportedFiles(options, css, filename) {
     .use(bemLinter(options['postcss-bem-linter']))
     .use(reporter(options['postcss-reporter']));
 
+  if (isPromise(css)) {
+    return css.then(function(css) { // eslint-disable-line no-shadow
+      return processor.process(css, {from: filename});
+    });
+  }
+
   return processor.process(css, {from: filename});
 }
+
+function isPromise(obj) {
+  return typeof obj.then === 'function';
+}
+
+function noop() {}
+
+function identity(x) {
+  return x;
+}
+
+function updateWatchTaskFiles(files) {
+  if (typeof global.watchCSS === 'function') {
+    global.watchCSS(files);
+  }
+}

test/test.js

@@ -121,6 +121,94 @@ describe('suitcss', function() {
       });
     });
 
+    describe('using the transform option in postcss-import', function() {
+      it('should use a default transform function that just returns the css', function(done) {
+        suitcss('@import "./util.css";', {
+          lint: true,
+          root: 'test/fixtures'
+        }).then(function(result) {
+          expect(result.css).to.equal('.u-img {\n  border-radius: 50%;\n}');
+          done();
+        })
+        .catch(done);
+      });
+
+      it('should call a custom transform function with the imported component', function(done) {
+        var transformStub = sinon.stub().returns('body { color: blue; }');
+
+        suitcss('@import "./util.css";', {
+          lint: true,
+          root: 'test/fixtures',
+          'postcss-easy-import': {
+            transform: transformStub
+          }
+        }).then(function(result) {
+          expect(transformStub.calledOnce).to.be.true;
+          expect(transformStub.getCall(0).args[0]).to.equal('.u-img {\n  border-radius: 50%;\n}\n');
+          expect(result.css).to.equal('body { color: blue; }');
+          done();
+        })
+        .catch(done);
+      });
+
+      it('should also work with a promise returned from the custom transform function', function(done) {
+        suitcss('@import "./util.css";', {
+          lint: true,
+          root: 'test/fixtures',
+          'postcss-easy-import': {
+            transform: function() {
+              return Promise.resolve('body { font: red; }');
+            }
+          }
+        }).then(function(result) {
+          expect(result.css).to.equal('body { font: red; }');
+          done();
+        })
+        .catch(done);
+      });
+    });
+
+    describe('using the onImport option postcss-import', function() {
+      var updateWatchTaskFilesSpy, revert;
+
+      beforeEach(function() {
+        updateWatchTaskFilesSpy = sinon.spy();
+        revert = suitcss.__set__('updateWatchTaskFiles', updateWatchTaskFilesSpy);
+      });
+
+      afterEach(function() {
+        revert();
+      });
+
+      it('should call the updateWatchTaskFiles function with the file paths', function(done) {
+        suitcss('@import "./util.css";', {
+          lint: true,
+          root: 'test/fixtures'
+        }).then(function() {
+          expect(updateWatchTaskFilesSpy.getCall(0).args[0][0]).to.contain('util.css');
+          done();
+        })
+        .catch(done);
+      });
+
+      it('should call a custom onImport function', function(done) {
+        var onImportSpy = sinon.spy();
+
+        suitcss('@import "./util.css";', {
+          lint: true,
+          root: 'test/fixtures',
+          'postcss-easy-import': {
+            onImport: onImportSpy
+          }
+        }).then(function() {
+          expect(onImportSpy.getCall(0).args[0][0]).to.contain('util.css');
+          expect(updateWatchTaskFilesSpy.getCall(0).args[0][0]).to.contain('util.css');
+          done();
+        })
+        .catch(done);
+      });
+    });
+
     describe('re-ordering plugins', function() {
       it('should allow reordering of use array and remove duplicates', function() {
         var opts = mergeOptions({