stylus-source 0.23.0 → 0.24.0

data/vendor/docs/conditionals.md

@@ -1,107 +0,0 @@
-
-## Conditionals
-
- Conditionals provide control flow to a language which is otherwise static, providing conditional imports, mixins, functions, and more. The examples below are simply examples, and not recommended :)
-
-### if / else if / else
-
- The `if` conditional works as you would expect, simply accepting an expression, evaluating the following block when `true`. Along with `if` are the typical `else if` and `else` tokens, acting as fallbacks.
- 
- The example below would conditionally overload the `padding` property, swapping it for `margin`.
-
-    overload-padding = true
-
-    if overload-padding
-      padding(y, x)
-        margin y x
-
-    body
-      padding 5px 10px
-
-Another example:
-
-    box(x, y, margin = false)
-      padding y x
-      if margin
-        margin y x
-
-    body
-      box(5px, 10px, true)
-
-Another `box()` helper:
-
-    box(x, y, margin-only = false)
-      if margin-only
-        margin y x
-      else
-        padding y x
-
-### unless
-
- For users familiar with the Ruby programming language, we have the `unless` conditional. It’s basically the opposite of `if`—essentially `if (!(expr))`.
-
-In the example below, if `disable-padding-override` is `undefined` or `false`, `padding` will be overridden, displaying `margin` instead. But if it’s `true`, `padding` will continue outputting `padding 5px 10px` as expected.
-
-     disable-padding-override = true
-
-     unless disable-padding-override is defined and disable-padding-override
-       padding(x, y)
-         margin y x
-
-     body
-       padding 5px 10px
-
-### Postfix Conditionals
-
-  Stylus supports postfix conditionals. This means that `if` and `unless` act as operators; they evaluate the left-hand operand when the right-hand expression is truthy.
-  
-  
-  For example let's define `negative()` to perform some basic type checking. Below we use block-style conditionals:
-  
-      negative(n)
-        unless n is a 'unit'
-          error('invalid number')
-        if n < 0
-          yes
-        else
-          no
-
-  Next, we utilize postfix conditionals to keep our function terse.
-
-      negative(n)
-        error('invalid number') unless n is a 'unit'
-        return yes if n < 0
-        no
-
-  Of course, we could take this further.  For example, we could write `n < 0 ? yes : no`, or simply stick with booleans: `n < 0`.
-
-  Postfix conditionals may be applied to most single-line statements. For example, `@import`, `@charset`, mixins—and of course, properties as shown below:
-  
-  
-      pad(types = margin padding, n = 5px)
-        padding unit(n, px) if padding in types
-        margin unit(n, px) if margin in types
-
-      body
-        pad()
-
-      body
-        pad(margin)
-
-      body
-        apply-mixins = true
-        pad(padding, 10) if apply-mixins
-
-yielding:
-
-      body {
-        padding: 5px;
-        margin: 5px;
-      }
-      body {
-        margin: 5px;
-      }
-      body {
-        padding: 10px;
-      }
-

data/vendor/docs/css-style.md

@@ -1,77 +0,0 @@
-
-## CSS Style
-
- Stylus transparently supports a regular CSS-style syntax. This means you don't need an alternative parser, or specify that a certain file uses a specific style.
-
-### Example
-
- Below is a small style using the indented approach:
- 
-     border-radius()
-       -webkit-border-radius arguments
-       -moz-border-radius arguments
-       border-radius arguments
-
-     body a
-       font 12px/1.4 "Lucida Grande", Arial, sans-serif
-       background black
-       color #ccc
-
-     form input
-       padding 5px
-       border 1px solid
-       border-radius 5px
-
- Since braces, colons, and semi-colons are optional, we could write this example just as we would with normal CSS:
- 
-     border-radius() {
-       -webkit-border-radius: arguments;
-       -moz-border-radius: arguments;
-       border-radius: arguments;
-     }
-
-     body a {
-       font: 12px/1.4 "Lucida Grande", Arial, sans-serif;
-       background: black;
-       color: #ccc;
-     }
-
-     form input {
-       padding: 5px;
-       border: 1px solid;
-       border-radius: 5px;
-     }
-
- Since we may mix and match the two variants, the following is valid as well:
- 
-     border-radius()
-       -webkit-border-radius: arguments;
-       -moz-border-radius: arguments;
-       border-radius: arguments;
-
-     body a {
-       font: 12px/1.4 "Lucida Grande", Arial, sans-serif;
-       background: black;
-       color: #ccc;
-     }
-
-     form input
-       padding: 5px;
-       border: 1px solid;
-       border-radius: 5px;
-
- Variables, functions, mixins, and all the other features provided by Stylus still work as expected:
- 
-     main-color = white
-     main-hover-color = black
-
-     body a {
-       color: main-color;
-       &:hover { color: main-hover-color; }
-     }
-
-     body a { color: main-color; &:hover { color: main-hover-color; }}
-
- There are a few caveats to this rule: since the two styles may be mixed and matched, some indentation rules still apply. So although not _every_ plain-CSS stylesheet will work with zero modification, this feature allows those who prefer CSS syntax to continue doing so while leveraging Stylus' other powerful features.
- 
-

data/vendor/docs/error-reporting.md

@@ -1,50 +0,0 @@
-
-## Error Reporting
-
- Stylus has fantastic error reporting built-in for syntax, parse, and evaluation errors—complete with stack traces, line numbers, and filenames.
-
-### Parse Error
-
-Parse error example:
-
-     body
-       form input
-         == padding 5px
-
-Yielding:
-
-     Error: /Users/tj/Projects/stylus/testing/test.styl:4
-       3: '  form input'
-       4: '    == padding 5px'
-
-     illegal unary ==
-
-### Evaluation Error
-
- This "runtime" or evaluation error is caused by passing a string to `border-radius()`, instead of the expected `Unit` (by using our helper `ensure(n, 'unit')`).
-
-      ensure(val, type)
-        unless val is a type
-          error('expected a ' + type + ', but got ' + typeof(val))
-
-      border-radius(n)
-        ensure(n, 'unit')
-        -webkit-border-radius n
-        -moz-border-radius n
-        border-radius n
-
-      body
-        border-radius '5px'
-
-Yielding:
-
-      Error: /Users/tj/Projects/stylus/examples/error.styl:12
-        11: ''
-        12: 'body'
-        13: '  border-radius \'5px\''
-        14: ''
-
-      expected a unit, but got string
-          at ensure() (/Users/tj/Projects/stylus/examples/error.styl:2)
-          at border-radius() (/Users/tj/Projects/stylus/examples/error.styl:5)
-          at "body" (/Users/tj/Projects/stylus/examples/error.styl:10)

data/vendor/docs/escape.md

@@ -1,28 +0,0 @@
-## Escaping
-
- Stylus lets you escape characters. This effectively turns them into identifiers, allowing them to be rendered as literals. 
- 
- For example:
-
-     body
-       padding 1 \+ 2
-
-Compiles to:
-
-     body {
-       padding: 1 + 2;
-     }
-
-
-Note that Stylus requires that `/` is parenthesized when used in a property:
-
-    body
-      font 14px/1.4
-      font (14px/1.4)
-
-yields:
-
-    body {
-      font: 14px/1.4;
-      font: 10px;
-    }

data/vendor/docs/executable.md

@@ -1,163 +0,0 @@
-
-## Stylus Executable
-
-Stylus ships with the `stylus` executable for converting Stylus to CSS.
-
-      Usage: stylus [options] [command] [< in [> out]]
-                    [file|dir ...]
-
-      Commands:
-
-        help <prop>     Opens help info for <prop> in
-                        your default browser. (OS X only)
-
-      Options:
-
-        -u, --use <path>        Utilize the stylus plugin at <path>
-        -i, --interactive       Start interactive REPL
-        -w, --watch             Watch file(s) for changes and re-compile
-        -o, --out <dir>         Output to <dir> when passing files
-        -C, --css <src> [dest]  Convert CSS input to Stylus
-        -I, --include <path>    Add <path> to lookup paths
-        -c, --compress          Compress CSS output
-        -d, --compare           Display input along with output
-        -f, --firebug           Emits debug infos in the generated css that
-                                can be used by the FireStylus Firebug plugin
-        -l, --line-numbers      Emits comments in the generated CSS
-                                indicating the corresponding Stylus line
-        -V, --version           Display the version of Stylus
-        -h, --help              Display help information
-
-### STDIO Compilation Example
-
- `stylus` reads from _stdin_ and outputs to _stdout_, so for example:
-
-      $ stylus --compress < some.styl > some.css
-
-Try Stylus some in the terminal!  Type below and press `CTRL-D` for `__EOF__`:
-
-      $ stylus
-      body
-        color red
-        font 14px Arial, sans-serif
-
-### Compiling Files Example
-
- `stylus` also accepts files and directories. For example, a directory named `css` will compile and output `.css` files in the same directory.
- 
-      $ stylus css
-
-  The following will output to `./public/stylesheets`:
-
-      $ stylus css --out public/stylesheets
-
-  Or a few files:
-
-      $ stylus one.styl two.styl
-
-  For development purposes, you can use the `linenos` option to emit comments indicating 
-  the Stylus filename and line number in the generated CSS:
-
-      $ stylus --line-numbers <path>
-
-  Or the `firebug` option if you want to use
-  the [FireStylus extension for Firebug](//github.com/LearnBoost/stylus/blob/master/docs/firebug.md):
-
-      $ stylus --firebug <path>
-
-### Converting CSS
-
- If you wish to convert CSS to the terse Stylus syntax, use the `--css` flag.
-
- Via stdio:
- 
-      $ stylus --css < test.css > test.styl
-
- Output a `.styl` file of the same basename:
- 
-      $ stylus --css test.css
-
- Output to a specific destination:
- 
-      $ stylus --css test.css /tmp/out.styl
-
-### CSS Property Help
-
-  On OS X, `stylus help <prop>` will open your default browser and display help documentation for the given `<prop>`.
-
-    $ stylus help box-shadow
-
-### Interactive Shell
-
- The Stylus REPL (Read-Eval-Print-Loop) or "interactive shell" allows you to
- play around with Stylus expressions directly from your terminal. 
- 
- **Note that this works only for expressions**—not selectors, etc. To use simple add the `-i`, or `--interactive` flag:
- 
-     $ stylus -i
-     > color = white
-     => #fff
-     > color - rgb(200,50,0)
-     => #37cdff
-     > color
-     => #fff
-     > color -= rgb(200,50,0)
-     => #37cdff
-     > color
-     => #37cdff
-     > rgba(color, 0.5)
-     => rgba(55,205,255,0.5)
-
-### Utilizing Plugins
-
- For this example we'l use the [nib](https://github.com/visionmedia/nib) Stylus plugin to illustrate its CLI usage. 
- 
- Suppose we have the following Stylus, which imports nib to use its `linear-gradient()` function.
- 
-     @import 'nib'
-
-     body
-       background: linear-gradient(20px top, white, black) 
-
- Our first attempt to render using `stylus(1)` via stdio might look like this:
- 
-     $ stylus < test.styl
-
- Which would yield the following error (because Stylus doesn't know where to find nib).
-
-       Error: stdin:3
-          1| 
-          2| 
-        > 3| @import 'nib'
-          4| 
-          5| body
-          6|   background: linear-gradient(20px top, white, black)
-
-  For plugins that simply supply Stylus APIs, we could add the path to the Stylus lookup paths.  We do so by using the `--include` or `-I` flag:
-
-     $ stylus < test.styl --include ../nib/lib
-
-  Now yielding the output below. (As you might notice, calls to `gradient-data-uri()` and `create-gradient-image()` output as literals. This is because exposing the library path isn't enough when a plugin provides a JavaScript API.  However, if we only wanted to use pure-Stylus nib functions, we'd be fine.)
-
-      body {
-        background: url(gradient-data-uri(create-gradient-image(20px, top)));
-        background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #000));
-        background: -webkit-linear-gradient(top, #fff 0%, #000 100%);
-        background: -moz-linear-gradient(top, #fff 0%, #000 100%);
-        background: linear-gradient(top, #fff 0%, #000 100%);
-      }
-
-  So, what we need to do is use the `--use`, or `-u` flag.  It expects a path to a node module (with or without the `.js` extension). This `require()`s the module, expecting a function to be exported as `module.exports`, which then calls `style.use(fn())` to expose the plugin (defining its js functions, etc.).
-  
-    $ stylus < test.styl --use ../nib/lib/nib
-
- Yielding the expected result:
-
-    body {
-      background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAUCAYAAABMDlehAAAABmJLR0QA/wD/AP+gvaeTAAAAI0lEQVQImWP4+fPnf6bPnz8zMH358oUBwkIjKJBgYGNj+w8Aphk4blt0EcMAAAAASUVORK5CYII=");
-      background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #000));
-      background: -webkit-linear-gradient(top, #fff 0%, #000 100%);
-      background: -moz-linear-gradient(top, #fff 0%, #000 100%);
-      background: linear-gradient(top, #fff 0%, #000 100%);
-    }
-  

data/vendor/docs/extend.md

@@ -1,123 +0,0 @@
-
-## Extend
-
-  The Stylus __@extend__ directive is inspired by (and essentially the same as) the [SASS Implementation](http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#extend), with few subtle differences. This feature significantly simplifies maintenance of semantic rulesets that inherit from other semantic rulesets.
-
-
-### “Extending” with mixins
-
-  Although you can use mixins to achieve a similar effect, this can lead to duplicate CSS. A typical pattern is to define several classes as shown below, then combine them on the element such as "warning message". 
-  
-  While this technique works just fine, it's difficult to maintain.
-
-      .message,
-      .warning {
-        padding: 10px;
-        border: 1px solid #eee;
-      }
-
-      .warning {
-        color: #E2E21E;
-      }
-
-
-### Using `__@extend__`
-
-  To produce this same output with `__@extend__`, simply pass it the desired selector.  Stylus will then append the `.warning` selector to the existing `.message` ruleset.  The `.warning` class then inherits properties from `.message`.
-
-      .message {
-        padding: 10px;
-        border: 1px solid #eee;
-      }
-
-      .warning {
-        @extend .message;
-        color: #E2E21E;
-      }
-
-
-  Here's a more complex example, demonstrating how `__@extend__` cascades:
-  
-      red = #E33E1E
-      yellow = #E2E21E
-
-      .message
-        padding: 10px
-        font: 14px Helvetica
-        border: 1px solid #eee
-
-      .warning
-        @extends .message
-        border-color: yellow
-        background: yellow + 70%
-
-      .error
-        @extends .message
-        border-color: red
-        background: red + 70%
-
-      .fatal
-        @extends .error
-        font-weight: bold
-        color: red
-
-  Yielding the following CSS:
-  
-      .message,
-      .warning,
-      .error,
-      .fatal {
-        padding: 10px;
-        font: 14px Helvetica;
-        border: 1px solid #eee;
-      }
-      .warning {
-        border-color: #e2e21e;
-        background: #f6f6bc;
-      }
-      .error,
-      .fatal {
-        border-color: #e33e1e;
-        background: #f7c5bc;
-      }
-      .fatal {
-        font-weight: bold;
-        color: #e33e1e;
-      }
-
-  Where Stylus currently differs from SASS is, SASS won't allow  `__@extend__` nested selectors:
-  
-     form
-       button
-         padding: 10px
-
-     a.button
-       @extend form button 
-     Syntax error: Can't extend form button: can't extend nested selectors
-             on line 6 of standard input
-       Use --trace for backtrace.
-
-   With Stylus, as long as the selectors match, it works!
-   
-       form
-         input[type=text]
-           padding: 5px
-           border: 1px solid #eee
-           color: #ddd
-
-       textarea
-         @extends form input[type=text]
-         padding: 10px
-
-   Yielding:
-   
-        form input[type=text],
-        form textarea {
-          padding: 5px;
-          border: 1px solid #eee;
-          color: #ddd;
-        }
-        textarea {
-          padding: 10px;
-        }
-      

data/vendor/docs/firebug.md

@@ -1,59 +0,0 @@
-
-## FireStylus extension for Firebug
-
-[FireStylus](//github.com/parallel/firestylus) is a Firebug extension 
-that makes Firebug display the Stylus filename and line numbers of 
-the Stylus-generated CSS styles rather than those of the generated CSS.
-
-![Screenshot](//raw.github.com/parallel/firestylus/master/src/chrome/skin/screenshot.png)
-
-### Usage
-
-First, you need to install [Firebug](https://addons.mozilla.org/firefox/downloads/latest/1843/addon-1843-latest.xpi?src=addondetail)
-and the [FireStylus extension](//github.com/parallel/firestylus)
-
-Then simply enable the Stylus's `firebug` option when generating CSS.
-
-Command line usage:
-
-	$ stylus -f <path>
-	$ stylus --firebug <path>
-	
-Javascript usage:
-
-	var stylus = require('stylus');
-
-	stylus(str)
-	  .set('firebug', true)
-	  .render(function(err, css){
-		// logic
-	  });
-
-Connect / Express:
-
-    var stylus = require('stylus');
-
-    var server = connect.createServer(
-        stylus.middleware({
-            src: __dirname
-          , dest: __dirname + '/public'
-          , firebug: true
-        })
-      , connect.static(__dirname + '/public')
-    );
-
-### Compatibility
-
- FireStylus should work with Firefox versions 3.0 and up, and with Firebug versions 1.4 and up.
-
- - Firefox 3+ (also works with version 5)
- - Firebug 1.4+
-
-### Limitations
-
-FireStylus and FireSass are incompatible. You cannot enable them
-simultaneously.
-
-FireStylus (like FireSass) only works in the HTML pane of Firebug. The others
-(such as the CSS pane) won't work due to Firebug limitations.
-

data/vendor/docs/font-face.md

@@ -1,26 +0,0 @@
-
-## @font-face
-
- The `@font-face` at-rule expects as you would expect. Simply add a block of properties after it, like so:
- 
- 
-     @font-face
-       font-family Geo
-       font-style normal
-       src url(fonts/geo_sans_light/GensansLight.ttf)
-
-     .ingeo
-       font-family Geo
-
-Yielding:
-
-
-      @font-face {
-        font-family: Geo;
-        font-style: normal;
-        src: url("fonts/geo_sans_light/GensansLight.ttf");
-      }
-      .ingeo {
-        font-family: Geo;
-      }
-