Merge pull request #42 from suitcss/transform-and-onimport

Allow usage of transform and onImport options

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

README.md

@@ -69,7 +69,7 @@ Examples:
 
 ### Node.js
 
-Returns a [PostCSS promise](https://github.com/postcss/postcss/blob/master/docs/api.md#lazyresult-class)
+Returns a [PostCSS promise](http://api.postcss.org/LazyResult.html)
 
 ```js
 var preprocessor = require('suitcss-preprocessor');
@@ -131,7 +131,7 @@ If set to `true` then the output is minified by [`cssnano`](http://cssnano.co/).
 * Type: `Object`
 * Default: `undefined`
 
-Options that are passed directly to `postcss`, as per [the documentation](https://github.com/postcss/postcss/blob/master/docs/api.md#processorprocesscss-opts).
+Options that are passed directly to `postcss`, as per [the documentation](http://api.postcss.org/global.html#processOptions).
 
 ```js
 {
@@ -195,7 +195,7 @@ Options are merged recursively with the defaults. For example, adding new plugin
 
 By default the preprocessor uses all necessary plugins to build SUIT components. However additional plugins can be installed into a project and then added to the `use` array.
 
-**Note**: This will not work with the preprocessor installed globally. Instead rely on the convenience of `npm run <script>`
+**Note**: This will not work with the preprocessor installed globally. Instead rely on the convenience of `npm run script`
 
 ```js
 module.exports = {

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({