Stylus 0.4.0 released

Stylus for those who are not familiar with it, is a dynamic language which compiles down to css, written with JavaScript for node.js.

CSS Syntax Support

Previously Stylus only allowed the use of our indented grammar, which may deter designers that are not comfortable learning or using a new syntax. For this reason and to aid in copy/pasting of css stylesheets I have added support for optional semi-colons, colons, commas, and braces, this means that most css is valid.

Example

The example below is completely valid, showing the use of mixins within both our indentation-style usage, and our css-style usage.

  vendor(prop, args)
    -webkit-{prop} args
    -moz-{prop} args
    {prop} args

  border-radius()
    vendor('border-radius', arguments)

  button
  a.button
  input[type=submit]
  input[type=button]
    border-radius 3px 5px
    color black
    &:hover
      background black
      color white

  button,
  a.button,
  input[type=submit],
  input[type=button] {
    border-radius: 3px 5px;
    color: black;
    &:hover {
      background: black;
      color: white;
    }
  }

yielding:

button,
a.button,
input[type=submit],
input[type=button] {
  color: #000;
  -webkit-border-radius: 3px 5px;
  -moz-border-radius: 3px 5px;
  border-radius: 3px 5px;
}
button:hover,
a.button:hover,
input[type=submit]:hover,
input[type=button]:hover {
  background: #000;
  color: #fff;
}
button,
a.button,
input[type=submit],
input[type=button] {
  color: #000;
  -webkit-border-radius: 3px 5px;
  -moz-border-radius: 3px 5px;
  border-radius: 3px 5px;
}
button:hover,
a.button:hover,
input[type=submit]:hover,
input[type=button]:hover {
  background: #000;
  color: #fff;
}

This of course applies to use within mixins as well, using the indentation-style we may define the mixin as:

  fade-to(to = .5)
    &:hover
      opacity to

  button
    fade-to(.1)

or with the css-style as:

  fade-to(to = .5)
    &:hover {
      opacity: to;
    }

  button {
    fade-to(.1);
  }

both yielding:

  button:hover {
    opacity: 0.1;
  }

Hope you enjoy the new feature, be sure to watch the project on GitHub to keep up to date with improvements.