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]+)\ +\{\ *\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 =
        "$#{$1}#{$2} = "
      )
      .replace(/\@(\w+)/g, (_, $1) -> (if $1 == "import" then _ else "$#{$1}"))
      .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")
      .replace(/(\ *)(.+)>\ *([\w-]+)\(/g, "$1$2>\n$1  $3(")
      # 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(/^\ +[\w-]+\([^\$\)]/) # mixin
        line
      else if !line.match(/\/{2}/)
        indent    = line.match(/^(\ *)/)[1].length + 2
      if line.match(/e\(\%\(/)
        lines[i]  = "#{Array(indent + 1).join(" ")}// #{line}"

    lines.join("\n")
  
  
  names = fs.readdirSync("lib/stylesheets/bootstrap")
  for name in names
    stylus = less2stylus(fs.readFileSync("lib/stylesheets/bootstrap/#{name}", "utf-8"))
    fs.writeFileSync("lib/stylesheets/bootstrap/#{name.replace(/\.less$/, ".styl")}", stylus)

This seems to fail for scoped mixins in bootstrap 2.0... e.g. #gradient > .vertical(@white, #f5f5f5);

Yeah, it's not perfect. Can't spend much time this right now though. The real solution would be tapping into the less and stylus parsers, regular expressions can only go so far.

• https://github.com/LearnBoost/stylus/issues/118
• twbs/bootstrap#795

If you find a regex(s) that handles the few other cases, definitely post em. This was just me in TextMate using find/replace with regex's, and then just rewriting that sequence in javascript.

This might also come in handy: http://lesscss.org/js/hiless.js.

// Syntax definition
// The key becomes the class name of the <span>
// around the matched block of code.
var syntax = {
  'string'   : /("(?:(?!")[^\\]|\\.)*"|'(?:(?!')[^\\]|\\.)*')/g,
  'comment'  : /(\/\*(?:[^*]|\*+[^\/*])*\*+\/|\/\/[^\n]*)/mg,
  'keyword'  : /\b(when)\b/g,
  'color'    : /(#[a-fA-F0-9]{6}|#[a-fA-F0-9]{3})\b(?=[^\{\}]*[\};])/mg,
  'nth'      : /(\([n0-9+-]+\))(?=[^\{\}]*\{)/g,
  'number'   : /\b((?:-?\d*\.?\d+)(?:px|%|em|pc|ex|in|deg|s|ms|pt|cm|mm)?)/g,
  'class'    : /([\.:][\w-]+)(?=[^\{\};]*\{)/mg,
  'variable' : /(@@?-?[-a-z_0-9]+\s*)/g,
  'attribute': /(\*?-?[-a-z_0-9]+\s*)(?=:[^\{\};]*[\};])/mg,
  'selector' : /(\[[a-z]+)/g,
  'id'       : /(#[\w-]+)(?=[^\{\}]*\{)/mg,
  'mixin'    : /([#\.][\w-]+)(?=[^;\{\}]*[;\}])/g,
  'element'  : /\b([a-z]+[0-9]?)\b(?=[^\{\}\);]*\{)/mg,
  'special'  : /(! *important)\b/g,
};

This looks promising. Might try this out for Kickstrap 2.0 (http://getkickstrap.com)

I want to get away from LESS.