Merge pull request #195 from visionmedia/stuff

relatively small amount of stuff

.travis.yml

@@ -0,0 +1,3 @@
+language: node_js
+node_js:
+  - 0.8

Readme.md

@@ -1,3 +1,5 @@
+[![Build Status](https://travis-ci.org/visionmedia/nib.png?branch=master)](https://travis-ci.org/visionmedia/nib)
+
 # Nib
 
   Stylus mixins, utilities, components, and gradient image generation. Don't forget to check out the [documentation](http://visionmedia.github.com/nib/).

lib/nib/gradients.styl

@@ -39,14 +39,14 @@ pos-in-stops(i, stops)
   else if i
     unit(i / len * 100, '%')
   else
-    0%
+    0
 
 /*
  * Normalize color stops:
- * 
+ *
  *   - (color pos) -> (pos color)
  *   - (color) -> (implied-pos color)
- * 
+ *
  */
 
 normalize-stops(stops)
@@ -88,19 +88,19 @@ webkit-stop(color, pos)
  */
 
 std-stop(color, pos)
-  '%s %s' % (color pos) 
+  '%s %s' % (color pos)
 
 /*
  * Create a linear gradient with the given start position
  * and variable number of color stops.
- * 
+ *
  * Examples:
- * 
+ *
  *    background: linear-gradient(top, red, green, blue)
  *    background: linear-gradient(bottom, red, green 50%, blue)
  *    background: linear-gradient(bottom, red, 50% green, blue)
  *    background: linear-gradient(bottom, red, 50% green, 90% white, blue)
- * 
+ *
  */
 
 linear-gradient(start, stops...)
@@ -130,10 +130,10 @@ linear-gradient(start, stops...)
   stops = join-stops(stops, std-stop)
   for prefix in vendor-prefixes
     unless prefix == official
-      gradient = '-%s-linear-gradient(%s, %s)' % (prefix start stops)   
+      gradient = '-%s-linear-gradient(%s, %s)' % (prefix start stops)
       add-property(prop, replace(val, '__CALL__', gradient))
 
-  // standard 
+  // standard
   'linear-gradient(%s, %s)' % (start stops)
 
 /*

lib/nib/image.styl

@@ -1,13 +1,23 @@
 
 /*
- * Define background-image as `path`
- * with optional width and height,
- * adding an @2x variant.
+ * Define background-image as `path` with optional width and height, adding an
+ * @2x variant.
+ *
+ * affected by github.com/LearnBoost/stylus/issues/1050 and
+ * github.com/LearnBoost/stylus/issues/1038 ... refactor when those are closed
  */
 
-image(path, w = auto, h = auto)
+image(path, w = auto, h = auto, min_pixel_ratio = 1.5)
   background-image: url(path)
-  @media all and (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5)
+
+  s = 'all and (-webkit-min-device-pixel-ratio:' + min_pixel_ratio + '),'
+  s = s + '(min--moz-device-pixel-ratio:' + min_pixel_ratio + '),'
+  s = s + '(-o-min-device-pixel-ratio:' + min_pixel_ratio + '/1),'
+  s = s + '(min-device-pixel-ratio:' + min_pixel_ratio + '),'
+  s = s + '(min-resolution:' + unit(min_pixel_ratio*92, dpi) + '),'
+  s = s + '(min-resolution:' + unit(min_pixel_ratio, dppx) + ')'
+
+  @media s
     ext = extname(path)
     path = pathjoin(dirname(path), basename(path, ext) + '@2x' + ext)
     background-image: url(path)

lib/nib/vendor.styl

@@ -315,8 +315,8 @@ opacity(n, args...)
       -ms-filter: none
       filter: none
     else
-      filter: 'alpha(opacity=%s)' % val args
       -ms-filter: '"progid:DXImageTransform.Microsoft.Alpha(Opacity=%s)"' % val args
+      filter: 'alpha(opacity=%s)' % val args
 
 /*
  * Vendor "text-size-adjust"
@@ -472,7 +472,7 @@ appearance()
  */
 
 tab-size()
-  vendor('tab-size', arguments, only: moz o)
+  vendor('tab-size', arguments, only: moz o official)
 
 /*
  * Vendor "overflow-scrolling" support.

package.json

@@ -9,12 +9,16 @@
   "devDependencies": {
       "connect": "1.x"
     , "jade": "0.22.0"
-    , "stylus": "0.28.x"
+    , "stylus": "0.31.x"
     , "mocha": "*"
     , "should": "*"
     , "canvas": "*"
   },
   "author": "TJ Holowaychuk <[email protected]>",
   "main": "lib/nib.js",
-  "engines": { "node": "*" }
+  "engines": { "node": "*" },
+  "scripts": {
+    "test": "mocha",
+    "test-server": "node test/server.js"
+  }
 }

test/cases/image.css

@@ -1,7 +1,7 @@
 #logo {
   background-image: url("/images/branding/logo.main.png");
 }
-@media all and (-webkit-min-device-pixel-ratio: 1.5) {
+@media all and (-webkit-min-device-pixel-ratio:1.5),(min--moz-device-pixel-ratio:1.5),(-o-min-device-pixel-ratio:1.5/1),(min-device-pixel-ratio:1.5),(min-resolution:138dpi),(min-resolution:1.5dppx) {
   #logo {
     background-image: url("/images/branding/[email protected]");
     background-size: auto auto;
@@ -10,7 +10,7 @@
 #logo {
   background-image: url("/images/branding/logo.main.png");
 }
-@media all and (-webkit-min-device-pixel-ratio: 1.5) {
+@media all and (-webkit-min-device-pixel-ratio:1.5),(min--moz-device-pixel-ratio:1.5),(-o-min-device-pixel-ratio:1.5/1),(min-device-pixel-ratio:1.5),(min-resolution:138dpi),(min-resolution:1.5dppx) {
   #logo {
     background-image: url("/images/branding/[email protected]");
     background-size: 50px 100px;

test/cases/image.styl

@@ -1,4 +1,3 @@
-
 @import 'nib/image'
 
 #logo

test/cases/importance.css

@@ -115,6 +115,7 @@
   word-break: normal !important;
   -moz-tab-size: 4 !important;
   -o-tab-size: 4 !important;
+  tab-size: 4 !important;
   -webkit-hyphens: manual !important;
   -moz-hyphens: manual !important;
   -ms-hyphens: manual !important;
@@ -129,7 +130,7 @@
   font-stretch: condensed !important;
   font: normal 16px/1.25 Arial, sans-serif !important;
   opacity: 0.5 !important;
-  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50) !important;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)" !important;
   filter: alpha(opacity=50) !important;
   resize: both !important;
   cursor: pointer !important;

test/cases/linear-gradient.css

@@ -1,56 +1,56 @@
 body {
   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: -o-linear-gradient(top, #fff 0%, #000 100%);
-  background: -ms-linear-gradient(top, #fff 0%, #000 100%);
-  background: linear-gradient(top, #fff 0%, #000 100%);
+  background: -webkit-linear-gradient(top, #fff 0, #000 100%);
+  background: -moz-linear-gradient(top, #fff 0, #000 100%);
+  background: -o-linear-gradient(top, #fff 0, #000 100%);
+  background: -ms-linear-gradient(top, #fff 0, #000 100%);
+  background: linear-gradient(top, #fff 0, #000 100%);
 }
 body {
   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: -o-linear-gradient(top, #fff 0%, #000 100%);
-  background: -ms-linear-gradient(top, #fff 0%, #000 100%);
-  background: linear-gradient(top, #fff 0%, #000 100%);
+  background: -webkit-linear-gradient(top, #fff 0, #000 100%);
+  background: -moz-linear-gradient(top, #fff 0, #000 100%);
+  background: -o-linear-gradient(top, #fff 0, #000 100%);
+  background: -ms-linear-gradient(top, #fff 0, #000 100%);
+  background: linear-gradient(top, #fff 0, #000 100%);
 }
 body {
   background: -webkit-gradient(linear, left top, right bottom, color-stop(0, #fff), color-stop(0.25, #f00), color-stop(0.5, #00f), color-stop(1, #000));
-  background: -webkit-linear-gradient(top left, #fff 0%, #f00 25%, #00f 50%, #000 100%);
-  background: -moz-linear-gradient(top left, #fff 0%, #f00 25%, #00f 50%, #000 100%);
-  background: -o-linear-gradient(top left, #fff 0%, #f00 25%, #00f 50%, #000 100%);
-  background: -ms-linear-gradient(top left, #fff 0%, #f00 25%, #00f 50%, #000 100%);
-  background: linear-gradient(top left, #fff 0%, #f00 25%, #00f 50%, #000 100%);
+  background: -webkit-linear-gradient(top left, #fff 0, #f00 25%, #00f 50%, #000 100%);
+  background: -moz-linear-gradient(top left, #fff 0, #f00 25%, #00f 50%, #000 100%);
+  background: -o-linear-gradient(top left, #fff 0, #f00 25%, #00f 50%, #000 100%);
+  background: -ms-linear-gradient(top left, #fff 0, #f00 25%, #00f 50%, #000 100%);
+  background: linear-gradient(top left, #fff 0, #f00 25%, #00f 50%, #000 100%);
 }
 body {
   background: -webkit-gradient(linear, right bottom, left top, color-stop(0, #fff), color-stop(0.8, #000));
-  background: -webkit-linear-gradient(bottom right, #fff 0%, #000 80%);
-  background: -moz-linear-gradient(bottom right, #fff 0%, #000 80%);
-  background: -o-linear-gradient(bottom right, #fff 0%, #000 80%);
-  background: -ms-linear-gradient(bottom right, #fff 0%, #000 80%);
-  background: linear-gradient(bottom right, #fff 0%, #000 80%);
+  background: -webkit-linear-gradient(bottom right, #fff 0, #000 80%);
+  background: -moz-linear-gradient(bottom right, #fff 0, #000 80%);
+  background: -o-linear-gradient(bottom right, #fff 0, #000 80%);
+  background: -ms-linear-gradient(bottom right, #fff 0, #000 80%);
+  background: linear-gradient(bottom right, #fff 0, #000 80%);
 }
 body {
   background: -webkit-gradient(linear, right bottom, left top, color-stop(0, #fff), color-stop(0.8, #000));
-  background: -webkit-linear-gradient(right bottom, #fff 0%, #000 80%);
-  background: -moz-linear-gradient(right bottom, #fff 0%, #000 80%);
-  background: -o-linear-gradient(right bottom, #fff 0%, #000 80%);
-  background: -ms-linear-gradient(right bottom, #fff 0%, #000 80%);
-  background: linear-gradient(right bottom, #fff 0%, #000 80%);
+  background: -webkit-linear-gradient(right bottom, #fff 0, #000 80%);
+  background: -moz-linear-gradient(right bottom, #fff 0, #000 80%);
+  background: -o-linear-gradient(right bottom, #fff 0, #000 80%);
+  background: -ms-linear-gradient(right bottom, #fff 0, #000 80%);
+  background: linear-gradient(right bottom, #fff 0, #000 80%);
 }
 body {
   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: -ms-linear-gradient(top, #fff 0%, #000 100%);
-  background: -o-linear-gradient(top, #fff 0%, #000 100%);
-  background: linear-gradient(top, #fff 0%, #000 100%);
+  background: -webkit-linear-gradient(top, #fff 0, #000 100%);
+  background: -moz-linear-gradient(top, #fff 0, #000 100%);
+  background: -ms-linear-gradient(top, #fff 0, #000 100%);
+  background: -o-linear-gradient(top, #fff 0, #000 100%);
+  background: linear-gradient(top, #fff 0, #000 100%);
 }
 body {
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #000)), #fff;
-  background: -webkit-linear-gradient(top, #fff 0%, #000 100%), #fff;
-  background: -moz-linear-gradient(top, #fff 0%, #000 100%), #fff;
-  background: -ms-linear-gradient(top, #fff 0%, #000 100%), #fff;
-  background: -o-linear-gradient(top, #fff 0%, #000 100%), #fff;
-  background: linear-gradient(top, #fff 0%, #000 100%), #fff;
-}
+  background: -webkit-linear-gradient(top, #fff 0, #000 100%), #fff;
+  background: -moz-linear-gradient(top, #fff 0, #000 100%), #fff;
+  background: -ms-linear-gradient(top, #fff 0, #000 100%), #fff;
+  background: -o-linear-gradient(top, #fff 0, #000 100%), #fff;
+  background: linear-gradient(top, #fff 0, #000 100%), #fff;
+}

test/cases/vendor.css

@@ -4,7 +4,7 @@ button {
 }
 button {
   opacity: 0.5;
-  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
   filter: alpha(opacity=50);
 }
 button {

test/mocha.opts

@@ -0,0 +1,2 @@
+--require should
+test/runner.js

test/server.js

@@ -1,6 +1,3 @@
-
-require.paths.unshift(__dirname + '/../support');
-
 /**
  * Module dependencies.
  */