stylus-source 0.15.4 → 0.17.0

data/vendor/examples/conversions.styl

@@ -0,0 +1,34 @@
+
+seconds(n)
+  0s + n
+
+body
+  foo 15px - 5px
+  foo 15px - 5
+  
+  // 60.8mm
+  foo 5cm - 2mm
+  foo 10mm + 2in
+  
+  // 3.54cm
+  foo 1cm + 1in
+  
+  // 3in
+  foo 5in - 5.08cm
+  
+  // 0.8s
+  foo 1s - 200ms
+  
+  // 3500ms
+  foo 1500ms + 2s
+  
+  // 3000Hz
+  foo 1000Hz + 2kHz
+  
+  // 1kHz
+  foo 3kHz - (1000Hz * 2)
+  
+  n = 30%
+  foo unit(n, 'px')
+  
+  foo seconds(1500ms)

data/vendor/examples/functions.js

@@ -0,0 +1,12 @@
+
+/**
+ * Module dependencies.
+ */
+
+var css = require('../')
+  , str = require('fs').readFileSync(__dirname + '/functions.styl', 'utf8');
+
+css.render(str, { filename: 'functions.styl' }, function(err, css){
+  if (err) throw err;
+  console.log(css);
+});

data/vendor/examples/functions.styl

@@ -0,0 +1,30 @@
+
+
+// ?= would allow us to define the images global before @importing 
+// the file if we were to distribute this
+
+images ?= '/images'
+
+image(path)
+  url(join('/', images path))
+
+// or
+
+image(path)
+  url(images + '/' + path)
+
+body
+  background image('foo.png')
+
+// functions can act as both mixins
+// or have a return value
+
+image(path)
+  if mixin
+    background image(path)
+  else
+    url(images + '/' + path)
+
+body
+  image('something.png')
+  background image('something.png')

data/vendor/examples/gradients.js

@@ -0,0 +1,13 @@
+
+/**
+ * Module dependencies.
+ */
+
+var css = require('../')
+  , path = __dirname + '/gradients.styl'
+  , str = require('fs').readFileSync(path, 'utf8');
+
+css.render(str, { filename: path }, function(err, css){
+  if (err) throw err;
+  console.log(css);
+});

data/vendor/examples/gradients.styl

@@ -0,0 +1,8 @@
+
+@import 'mixins/gradients'
+
+#box {
+  border: 1px solid #eee;
+  padding: 150px;
+  background: linear-gradient(top, white, 10% red, 90% blue, black);
+}

data/vendor/examples/images/gradient.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" preserveAspectRatio="none" version="1.1" >
+  <defs>
+    <linearGradient id="g" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" stop-color="#000"/>
+      <stop offset="100%" stop-color="#45484d"/>
+    </linearGradient>
+  </defs>
+  <rect fill="url(#g)" width="1" height="1" />
+</svg>

data/vendor/examples/images.js

@@ -0,0 +1,20 @@
+
+/**
+ * Module dependencies.
+ */
+
+var stylus = require('../')
+  , nodes = stylus.nodes
+  , path = __dirname + '/images.styl'
+  , str = require('fs').readFileSync(path, 'utf8');
+
+// the paths option is merged with the general options
+// so it is completely optional, however this now allows us to use
+// url(sprite.gif) instead of url(images/sprite.gif) 
+stylus(str)
+  .set('filename', path)
+  .define('url', stylus.url({ paths: [__dirname + '/images'] }))
+  .render(function(err, css){
+    if (err) throw err;
+    console.log(css);
+  });

data/vendor/examples/images.styl

@@ -0,0 +1,15 @@
+
+body
+  background url("http://foo.com/bar.png")
+
+#wrapper
+  background url(/images/gopher.jpg)
+
+#footer
+  background url(/images/gradient.svg)
+
+.sprite
+  // both work due to the additional paths option
+  // passed to stylus.url()
+  background url(/images/sprite.gif)
+  background url(sprite.gif)

data/vendor/examples/implicit-functions.js

@@ -0,0 +1,12 @@
+
+/**
+ * Module dependencies.
+ */
+
+var css = require('../')
+  , str = require('fs').readFileSync(__dirname + '/implicit-functions.styl', 'utf8');
+
+css.render(str, { filename: 'implicit-functions.styl' }, function(err, css){
+  if (err) throw err;
+  console.log(css);
+});

data/vendor/examples/implicit-functions.styl

@@ -0,0 +1,23 @@
+
+border-radius()
+  -webkit-border-radius arguments
+  -moz-border-radius arguments
+  border-radius arguments
+
+form
+  border-radius 5px
+
+a.button
+  border-radius 10px
+
+
+support-for-ie ?= true
+
+opacity(n)
+  opacity n
+  if support-for-ie
+    filter unquote('progid:DXImageTransform.Microsoft.Alpha(Opacity=' + round(n * 100) + ')')
+
+#logo
+  &:hover
+    opacity 0.5

data/vendor/examples/import.js

@@ -0,0 +1,12 @@
+
+/**
+ * Module dependencies.
+ */
+
+var css = require('../')
+  , str = require('fs').readFileSync(__dirname + '/import.styl', 'utf8');
+
+css.render(str, { filename: __dirname + '/import.styl' }, function(err, css){
+  if (err) throw err;
+  console.log(css);
+});

data/vendor/examples/import.styl

@@ -0,0 +1,11 @@
+
+@import "mixins/box"
+
+body
+  pad 10px 5px
+
+body
+  pad 5px
+
+body
+  pad-x 5px

data/vendor/examples/js-functions.js

@@ -0,0 +1,55 @@
+
+/**
+ * Module dependencies.
+ */
+
+var css = require('../')
+  , nodes = css.nodes
+  , str = require('fs').readFileSync(__dirname + '/js-functions.styl', 'utf8')
+  , fs = require('fs');
+
+function add(a, b) {
+  return a.operate('+', b);
+}
+
+function sub(a, b) {
+  return a.operate('-', b);
+}
+
+function imageSize(img) {
+  // assert that the node (img) is a String node, passing
+  // the param name for error reporting
+  css.utils.assertType(img, 'string', 'img');
+  var path = img.val;
+
+  // Grab bytes necessary to retrieve dimensions.
+  // if this was real you would do this per format,
+  // instead of reading the entire image :)
+  var data = fs.readFileSync(__dirname + '/' + path);
+
+  // GIF
+  // of course you would support.. more :)
+  if ('GIF' == data.slice(0, 3).toString()) {
+    var w = data.slice(6, 8)
+      , h = data.slice(8, 10);
+    w = w[1] << 8 | w[0];
+    h = h[1] << 8 | h[0];
+  }
+
+  // Return (w h)
+  var expr = new nodes.Expression;
+  expr.push(new nodes.Unit(w));
+  expr.push(new nodes.Unit(h));
+
+  return expr;
+}
+
+css(str)
+  .set('filename', 'js-functions.styl')
+  .define('add', add)
+  .define('sub', sub)
+  .define('image-size', imageSize)
+  .render(function(err, css){
+    if (err) throw err;
+    console.log(css);
+  });

data/vendor/examples/js-functions.styl

@@ -0,0 +1,23 @@
+
+image-width(path)
+  return image-size(path)[0]
+
+image-height(path)
+  return image-size(path)[1]
+
+body
+  font add(5px, 10px)
+  font sub(5px, 10px)
+
+#jesus
+  width image-width('images/jesus.gif')
+  height image-height('images/jesus.gif')
+
+#jesus-2
+  width image-size('images/jesus.gif')[0]
+  height image-size('images/jesus.gif')[1]
+
+#jesus-3
+  size = image-size('images/jesus.gif')
+  width size[0]
+  height size[1]

data/vendor/examples/literal.js

@@ -0,0 +1,12 @@
+
+/**
+ * Module dependencies.
+ */
+
+var css = require('../')
+  , str = require('fs').readFileSync(__dirname + '/literal.styl', 'utf8');
+
+css.render(str, { filename: 'literal.styl' }, function(err, css){
+  if (err) throw err;
+  console.log(css);
+});

data/vendor/examples/literal.styl

@@ -0,0 +1,8 @@
+
+@css {
+  body {
+    font: 14px;
+  }
+  
+  a { text-decoration: none; }
+}

data/vendor/examples/middleware.js

@@ -0,0 +1,23 @@
+
+/**
+ * Module dependencies.
+ */
+
+var connect = require('connect')
+  , stylus = require('../');
+
+// Setup server
+// $ curl http://localhost:3000/functions.css
+
+var server = connect.createServer(
+  stylus.middleware({
+      src: __dirname
+    , dest: __dirname + '/public'
+    , compress: true
+    , debug: true
+  }),
+  connect.static(__dirname + '/public')
+);
+
+server.listen(3000);
+console.log('server listening on port 3000');

data/vendor/examples/mixins/box.styl

@@ -0,0 +1,14 @@
+
+pad(x, y = x)
+  if y == x
+    padding y
+  else
+    padding y x y x
+
+pad-x(n)
+  padding-left n
+  padding-right n
+
+pad-y(n)
+  padding-top n
+  padding-bottom n

data/vendor/examples/mixins/gradients.styl

@@ -0,0 +1,92 @@
+
+// replace str with val
+
+replace(expr, str, val)
+  expr = clone(expr)
+  for e, i in expr
+    if str == e
+      expr[i] = val
+  expr
+
+// normalize gradient point (webkit)
+
+grad-point(pos)
+  if length(pos) == 1
+    return left pos if pos in (top bottom)
+    return pos top if pos in (left right)
+  else if pos[0] in (top bottom)
+    pos[1] pos[0]
+  else
+    pos
+
+// implicit color stop position
+
+pos-in-stops(i, stops)
+  len = length(stops)
+  if len - 1 == i
+    100%
+  else if i
+    unit(i / len * 100, '%')
+  else
+    0%
+
+// normalize color stops
+//   - (color pos) -> (pos color)
+//   - (color) -> (implied-pos color)
+
+normalize-stops(stops)
+  stops = clone(stops)
+  for stop, i in stops
+    if length(stop) == 1
+      color = stop[0]
+      stop[0] = pos-in-stops(i, stops)
+      stop[1] = color
+    else if typeof(stop[1]) == 'unit'
+      pos = stop[1]
+      stop[1] = stop[0]
+      stop[0] = pos
+  stops
+
+// join color stops with the given translation function
+
+join-stops(stops, translate)
+  str = ''
+  len = length(stops)
+  for stop, i in stops
+    str += ', ' if i
+    pos = stop[0]
+    color = stop[1]
+    str += translate(color, pos)
+  unquote(str)
+
+// webkit translation function
+
+webkit-stop(color, pos)
+  s('color-stop(%d, %s)', pos / 100, color)
+
+// mozilla translation function
+
+moz-stop(color, pos)
+  s('%s %s', color, pos)
+
+// create a linear gradient with the given start
+// position, followed by color stops
+
+linear-gradient(start, stops...)
+  error('color stops required') unless length(stops)
+  prop = current-property[0]
+  val = current-property[1]
+  stops = normalize-stops(stops)
+
+  // webkit
+  end = grad-point(opposite-position(start))
+  webkit = s('-webkit-gradient(linear, %s, %s, %s)', grad-point(start), end, join-stops(stops, webkit-stop))
+  add-property(prop, replace(val, '__CALL__', webkit))
+
+  // moz
+  stops = join-stops(stops, moz-stop)
+  moz = s('-moz-linear-gradient(%s, %s)', start, stops)
+  add-property(prop, replace(val, '__CALL__', moz))
+
+  // literal
+  s('linear-gradient(%s, %s)', start, stops)

data/vendor/examples/nesting.js

@@ -0,0 +1,12 @@
+
+/**
+ * Module dependencies.
+ */
+
+var css = require('../')
+  , str = require('fs').readFileSync(__dirname + '/nesting.styl', 'utf8');
+
+css.render(str, { filename: 'nesting.styl' }, function(err, css){
+  if (err) throw err;
+  console.log(css);
+});

data/vendor/examples/nesting.styl

@@ -0,0 +1,14 @@
+
+body
+  background #ccc
+  color #000
+
+form
+  .buttons
+    margin 10px 0
+    padding 5px
+    [type=submit]
+      padding 5px
+      border none
+  input
+    border 1px solid #ccc

data/vendor/examples/variables.js

@@ -0,0 +1,12 @@
+
+/**
+ * Module dependencies.
+ */
+
+var css = require('../')
+  , str = require('fs').readFileSync(__dirname + '/variables.styl', 'utf8');
+
+css.render(str, { filename: 'variables.styl' }, function(err, css){
+  if (err) throw err;
+  console.log(css);
+});

data/vendor/examples/variables.styl

@@ -0,0 +1,24 @@
+
+font-families = "Lucida Grande", Arial
+main-width = 80%
+main-color = #fff
+sidebar-width = main-width / 2
+
+// Mixins can use conditionals
+// to supply defaults
+unless font-families is defined
+  font-families = 'WAHOO'
+
+// Alternatively we may use ?=
+font-families ?= 'WAHOO'
+
+body
+  size = 12px
+  font size font-families, sans-serif
+  color main-color
+
+#wrapper
+  width main-width
+
+.sidebar
+  width sidebar-width

data/vendor/index.js

@@ -0,0 +1,2 @@
+
+module.exports = require('./lib/stylus');

data/{lib/stylus → vendor/lib}/functions/index.styl

@@ -1,5 +1,4 @@
-
-vendors = moz webkit official
+vendors = moz webkit o ms official
 
 // stringify the given arg
 
@@ -109,6 +108,16 @@ darken(color, amount)
 lighten(color, amount)
   adjust(color, 'lightness', amount)
 
+// decerase opacity by amount
+
+fade-out(color, amount)
+  color - rgba(black, amount)
+
+// increase opacity by amount
+
+fade-in(color, amount)
+  color + rgba(black, amount)
+
 // return the last value in the given expr
 
 last(expr)

data/{lib/stylus → vendor/lib}/lexer.js

@@ -157,6 +157,7 @@ Lexer.prototype = {
       || this.keyword()
       || this.urlchars()
       || this.atrule()
+      || this.scope()
       || this.media()
       || this.comment()
       || this.newline()
@@ -435,12 +436,24 @@ Lexer.prototype = {
   
   media: function() {
     var captures;
-    if (captures = /^@media *([^{\n]+)/.exec(this.str)) {
+    if (captures = /^@media *([^\/{\n]+)/.exec(this.str)) {
       this.skip(captures);
       return new Token('media', captures[1].trim());
     }
   },
+
+  /**
+   * '@scope' ([^{\n]+)
+   */
   
+  scope: function() {
+    var captures;
+    if (captures = /^@scope *([^\/{\n]+)/.exec(this.str)) {
+      this.skip(captures);
+      return new Token('scope', captures[1].trim());
+    }
+  },
+
   /**
    * '@' ('import' | 'keyframes' | 'charset' | 'page' | 'font-face')
    */

data/{lib/stylus → vendor/lib}/middleware.js

@@ -12,6 +12,7 @@ var stylus = require('./stylus')
   , fs = require('fs')
   , url = require('url')
   , basename = require('path').basename
+  , mkdirp = require('mkdirp')
   , join = require('path').join;
 
 /**
@@ -139,7 +140,10 @@ module.exports = function(options){
             if (err) return next(err);
             if (debug) log('render', stylusPath);
             imports[stylusPath] = paths;
-            fs.writeFile(cssPath, css, 'utf8', next);
+            mkdirp(dest, 0700, function(err){
+              if (err) return error(err);
+              fs.writeFile(cssPath, css, 'utf8', next);
+            });
           });
         });
       }