Convert LESS to Stylus for Twitter Bootstrap

less2stylus.coffee

# Quick hack of regular expressions to convert twitter bootstrap from LESS to Stylus
less2stylus = (string) ->
  string = string
    .replace(/^(\ *)(.+)\ +\{\ *\n?\ */mg, "$1$2\n$1  ") # remove opening brackets
    .replace(/^(\ *)([^\ ]+)\ +\{\ *\n?\ *?/mg, "$1$2\n$1  ") # remove opening brackets
    .replace(/\ *\{\ *\n*/g, "\n") # remove opening brackets again (some random cases I'm too lazy to think through)
    .replace(/\ *\}\ *\n*/g, "\n") # remove closing brackets
    .replace(/\;\ *?$/gm, "") # remove semicolons
    .replace(/@(\w+):(\ *)\ /g, "\$$1$2 = ") # replace @variable: with $variable =
    .replace(/\@/g, "\$")
    .replace(/\.([\w-]+)\(/g, "$1(") # replace mixins from .border-radius(4px) to border-radius(4px)
    .replace(/,\ */g, ", ") # make all commas have 1 space after them
    .replace(/\.less/g, ".styl")
    # need to make sure things like -webkit-background-size are left-aligned
    # need to handle expressions
    .replace(/\ *$/g, "") # remove trailing whitespace

  lines   = string.split("\n")
  indent  = 0

  for line, i in lines
    if line.match(/\w: /) # property name
      lines[i]  = line.replace(/^\ */, Array(indent + 1).join(" "))
    else if !line.match(/\/{2}/)
      indent    = line.match(/^(\ *)/)[1].length + 2

  lines.join("\n")

less = """
// Input grid system
// -------------------------
#inputGridSystem {
  .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, @columns) {
    width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 10;
  }
  .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth) {
    input,
    textarea,
    .uneditable-input {
      &.span1     { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 1); }
      &.span2     { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 2); }
      &.span3     { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 3); }
      &.span4     { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 4); }
      &.span5     { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 5); }
      &.span6     { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 6); }
      &.span7     { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 7); }
      &.span8     { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 8); }
      &.span9     { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 9); }
      &.span10    { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 10); }
      &.span11    { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 11); }
      &.span12    { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 12); }
    }
  }
}



// CSS3 PROPERTIES
// --------------------------------------------------

// Border Radius
.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}
"""

stylus = """
// Input grid system
// -------------------------
#inputGridSystem
  inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $columns)
    width: (($gridColumnWidth) * $columns) + ($gridGutterWidth * ($columns - 1)) - 10

  generate($gridColumns, $gridColumnWidth, $gridGutterWidth)
    input, 
    textarea, 
    .uneditable-input
      &.span1
        #inputGridSystem > inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 1)
      &.span2    
        #inputGridSystem > inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 2)
      &.span3    
        #inputGridSystem > inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 3)
      &.span4    
        #inputGridSystem > inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 4)
      &.span5    
        #inputGridSystem > inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 5)
      &.span6    
        #inputGridSystem > inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 6)
      &.span7    
        #inputGridSystem > inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 7)
      &.span8    
        #inputGridSystem > inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 8)
      &.span9    
        #inputGridSystem > inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 9)
      &.span10   
        #inputGridSystem > inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 10)
      &.span11   
        #inputGridSystem > inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 11)
      &.span12   
        #inputGridSystem > inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 12)



// CSS3 PROPERTIES
// --------------------------------------------------

// Border Radius
border-radius($1 = 5px)
  -webkit-border-radius: $radius
  -moz-border-radius: $radius
  border-radius: $radius
"""

assertEqual stylus, less2stylus(less)