title: Defining React CSSTransitionGroup animations with Stylus mixin
body: <p>I'm new to stylus and trying to figure out all the nuances.</p>
  
  <p>For reference, React has a component to assist with CSS animations
  <a href="https://facebook.github.io/react/docs/animation.html" rel="nofollow">https://facebook.github.io/react/docs/animation.html</a></p>
  
  <p>I want to be able to define animations using a mixin. For example, if I have a "login-button" animation, I want to be able to specify that the animation should be a fade animation by doing something like this:</p>
  
  <pre><code>animate.fade('login-button')
  </code></pre>
  
  <p>So I wrote a function/mixin like but its not working. When I run it through stylus, I get an error:</p>
  
  <pre><code>❯❯❯ stylus 
  animate = {}
  
  animate.fade(name)
    .{name}-appear
      opacity: 0
  
    .{name}-appear.{name}-appear-active
      transition: opacity .5s ease
      opacity: 1
  
    .{name}-enter
      opacity: 0
  
    .{name}-enter.{name}-enter-active
      transition: opacity .5s ease
      opacity: 1
  
    .{name}-leave
      opacity: 1
  
    .{name}-leave.fade-leave-active
      transition: opacity .5s ease
      opacity: 0
  
  animate.fade('login-button')
  
  ^D
  /usr/local/lib/node_modules/stylus/bin/stylus:593
        if (err) throw err;
                       ^
  ParseError: stdin:26:1
     22|     transition: opacity .5s ease
     23|     opacity: 0
     24| 
     25| animate.fade('login-button')
     26| 
  -------^
  
  expected "indent", got "eos"
  </code></pre>