test.js

// Generated by CoffeeScript 1.6.3
(function() {
  var assert, fs, jcss, render;

  jcss = require('./jcss.js');

  render = jcss.render;

  fs = require('fs');

  assert = require('chai').assert;

  describe('simple structures', function() {
    var css;
    css = {
      '.class': {
        style1: 'value',
        style2: 20
      }
    };
    it('plain styles', function() {
      var res;
      res = ".class {\n  style1: value;\n  style2: 20;\n}\n\n";
      return assert.strictEqual(render(css), res);
    });
    return it('minified styles', function() {
      var res;
      res = ".class{style1:value;style2:20;}";
      return assert.strictEqual(render(css, true), res);
    });
  });

  describe('multiselector', function() {
    return it('selectors', function() {
      var css, res;
      css = {
        '.class1': {
          style1: 'value'
        },
        '.class2': {
          style2: 'value'
        }
      };
      res = '.class1{style1:value;}.class2{style2:value;}';
      return assert.strictEqual(render(css, true), res);
    });
  });

  describe('hierarchy', function() {
    it('normal join', function() {
      var css, res;
      css = {
        '.class1': {
          style1: 'red',
          '.class2': {
            style2: 'blue'
          }
        }
      };
      res = '.class1{style1:red;}.class1 .class2{style2:blue;}';
      return assert.strictEqual(render(css, true), res);
    });
    it('left join', function() {
      var css, res;
      css = {
        '.class1': {
          style1: 'red',
          '&-inner2': {
            style2: 'blue'
          }
        }
      };
      res = '.class1{style1:red;}.class1-inner2{style2:blue;}';
      return assert.strictEqual(render(css, true), res);
    });
    return it('normal join', function() {
      var css, res;
      css = {
        '.class1': {
          style1: 'red',
          '.class2 &': {
            style2: 'blue'
          }
        }
      };
      res = '.class1{style1:red;}.class2 .class1{style2:blue;}';
      return assert.strictEqual(render(css, true), res);
    });
  });

  describe('difficult structure', function() {
    it('split', function() {
      var css, res;
      css = {
        '.class1|.class2': {
          style1: 'red',
          '&-inner3|.class4 &': {
            style2: 'blue'
          }
        },
        '-inner3': {
          '.class1&': {
            style2: 'green'
          }
        }
      };
      res = '.class1{style1:red;}.class1-inner3{style2:green;}.class4 .class1{style2:blue;}.class2{style1:red;}.class2-inner3{style2:blue;}.class4 .class2{style2:blue;}';
      return assert.strictEqual(render(css, true), res);
    });
    return it('extend', function() {
      var css, res;
      css = {
        '.class1': {
          style1: 'red',
          '.class2': {
            style1: 'blue'
          }
        },
        '.class1': {
          style1: 'blue',
          '.class2': {
            style: 'red'
          }
        }
      };
      res = '.class1{style1:blue;}.class1 .class2{style:red;}';
      return assert.strictEqual(render(css, true), res);
    });
  });

  describe('extra', function() {
    it('@media', function() {
      var css, res;
      css = {
        '@media (max-width=980)': {
          '.class1': {
            style1: 'red',
            '.class2': {
              style2: 'blue'
            }
          }
        },
        '.class1': {
          '@media (max-width=980)': {
            style1: 'blue',
            '.class2': {
              style2: 'red'
            }
          }
        }
      };
      res = '@media (max-width=980){.class1{style1:blue;}.class1 .class2{style2:red;}}';
      return assert.strictEqual(render(css, true), res);
    });
    it('@font-face', function() {
      var css, res;
      css = {
        '@font-face': [
          {
            fontFamily: 'FontName1',
            src: 'url(fontname1.otf)'
          }, {
            fontFamily: 'FontName2',
            src: 'url(fontname2.otf)'
          }
        ]
      };
      res = '@font-face{font-family:FontName1;src:url(fontname1.otf);}@font-face{font-family:FontName2;src:url(fontname2.otf);}';
      return assert.strictEqual(render(css, true), res);
    });
    return it('@import', function() {
      var css, res;
      css = {
        '@import': ['url("one.css") all', 'url("two.css") all']
      };
      res = '@import url("one.css") all;@import url("two.css") all;';
      return assert.strictEqual(render(css, true), res);
    });
  });

  describe('mixins', function() {
    var mixins;
    mixins = jcss.mixins;
    it('simple', function() {
      var css, res;
      css = {
        '.class1': {
          size: '200px 100px'
        }
      };
      res = '.class1{width:200px;height:100px;}';
      return assert.strictEqual(render(css, true), res);
    });
    it('define', function() {
      var css, res;
      css = {
        '.class1': {
          borderRadius: '5px'
        }
      };
      res = '.class1{-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}';
      jcss.mixins = {
        borderRadius: function(val) {
          return {
            WebkitBorderRadius: val,
            MozBorderRadius: val,
            borderRadius: val
          };
        }
      };
      assert.strictEqual(render(css, true), res);
      return jcss.mixins = mixins;
    });
    return it('inserted', function() {
      var css, res;
      css = {
        '.class1': {
          size: '200 100'
        }
      };
      jcss.mixins = {
        size: mixins.size,
        width: function(val) {
          return {
            width: val + 'px'
          };
        },
        height: function(val) {
          return {
            height: val + 'px'
          };
        }
      };
      res = '.class1{width:200px;height:100px;}';
      assert.strictEqual(render(css, true), res);
      return jcss.mixins = mixins;
    });
  });

  describe('custom object', function() {
    return it('example', function() {
      var Test, css, res;
      Test = (function() {
        function Test() {}

        Test.prototype.toString = function() {
          return '100px';
        };

        return Test;

      })();
      css = {
        '.class1': {
          width: new Test
        }
      };
      res = '.class1{width:100px;}';
      return assert.strictEqual(render(css, true), res);
    });
  });

}).call(this);