Merge pull request #1 from declandewet/develop

Bug fixes, 💯 test coverage

lib/index.js

@@ -4,8 +4,6 @@ var _       = require('lodash');
 var node    = require('when/node');
 var postcss = require('postcss');
 
-var transformers = [];
-
 /**
  * @class SystemCSS
  * @classdesc creates a new SystemCSS instance
@@ -77,7 +75,6 @@ var SystemCSS = (function SystemCSS() {
    * @return {Promise} a promise for the written mixins file
    */
   SystemCSS.prototype.mixins = function mixins(opts) {
-    opts = opts || {};
     this.settings = _.merge(this.settings, opts);
     if (this.settings.preprocessor.engine == null) {
       throw new Error("Please specify the name of the CSS preprocessor you wish to receive mixins for.");
@@ -228,7 +225,6 @@ var SystemCSS = (function SystemCSS() {
           var current = targets.pop();
           var index = targets.length - 1;
           var previous = targets[index];
-          if (previous == null) break;
           targets[index] = _(previous)
             .chain()
             .collect(duplicatePreviousTarget.bind(current))
@@ -342,7 +338,6 @@ var SystemCSS = (function SystemCSS() {
       var blockInContext       = current.type === 'context' && previous.type === 'block';
       var elementInParentState = previous.type === 'state' && current.type === 'element';
       var spacing              = '';
-      var i, len               = transformers.length;
 
       // normalize state name grammar such that "hovered" becomes "hover" and so on
       if (current.type === 'state') {
@@ -437,8 +432,7 @@ var SystemCSS = (function SystemCSS() {
     return {
       type: match.type,
       name: match.match[2],
-      pseudo: (match.match[3] != null) ? res.match[3] : '',
-      comma: (match.match[4] != null) ? res.match[4] + ' ' : '',
+      pseudo: (match.match[3] != null) ? match.match[3] : '',
       prefix: prefixes[match.type],
       suffix: this.settings.suffixes[match.type]
     };
@@ -475,8 +469,7 @@ var SystemCSS = (function SystemCSS() {
     return target.prefix +
            target.name +
            target.suffix +
-           (target.pseudo ? target.pseudo : '') +
-           (target.comma ? target.comma : '');
+           (target.pseudo ? target.pseudo : '');
   }
 
   return SystemCSS;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss-system",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Author your CSS with a BEM-compliant component-oriented system.",
   "author": "Declan de Wet <declandewet@me.com>",
   "directories": {
@@ -26,6 +26,7 @@
   },
   "devDependencies": {
     "chai": "^3.0.0",
+    "chai-as-promised": "^5.1.0",
     "coveralls": "^2.11.2",
     "istanbul": "^0.3.15",
     "mocha": "^2.2.5",

test/fixtures/css-selectors.css

@@ -0,0 +1,6 @@
+.regular-selector {
+  color: yellow;
+}
+.with, .commas {
+  color: blue;
+}

test/fixtures/css-selectors.pcss

@@ -0,0 +1,6 @@
+.regular-selector {
+  color: yellow;
+}
+.with, .commas {
+  color: blue;
+}

test/fixtures/element/parent-with-state.css

@@ -0,0 +1,12 @@
+.something {
+  color: blue;
+}
+.something:hover {
+  color: yellow;
+}
+.something:hover .something--part {
+  color: red;
+}
+.something:hover .something--part--nested {
+  color: green;
+}

test/fixtures/element/parent-with-state.pcss

@@ -0,0 +1,12 @@
+component(something) {
+  color: blue;
+  is(hovered) {
+    color: yellow;
+    has(part) {
+      color: red;
+      has(nested) {
+        color: green;
+      }
+    }
+  }
+}

test/fixtures/pseudo-selectors.css

@@ -0,0 +1,3 @@
+.tweet:hover {
+  color: blue;
+}

test/fixtures/pseudo-selectors.pcss

@@ -0,0 +1,3 @@
+component(tweet):hover {
+  color: blue;
+}

test/fixtures/state/protected.css

@@ -0,0 +1,6 @@
+.tweet {
+  color: blue;
+}
+.tweet:enabled {
+  color: yellow;
+}

test/fixtures/state/protected.pcss

@@ -0,0 +1,6 @@
+component(tweet) {
+  color: blue;
+  is(enabled) {
+    color: yellow;
+  }
+}

test/test.js

@@ -1,14 +1,18 @@
-var path = require('path');
-var _ = require('lodash');
+var path    = require('path');
+var _       = require('lodash');
 var postcss = require('postcss');
-var expect = require('chai').expect;
-var node = require('when/node');
-var fs = require('fs');
-var plugin = require('../lib');
-var nested = require('postcss-nested');
+var chai    = require('chai');
+var node    = require('when/node');
+var fs      = require('fs');
+var plugin  = require('../lib');
+var nested  = require('postcss-nested');
+var promise = require('chai-as-promised');
+var expect  = chai.expect;
+
+chai.use(promise);
 
 var FIXTURES_PATH = path.join(__dirname, 'fixtures');
-var MIXIN_PATH = path.join(FIXTURES_PATH, 'mixins');
+var MIXIN_PATH    = path.join(FIXTURES_PATH, 'mixins');
 
 function match_files(file1, file2) {
   var inp = fs.readFileSync(file1, { encoding: 'utf-8' });
@@ -51,6 +55,30 @@ describe('SystemCSS', function() {
 
   describe('preprocessor supplementation', function() {
 
+    it('should throw when calling without the right options', function() {
+      expect(plugin.mixins.bind(plugin, {
+        preprocessor: {
+          engine: null
+        }
+      })).to.throw('Please specify the name of the CSS preprocessor you wish to receive mixins for.');
+      expect(plugin.mixins.bind(plugin, {
+        preprocessor: {
+          engine: 'stylus'
+        }
+      })).to.throw('Pleace specify a directory path. SystemCSS cannot write your mixins to a directory it does not know.');
+    });
+
+    it('should be rejected if an error occurs', function() {
+      expect(plugin.mixins({
+        preprocessor: {
+          engine: 'fake-engine',
+          output: 'fake-output'
+        }
+      }).then(function() {
+        throw new Error('Some fake error...');
+      })).to.be.rejected;
+    });
+
     _.each(['sass', 'scss', 'less', 'stylus'], function(preprocessor) {
 
       describe(preprocessor, function() {
@@ -112,9 +140,17 @@ describe('SystemCSS', function() {
 
   describe('PostCSS', function() {
 
+    it('supports calling with no options param', function(done) {
+      test('.test {}', '.test {}', null, done);
+    });
+
     describe('all', function() {
 
-      it('supports multiple arguments', match_expected.bind(null, 'test', {}));
+      it('supports multiple arguments', match_expected.bind(null, 'multiple-args', {}));
+
+      it('supports pseudo-selectors', match_expected.bind(null, 'pseudo-selectors', {}));
+
+      it('does not transform regular CSS selectors', match_expected.bind(null, 'css-selectors', {}));
 
     });
 
@@ -132,6 +168,8 @@ describe('SystemCSS', function() {
 
       it('supports elements in modifiers', match_expected.bind(null, 'element/modified-parent', {}));
 
+      it('supports elements with a parent that has state', match_expected.bind(null, 'element/parent-with-state', {}));
+
     });
 
     describe('modifier', function() {
@@ -144,6 +182,8 @@ describe('SystemCSS', function() {
 
       it('compiles to the correct output', match_expected.bind(null, 'state/basic', {}));
 
+      it('does not transform protected states', match_expected.bind(null, 'state/protected', {}));
+
     });
 
     describe('context', function() {