diff --git a/.gitmodules b/.gitmodules deleted file mode 100644 index e69de29b..00000000 diff --git a/.travis.yml b/.travis.yml new file mode 100644 index 00000000..c2ba3f90 --- /dev/null +++ b/.travis.yml @@ -0,0 +1,3 @@ +language: node_js +node_js: + - 0.8 \ No newline at end of file diff --git a/Makefile b/Makefile deleted file mode 100644 index 6a2a5f9e..00000000 --- a/Makefile +++ /dev/null @@ -1,11 +0,0 @@ - -test: - @./node_modules/.bin/mocha \ - --require should \ - --ignore-leaks \ - test/runner.js - -test-server: - @node test/server.js - -.PHONY: test test-server \ No newline at end of file diff --git a/Readme.md b/Readme.md index 807a775f..3a2078c0 100644 --- a/Readme.md +++ b/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/). diff --git a/lib/nib/gradients.styl b/lib/nib/gradients.styl index 04936c10..3bbff794 100644 --- a/lib/nib/gradients.styl +++ b/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) /* diff --git a/lib/nib/image.styl b/lib/nib/image.styl index 7703680e..260ad390 100644 --- a/lib/nib/image.styl +++ b/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) diff --git a/lib/nib/vendor.styl b/lib/nib/vendor.styl index 9d50f1e7..5691e9c7 100644 --- a/lib/nib/vendor.styl +++ b/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. diff --git a/package.json b/package.json index 78f8da39..c55900f4 100644 --- a/package.json +++ b/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 ", "main": "lib/nib.js", - "engines": { "node": "*" } + "engines": { "node": "*" }, + "scripts": { + "test": "mocha", + "test-server": "node test/server.js" + } } diff --git a/test/cases/image.css b/test/cases/image.css index 9cfd0579..f08242b4 100644 --- a/test/cases/image.css +++ b/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/logo.main@2x.png"); 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/logo.main@2x.png"); background-size: 50px 100px; diff --git a/test/cases/image.styl b/test/cases/image.styl index 0fb6dff8..29a82d08 100644 --- a/test/cases/image.styl +++ b/test/cases/image.styl @@ -1,4 +1,3 @@ - @import 'nib/image' #logo diff --git a/test/cases/importance.css b/test/cases/importance.css index bf6ae48e..5c089c8a 100644 --- a/test/cases/importance.css +++ b/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; diff --git a/test/cases/linear-gradient.css b/test/cases/linear-gradient.css index d37939f8..2a98cab9 100644 --- a/test/cases/linear-gradient.css +++ b/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; -} \ No newline at end of file + 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; +} diff --git a/test/cases/vendor.css b/test/cases/vendor.css index a1b9f725..79f74b49 100644 --- a/test/cases/vendor.css +++ b/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 { diff --git a/test/mocha.opts b/test/mocha.opts new file mode 100644 index 00000000..fe915b2f --- /dev/null +++ b/test/mocha.opts @@ -0,0 +1,2 @@ +--require should +test/runner.js \ No newline at end of file diff --git a/test/server.js b/test/server.js index 685cb43b..2b05ae45 100644 --- a/test/server.js +++ b/test/server.js @@ -1,6 +1,3 @@ - -require.paths.unshift(__dirname + '/../support'); - /** * Module dependencies. */