getInitialState: function() {
    var parser = less.Parser();

    try {
        // Create a dummy tree and later replace its rules with our rules
        parser.parse('dummy {}', function(err, tree) {
          if (err) {
            console.error(err);
          }

          tree.rules = this.styles.rules;
          tree.selectors = this.styles.selectors;

          this.styles = tree;
          
          // At this point, this.styles calls get to the point where it says
          // some function is undefined. Because the tree is JSON, it doesn't 
          // have the proper methods. So, we need to iterate through and set
          // their prototype.
          // Or, during the transform step, build the AST using function calls.
        }.bind(this));
    }
    catch (err) {
      console.error(err);
    }
}

var TodoApp = React.createClass({
  styles: `
    html,
    body {
      margin: 0;
      padding: 0;
    }

    body {
      font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
      line-height: 1.4em;
      background: #eaeaea url('todomvc-common/bg.png');
      color: #4d4d4d;
      width: 550px;
      margin: 0 auto;
      -webkit-font-smoothing: antialiased;
      -moz-font-smoothing: antialiased;
      -ms-font-smoothing: antialiased;
      -o-font-smoothing: antialiased;
      font-smoothing: antialiased;
    }

    #todoapp {
      background: #fff;
      background: rgba(255, 255, 255, 0.9);
      margin: 130px 0 40px 0;
      border: 1px solid #ccc;
      position: relative;
      border-top-left-radius: 2px;
      border-top-right-radius: 2px;
      box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2),
            0 25px 50px 0 rgba(0, 0, 0, 0.15);
    }

    #todoapp:before {
      content: '';
      border-left: 1px solid #f5d6d6;
      border-right: 1px solid #f5d6d6;
      width: 2px;
      position: absolute;
      top: 0;
      left: 40px;
      height: 100%;
    }


    #todo-count {
      float: left;
      text-align: left;
    }
  `,

  getInitialState: function() {
    return getTodoState();
  },

  /**
   * @return {object}
   */
  render: function() {
    var style = Object.assign(
      {},
      this.styles['html, body'],
      this.styles['body']
    );

    return (
      <div style={style}>
        <div style={this.styles['#todoapp']}>
          <div style={this.styles['#todoapp:before']}></div>
          <Header />
          <MainSection
            allTodos={this.state.allTodos}
            areAllComplete={this.state.areAllComplete}
          />
          <Footer allTodos={this.state.allTodos} />
        </div>
        <div style={this.styles['#info']}>
          <p>Double-click to edit a todo</p>
          <p>Created by <a href="http://facebook.com/bill.fisher.771" style={this.styles['#info a']}>Bill Fisher</a></p>
          <p>Part of <a href="http://todomvc.com" style={this.styles['#info a']}>TodoMVC</a></p>
        </div>
      </div>
    );
  },

  /**
   * Event handler for 'change' events coming from the TodoStore
   */
  _onChange: function() {
    this.styles.refresh();

    this.setState(getTodoState());
  }

});

  "browserify": {
    "transform": [
      "reactify",
      "envify",
      "reactify-stylify"
    ]
  },