Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Convert LESS to Stylus for Twitter Bootstrap
# 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)
@chrismcv

This comment has been minimized.

Copy link

@chrismcv chrismcv commented Feb 14, 2012

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

@lancejpollard

This comment has been minimized.

Copy link
Owner Author

@lancejpollard lancejpollard commented Feb 16, 2012

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.

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.

@lancejpollard

This comment has been minimized.

Copy link
Owner Author

@lancejpollard lancejpollard commented Feb 16, 2012

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,
};
@adamjgrant

This comment has been minimized.

Copy link

@adamjgrant adamjgrant commented Jan 3, 2013

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

I want to get away from LESS.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment