Repository: visionmedia/nib Branch: main Commit: 5e2651e8c0f1 Files: 94 Total size: 121.9 KB Directory structure: gitextract_t6ep1eh2/ ├── .editorconfig ├── .github/ │ └── workflows/ │ └── ci.yml ├── .gitignore ├── .mocharc.json ├── .npmignore ├── CHANGELOG.md ├── LICENSE ├── README.md ├── docs/ │ └── README.md ├── iconic/ │ ├── demo.html │ └── iconic_stroke.otf ├── index.styl ├── lib/ │ ├── nib/ │ │ ├── border-radius.styl │ │ ├── border.styl │ │ ├── clearfix.styl │ │ ├── color-image.styl │ │ ├── config.styl │ │ ├── flex.styl │ │ ├── gradients.styl │ │ ├── iconic.styl │ │ ├── image.styl │ │ ├── index.styl │ │ ├── normalize/ │ │ │ ├── base.styl │ │ │ ├── embed.styl │ │ │ ├── forms.styl │ │ │ ├── groups.styl │ │ │ ├── html5.styl │ │ │ ├── index.styl │ │ │ ├── links.styl │ │ │ ├── tables.styl │ │ │ └── text.styl │ │ ├── overflow.styl │ │ ├── positions.styl │ │ ├── reset.styl │ │ ├── size.styl │ │ ├── text/ │ │ │ ├── aliases.styl │ │ │ ├── ellipsis.styl │ │ │ ├── hide-text.styl │ │ │ ├── index.styl │ │ │ ├── replace-text.styl │ │ │ └── shadow-stroke.styl │ │ └── vendor.styl │ ├── nib.js │ └── nodes/ │ ├── color-image.js │ ├── gradient.js │ └── vendor-helpers.js ├── package.json └── test/ ├── cases/ │ ├── absolute.css │ ├── absolute.styl │ ├── border-radius.css │ ├── border-radius.styl │ ├── border.css │ ├── border.styl │ ├── clearfix.css │ ├── clearfix.styl │ ├── fixed.css │ ├── fixed.styl │ ├── flex.css │ ├── flex.styl │ ├── image.css │ ├── image.styl │ ├── importance.css │ ├── importance.styl │ ├── linear-gradient.css │ ├── linear-gradient.styl │ ├── multiple-gradients.css │ ├── multiple-gradients.styl │ ├── normalize-reset.css │ ├── normalize-reset.styl │ ├── radial-gradient.css │ ├── radial-gradient.styl │ ├── relative.css │ ├── shadow-stroke.css │ ├── shadow-stroke.styl │ ├── text.ellipsis.css │ ├── text.ellipsis.styl │ ├── vendor.css │ ├── vendor.inherit.css │ ├── vendor.inherit.styl │ ├── vendor.initial.css │ ├── vendor.initial.styl │ ├── vendor.placeholder.css │ ├── vendor.placeholder.styl │ ├── vendor.styl │ ├── vendor.values.css │ └── vendor.values.styl ├── clearfix.styl ├── color-images.styl ├── gradients.styl ├── index.pug ├── public/ │ └── .gitignore ├── runner.js ├── server.js └── test.styl ================================================ FILE CONTENTS ================================================ ================================================ FILE: .editorconfig ================================================ # This file is for unifying the coding style for different editors and IDEs # editorconfig.org root = true [*] end_of_line = lf charset = utf-8 insert_final_newline = true trim_trailing_whitespace = true indent_style = space indent_size = 2 ================================================ FILE: .github/workflows/ci.yml ================================================ # Github actions workflow name name: CI # Triggers the workflow on push or pull request events on: push: branches: [main, master] tags: ['**'] pull_request: branches: - main jobs: node_tests: name: 'Test nib on ${{matrix.os}} with node${{matrix.node}}' strategy: matrix: os: [ubuntu-latest] # Latest four Nodejs LTS version node: [12, 14, 16, 18] runs-on: ${{ matrix.os }} steps: # Pull repo to test machine - uses: actions/checkout@v2 # Configures the node version used on GitHub-hosted runners - uses: actions/setup-node@v2 with: # The Node.js version to configure node-version: ${{ matrix.node }} # Caching dependencies to speed up workflows - name: Get npm cache directory id: npm-cache-dir run: | echo "::set-output name=dir::$(npm config get cache)" - uses: actions/cache@v2 id: npm-cache # use this to check for `cache-hit` ==> if: steps.npm-cache.outputs.cache-hit != 'true' with: path: ${{ steps.npm-cache-dir.outputs.dir }} key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }} restore-keys: | ${{ runner.os }}-node- - name: Install npm dependencies run: npm install - name: Print put node & npm version # Output useful info for debugging. run: node --version && npm --version - name: Run Test run: npm test ================================================ FILE: .gitignore ================================================ .idea *.css !test/cases/*.css .DS_Store node_modules *.swp ================================================ FILE: .mocharc.json ================================================ { "require": "chai", "reporter": "spec", "diff": true, "color": true, "exit": true, "extension": [".js"], "file": ["test/runner.js"] } ================================================ FILE: .npmignore ================================================ node_modules test .github CHANGELOG.md .mocharc.json .editorconfig .npmignore .gitignore ================================================ FILE: CHANGELOG.md ================================================ # Changelog All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). ## [Unreleased] ## 1.2.0 - 2022-05-17 - chore: use github actions as test infra [#350](https://github.com/stylus/nib/pull/350) [@iChenLei](https://github.com/iChenLei) - feat: make stylus as peerDependencies [#350](https://github.com/stylus/nib/pull/350) [@iChenLei](https://github.com/iChenLei) - feat: use official column-fill property [#344](https://github.com/stylus/nib/pull/344) [@Sija](https://github.com/stylus/nib/pull/344) - fix: remove vendor prefix for background-size [#338](https://github.com/stylus/nib/pull/338) [@specious](https://github.com/stylus/nib/pull/338) - fix: mute nodejs v14+ warnings [#348](https://github.com/stylus/nib/pull/348) [@AlynxZhou](https://github.com/AlynxZhou) ================================================ FILE: LICENSE ================================================ The MIT License (MIT) Copyright (c) 2022 iChenLei Copyright (c) 2014 TJ Holowaychuk Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ================================================ FILE: README.md ================================================ # Nib [![npm](https://img.shields.io/npm/v/nib)](https://www.npmjs.com/package/nib) [![npm](https://img.shields.io/npm/dm/nib.svg?sanitize=true)](https://www.npmjs.com/package/nib) [![build status](https://github.com/stylus/nib/actions/workflows/ci.yml/badge.svg?branch=main)](https://github.com/stylus/nib/actions?query=branch%3Amain) Stylus mixins, utilities, components, and gradient image generation. Don't forget to check out the [documentation](http://stylus.github.io/nib). ## Installation ```bash $ npm install nib ``` If the image generation features of Nib are desired, such as generating the linear gradient images, install [node-canvas](http://github.com/learnboost/node-canvas): ```bash $ npm install canvas ``` ## JavaScript API Below is an example of how to utilize nib and stylus with the connect framework (or express). ```javascript var connect = require('connect') , stylus = require('stylus') , nib = require('nib'); var server = connect(); function compile(str, path) { return stylus(str) .set('filename', path) .set('compress', true) .use(nib()); } server.use(stylus.middleware({ src: __dirname , compile: compile })); ``` ## Stylus API To gain access to everything nib has to offer, simply add: ```css @import 'nib' ``` Or you may also pick and choose based on the directory structure in `./lib`, for example: ```css @import 'nib/gradients' @import 'nib/overflow' @import 'nib/normalize' ``` _To be continued..._ ## More Information - Introduction [screencast](http://www.screenr.com/M6a) ## Testing You will first need to install the dependencies: ```bash $ npm install -d ``` Run the automated test cases: ```bash $ npm test ``` For visual testing run the test server: ```bash $ npm run-script test-server ``` Then visit `localhost:3000` in your browser. ## Contributors I would love more contributors. And if you have helped out, you are awesome! I want to give a huge thanks to these people: - [TJ Holowaychuk](https://github.com/tj) (Original Creator) - [Sean Lang](https://github.com/notslang) (Previous Maintainer) - [iChenLei](https://github.com/iChenLei) (Current Maintainer) - [Isaac Johnston](https://github.com/superstructor) - [Everyone Else](https://github.com/tj/nib/contributors) ================================================ FILE: docs/README.md ================================================ # Mixins ## Gradient Nib's gradient support is by far the largest feature it provides. Not only is the syntax extremely similar to what you would normally write, it's more forgiving, expands to vendor equivalents, and can even produce a PNG for older browsers with [node-canvas](http://github.com/learnboost/node-canvas). ```stylus body background linear-gradient(top, white, black) ``` ```css body { background: -webkit-linear-gradient(top, #fff, #000); background: -moz-linear-gradient(top, #fff, #000); background: -o-linear-gradient(top, #fff, #000); background: -ms-linear-gradient(top, #fff, #000); background: linear-gradient(to bottom, #fff, #000); } ``` ![](http://f.cl.ly/items/1q25061X2Q2U0p472L02/Screenshot.png) Any number of color stops may be provided: ```stylus body background linear-gradient(bottom left, white, red, blue, black) ``` ![](http://f.cl.ly/items/2I0k3D0A2y0n3i443g2W/Screenshot.png) Units may be placed before or after the color: ```stylus body background linear-gradient(left, 80% red, #000) background linear-gradient(top, #eee, 90% white, 10% black) ``` ![](http://f.cl.ly/items/2B1U3m0t2T1B420I3C3I/Screenshot.png) ![](http://f.cl.ly/items/1T1P1x0n1X3k132o3V0F/Screenshot.png) ## Position The position mixins `absolute`, `fixed`, and `relative` provide a shorthand variant to what is otherwise three CSS properties. The syntax is as follows: ``` fixed|absolute|relative: top|bottom [n] left|right [n] ``` The following example will default to (0,0): ```stylus #back-to-top fixed bottom right ``` ```css #back-to-top { position: fixed; bottom: 0; right: 0; } ``` You may also specify the units: ```stylus #back-to-top fixed bottom 10px right 5px ``` ```css #back-to-top { position: fixed; bottom: 10px; right: 5px; } ``` ## Clearfix Clearfixing causes containers to expand to contain floated contents. A simple example is shown [here](http://learnlayout.com/clearfix.html). The clearfix mixin takes no arguments and expands to a form that provides extremely robust browser support. ```stylus .clearfix clearfix() ``` ```css .clearfix { zoom: 1; } .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } ``` ## Border Radius Nib's `border-radius` supports both the regular syntax as well as augmenting it to make the value more expressive. ```stylus button border-radius 1px 2px / 3px 4px button border-radius 5px button border-radius bottom 10px ``` ```css button { border-radius: 1px 2px/3px 4px; } button { border-radius: 5px; } button { border-top-left-radius: 10px; border-bottom-right-radius: 10px; } ``` ## Responsive Images The `image` mixin allows you to define a `background-image` for both the normal image, and a doubled image for devices with a higher pixel ratio such as retina displays. This works by using a @media query to serve an "@2x" version of the file. ```stylus #logo image '/images/branding/logo.main.png' #logo image '/images/branding/logo.main.png' 50px 100px ``` ```css #logo { background-image: url("/images/branding/logo.main.png"); } @media all and (-webkit-min-device-pixel-ratio: 1.5) { #logo { background-image: url("/images/branding/logo.main@2x.png"); background-size: auto auto; } } #logo { background-image: url("/images/branding/logo.main.png"); } @media all and (-webkit-min-device-pixel-ratio: 1.5) { #logo { background-image: url("/images/branding/logo.main@2x.png"); background-size: 50px 100px; } } ``` ## Ellipsis The `overflow` property is augmented with a "ellipsis" value, expanding to what you see below. ```stylus button overflow ellipsis ``` ```css button { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } ``` ## Reset Nib comes bundled with [Eric Meyer's style reset](eric-meyer) and [Nicolas Gallagher's _Normalize_](normalize) support and, you can choose to apply the global or any specifics that you wish. To view the definitions view [`reset.styl`](https://github.com/tj/nib/blob/master/lib/nib/reset.styl). [eric-meyer]: http://meyerweb.com/eric/tools/css/reset/ [normalize]: https://github.com/necolas/normalize.css > CSS Reset - `global-reset()` - `nested-reset()` - `reset-font()` - `reset-box-model()` - `reset-body()` - `reset-table()` - `reset-table-cell()` - `reset-html5()` > Normalize - `normalize-html5()` - `normalize-base()` - `normalize-links()` - `normalize-text()` - `normalize-embed()` - `normalize-groups()` - `normalize-forms()` - `normalize-tables()` - `normalize-css()` [Read more][normalize-about] about Normalize or see the original CSS [here][normalize-css]. [normalize-about]: http://nicolasgallagher.com/about-normalize-css/ [normalize-css]: https://github.com/necolas/normalize.css/blob/master/normalize.css ## Border This shorthand lets you create a border by just specifying a color, with defaults for width and style. ```stylus .foo border red ``` ```css .foo { border: 1px solid red; } ``` ## Shadow Stroke Creates a text outline using text-shadow. ```stylus .foo shadow-stroke(red) ``` ```css .foo { text-shadow: -1px -1px 0 red, 1px -1px 0 red, -1px 1px 0 red, 1px 1px 0 red; } ``` ## Size This shorthand lets you set width and height in one go. ```stylus .foo size 5em 10em ``` ```css .foo { width: 5em; height: 10em; } ``` ## Transparent Mixins These mixins expand vendor prefixes but do not modify the behavior of the property. For example: ```stylus * box-sizing border-box ``` ```css * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } ``` Here is the full list of properties for which Nib provides transparent mixins: - box-shadow - radial-gradient - user-select - column-count - column-gap - column-rule - column-rule-color - column-rule-width - column-rule-style - column-width - transform - border-image - transition - transition-property - transition-duration - transition-timing-function - transition-delay - backface-visibility - opacity - box-sizing - box-orient - box-flex - box-flex-group - box-align - box-pack - box-direction - animation - animation-name - animation-duration - animation-delay - animation-direction - animation-iteration-count - animation-timing-function - animation-play-state - animation-fill-mode - hyphens - appearance # Aliases These aliases are provided purely for convenience. official | aliases ----------- | ---------- nowrap | no-wrap white-space | whitespace ================================================ FILE: iconic/demo.html ================================================ ================================================ FILE: index.styl ================================================ @import 'lib/nib/' ================================================ FILE: lib/nib/border-radius.styl ================================================ /* * Helper for border-radius(). */ -apply-border-radius(pos, importance) if length(pos) == 3 // border-radius: y = pos[0] x = pos[1] // We don't use vendor for boder-radius anymore // vendor('border-radius-%s%s' % pos, pos[2], only: webkit official) {'border-%s-%s-radius' % pos}: pos[2] importance else if pos[0] in (top bottom) // border-radius: -apply-border-radius(pos[0] left pos[1], importance) -apply-border-radius(pos[0] right pos[1], importance) else if pos[0] in (left right) // border-radius: unshift(pos, top); -apply-border-radius(pos, importance) pos[0] = bottom -apply-border-radius(pos, importance) /* * border-radius supporting augmented behavior. * * Examples: * * border-radius: 2px 5px * border-radius: top 5px bottom 10px * border-radius: left 5px * border-radius: top left 5px * border-radius: top left 10px bottom right 5px * border-radius: top left 10px, bottom right 5px * */ border-radius() pos = () augmented = false importance = arguments[length(arguments) - 1] == !important ? !important : unquote('') for args in arguments for arg in args if arg is a 'ident' append(pos, arg) augmented = true else append(pos, arg) if augmented -apply-border-radius(pos, importance) pos = () border-radius pos unless augmented ================================================ FILE: lib/nib/border.styl ================================================ /* * border: * border: ... */ border(color, args...) if color is a 'color' border: 1px solid color args else border: arguments ================================================ FILE: lib/nib/clearfix.styl ================================================ /* * The Magnificent Micro Clearfix * * Useful for clearing floats without structural markup. * Prevents margin-collapsing on child elements in most cases. * * Known issues: * * 1. For IE 6/7 when applied to an element that contains only left-floated * children the bottom margin on child elements will be collapsed. * * 2. For Firefox versions prior to 3.5 when applied to the first child element * of body, and the element does not have non-zero padding, extra space will * appear between the body and the first child. * * See http://nicolasgallagher.com/micro-clearfix-hack/ * and http://j.mp/bestclearfix * */ clearfix() &:before &:after content: "" display: table &:after clear: both zoom: 1 if support-for-ie ================================================ FILE: lib/nib/color-image.styl ================================================ color-image(color) error('node-canvas is required for color-image()') unless has-canvas colorImage = create-color-image(color) 'url(%s)' % color-data-uri(colorImage) ================================================ FILE: lib/nib/config.styl ================================================ /* * Support for ie defaulting to true. */ support-for-ie ?= true /* * Default vendor prefixes. */ vendor-prefixes ?= webkit moz o ms official ================================================ FILE: lib/nib/flex.styl ================================================ /* * Vendor "display: flex" support with fallback to obsolete versions. */ flex-version ?= box flex // // 1. Display values // - http://www.w3.org/TR/css3-flexbox/#flex-containers // display(type, args...) if flex == type || inline-flex == type if box in flex-version if flex == type display: -ms-flexbox args display: vendor-value(box args, only: moz webkit) else display: -ms-inline-flexbox args display: vendor-value(inline-box args, only: moz webkit) if flex in flex-version display: vendor-value(arguments, only: webkit official) // overwrites old webkit else display: arguments /* * New syntax for browsers like Google Chrome. * Plus a translation to the old syntax, if possible. */ // // 5. Ordering and Orientation // - http://www.w3.org/TR/css3-flexbox/#ordering-and-orientation // -flex-obsolete-direction(direction) if box in flex-version if row-reverse == direction || column-reverse == direction vendor('box-direction', reverse, ignore: ms official) if row == direction || row-reverse == direction vendor('box-orient', horizontal, ignore: ms official) else if column == direction || column-reverse == direction vendor('box-orient', vertical, ignore: ms official) -flex-obsolete-wrap(value) if box in flex-version // WARN: wrap-reverse does not have a box equivalent. This will render in different manners // on box vs. flex values. if 'wrap' == value || wrap-reverse == value vendor('box-lines', multiple, ignore: ms official) else if nowrap == value vendor('box-lines', single, ignore: ms official) flex-direction(direction) // obsolete -flex-obsolete-direction(direction) // new if flex in flex-version vendor('flex-direction', arguments, only: webkit ms official) flex-wrap(value) // obsolete -flex-obsolete-wrap(value) if flex in flex-version vendor('flex-wrap', arguments, only: webkit ms official) flex-flow() // obsolete -flex-obsolete-direction(arguments[0]) -flex-obsolete-direction(arguments[1]) -flex-obsolete-wrap(arguments[0]) -flex-obsolete-wrap(arguments[1]) // new if flex in flex-version vendor('flex-flow', arguments, only: webkit ms official) order() // obsolete if box in flex-version vendor('box-ordinal-group', arguments, ignore: ms official) // new if flex in flex-version vendor('flex-order', arguments, only: ms) vendor('order', arguments, only: webkit official) // // 7. Flexibility // - http://www.w3.org/TR/css3-flexbox/#flexibility // flex-grow(growth) // obsolete if box in flex-version vendor('box-flex', growth) // new if flex in flex-version vendor('flex-grow', arguments, only: webkit official) flex-basis() if flex in flex-version vendor('flex-basis', arguments, only: webkit official) flex-shrink() if flex in flex-version vendor('flex-shrink', arguments, only: webkit official) flex(growth) // obsolete if box in flex-version shrink = 1 if none == growth || initial == growth // Well known values shrink = 0 if none == growth growth = 0 else if is-width(growth) == true // Basis is defined as the first parameter growth = arguments[1] || 0 shrink = arguments[2] if 3 <= length(arguments) else if arguments[1] && is-width(arguments[1]) == false // Growth is first and shrink is second shrink = arguments[1] // Since we can't make the distinction between growing and shrinking in the box model, take // the one that provides the most flexibility. vendor('box-flex', max(growth, shrink), ignore: ms) // new if flex in flex-version vendor('flex', arguments, only: webkit ms official) // converts the justification alignment -convert-justify(align) if flex-start == align return start else if flex-end == align return end else if space-around == align return distribute else if space-between == align return justify else return align // // 8. Alignment // - http://www.w3.org/TR/css3-flexbox/#alignment // justify-content(align) // obsolete if box in flex-version vendor('box-pack', -convert-justify(align), ignore: ms official) // new if flex in flex-version vendor('flex-pack', -convert-justify(align), only: ms) vendor('justify-content', align, only: webkit official) align-content(align) // WARN: Obsolete spec does not allow for adjustment here if flex in flex-version vendor('flex-line-pack', -convert-justify(align), only: ms) vendor('align-content', align, only: webkit official) // converts alignment from 'flex' to normal value -convert-alignment(align) if flex-start == align return start else if flex-end == align return end else return align align-items(align) // obsolete if box in flex-version vendor('box-align', -convert-alignment(align), ignore: ms official) // new if flex in flex-version vendor('flex-align', -convert-alignment(align), only: ms) vendor('align-items', arguments, only: webkit official) align-self(align) // WARN: Obsolete spec does not allow for overriding alignment on individual items. if flex in flex-version vendor('align-self', align, only: webkit official) vendor('flex-item-align', -convert-alignment(align), only: ms) ================================================ FILE: lib/nib/gradients.styl ================================================ @import 'config' /* * 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) /* * Standard color stop. */ std-stop(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...) error('color stops required') unless length(stops) unquote('linear-gradient(' + join(', ',arguments) + ')') /* * Create a linear gradient image with the given start position * and variable number of color stops. */ linear-gradient-image(start, stops...) error('node-canvas is required for linear-gradient-image()') unless has-canvas stops = stops[0] if length(stops) == 1 error('gradient image size required') unless start[0] is a 'unit' size = start[0] start = start[1] or 'top' grad = create-gradient-image(size, start) stops = normalize-stops(stops) add-color-stop(grad, stop[0], stop[1]) for stop in stops 'url(%s)' % gradient-data-uri(grad) ================================================ FILE: lib/nib/iconic.styl ================================================ iconic-stroke(path) @font-face font-family: 'IconicStroke' src: url(path + '/iconic_stroke.eot') src: local('☺'), url(path + '/iconic_stroke.ttf') format('truetype'), url(path + '/iconic_stroke.svg#iconic') format('svg') font-weight: normal font-style: normal ================================================ FILE: lib/nib/image.styl ================================================ /* * 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, min_pixel_ratio = 1.5) background-image: url(path) 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) if w in (cover contain) and h == auto h = null background-size: w h ================================================ FILE: lib/nib/index.styl ================================================ @import 'border' @import 'border-radius' @import 'clearfix' @import 'color-image' @import 'flex' @import 'gradients' @import 'iconic' @import 'image' @import 'normalize' @import 'overflow' @import 'positions' @import 'reset' @import 'text' @import 'vendor' @import 'size' ================================================ FILE: lib/nib/normalize/base.styl ================================================ // Based in Nicolas Gallagher's git.io/normalize normalize-base() html // Prevent iOS text size adjust after orientation change. font-family sans-serif -ms-text-size-adjust 100% -webkit-text-size-adjust 100% body margin 0 ================================================ FILE: lib/nib/normalize/embed.styl ================================================ // Based in Nicolas Gallagher's git.io/normalize normalize-embed() img // No border when inside `a` in IE 8~10. border 0 svg:not(:root) // Overflow should be hidden in IE 9~11. overflow hidden ================================================ FILE: lib/nib/normalize/forms.styl ================================================ // Based in Nicolas Gallagher's git.io/normalize normalize-forms() // Known limitation: Chrome and Safari on OS X allow very limited // styling of `select`, unless a `border` property is set. button, input, optgroup, select, textarea color inherit // Correct color not being inherited. font inherit // Correct font properties not being inherited. margin 0 // Fix margins in FF 4+, Safari, and Chrome. button // Fix `overflow` set to `hidden` in IE 8/9/10/11. overflow visible button, select // Consistent text-transform across browsers. text-transform none // Fix WebKit bug in Android 4.0, inability to style clickable `input` in // iOS and improve usability and consistency of cursor style. button, html input[type='button'], input[type='reset'], input[type='submit'] cursor pointer -webkit-appearance button // Reset default cursor for disabled elements. button[disabled], html input[disabled] cursor default // Remove inner padding and border in FF 4+. button::-moz-focus-inner, input::-moz-focus-inner border 0 padding 0 input // Reset line-height again FF 4+ UA stylsheet. line-height normal // Fix box sizing and excess padding in IE 8~10 input[type='checkbox'], input[type='radio'] box-sizing border-box padding 0 // Fix the cursor style for Chrome's increment/decrement buttons. input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button height auto // Consistent appearance and box-sizing in Safari and Chrome. input[type='search'] -webkit-appearance textfield -moz-box-sizing content-box -webkit-box-sizing content-box box-sizing content-box // No inner padding and search cancel button in Safari and Chrome on OS X. input[type='search']::-webkit-search-cancel-button, input[type='search']::-webkit-search-decoration -webkit-appearance none fieldset // Consistent border, margin, and padding. border 1px solid #c0c0c0 margin 0 2px padding 0.35em 0.625em 0.75em legend // Hack to correct `color` not being inherited in IE 8/9/10/11. border 0 padding 0 textarea // Remove default vertical scrollbar in IE 8~11. overflow auto optgroup // Don't inherit the `font-weight` applied above. font-weight bold ================================================ FILE: lib/nib/normalize/groups.styl ================================================ // Based in Nicolas Gallagher's git.io/normalize normalize-groups() figure // Margin should exist in IE 8~9 / Safari. margin 1em 40px hr // Consistency between FF and others. -moz-box-sizing content-box box-sizing content-box height 0 pre // Contain overflow and wrap words. overflow auto // Hack to fix odd `em`-unit font size rendering in all browsers. code, kbd, pre, samp font-family monospace, monospace font-size 1em ================================================ FILE: lib/nib/normalize/html5.styl ================================================ // Based in Nicolas Gallagher's git.io/normalize normalize-html5() // `block` display for HTML5 elements in IE 8~11 and FF. article, details, section, summary, aside, main, menu, nav, figcaption, figure, footer, header, hgroup display block audio, canvas, progress, video display inline-block // Set `inline-block` not defined in IE 8~9. vertical-align baseline // Fix v-align of `progress` in Chrome, FF, and O. audio:not([controls]) display none // Prevent displaying `audio` without controls. height 0 // Remove excess height in iOS 5 devices. [hidden], // Address `[hidden]` styling not present in IE 8~10. template // Hide the `template` element in IE 8~11, Safari, and FF < 22. display none ================================================ FILE: lib/nib/normalize/index.styl ================================================ // Based in Nicolas Gallagher's git.io/normalize @import './base' @import './html5' @import './links' @import './text' @import './embed' @import './groups' @import './forms' @import './tables' normalize-css() normalize-base() normalize-html5() normalize-links() normalize-text() normalize-embed() normalize-groups() normalize-forms() normalize-tables() ================================================ FILE: lib/nib/normalize/links.styl ================================================ // Based in Nicolas Gallagher's git.io/normalize normalize-links() a // No gray bg color in active links in IE 10. background-color transparent &:active, &:hover outline 0 // + readability when focused. ================================================ FILE: lib/nib/normalize/tables.styl ================================================ // Based in Nicolas Gallagher's git.io/normalize normalize-tables() table // Remove most spacing between table cells. border-collapse collapse border-spacing 0 td, th padding 0 ================================================ FILE: lib/nib/normalize/text.styl ================================================ // Based in Nicolas Gallagher's git.io/normalize normalize-text() abbr[title] // + style not present in IE 8~11, Safari, and Chrome. border-bottom 1px dotted dfn // + style not present in Safari and Chrome. font-style italic mark // + style not present in IE 8/9. background #ff0; color #000 b, strong // Fix `font-weight: bolder` in FF 4+, Safari, and Chrome. font-weight bold h1 // `h1` inside `section` and `article` fix for FF 4+, Safari & Chrome. font-size 2em margin 0.67em 0 small // Consistent font-size across browsers. font-size 80% sub, sup // Prevent `sub` and `sup` affecting `line-height`. font-size 75% line-height 0 position relative vertical-align baseline sup top -0.5em sub bottom -0.25em ================================================ FILE: lib/nib/overflow.styl ================================================ /* * Overflow utility. Maps to regular overflow, and adds an ellipsis value. * * Synopsis: * * overflow: * * Examples: * * overflow: auto * overflow: hidden * overflow: ellipsis * */ overflow() if arguments[0] == ellipsis ellipsis() else overflow: arguments ================================================ FILE: lib/nib/positions.styl ================================================ // helper -pos(type, args) i = 0 position: unquote(type) for j in (1..4) if length(args) > i {args[i]}: args[i + 1] is a 'unit' ? args[i += 1] : 0 i += 1 /* * Position utility. * * Synopsis: * * fixed: [n] [n] * * Examples: * * fixed: top left * fixed: top 5px left * fixed: top left 5px * fixed: top 5px left 5px * */ fixed() -pos('fixed', arguments) /* * Position utility. * * Synopsis: * * absolute: [n] [n] * * Examples: * * absolute: top left * absolute: top 5px left * absolute: top left 5px * absolute: top 5px left 5px * */ absolute() -pos('absolute', arguments) /* * Position utility. * * Synopsis: * * relative: [n] [n] * * Examples: * * relative: top left * relative: top 5px left * relative: top left 5px * relative: top 5px left 5px * */ relative() -pos('relative', arguments) ================================================ FILE: lib/nib/reset.styl ================================================ // Based on [Eric Meyer's reset](http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/) global-reset() html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td reset-box-model() reset-font() body reset-body() ol, ul list-style: none table reset-table() caption, th, td reset-table-cell() a img border: none nested-reset() div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, pre, a, abbr, acronym, address, code, del, dfn, em, img, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead, tr reset-box-model() reset-font() table reset-table() caption, th, td reset-table-cell() a img border: none reset-box-model() margin: 0 padding: 0 border: 0 outline: 0 reset-font() font-weight: inherit font-style: inherit font-family: inherit font-size: 100% vertical-align: baseline reset-body() line-height: 1 color: black background: white reset-table() border-collapse: separate border-spacing: 0 vertical-align: middle reset-table-cell() text-align: left font-weight: normal vertical-align: middle reset-html5() article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, main reset-box-model() display: block audio, canvas, video display inline-block *display inline *zoom 1 audio:not([controls]),[hidden] display none ================================================ FILE: lib/nib/size.styl ================================================ /* * Size utility. * * Synopsis: * * size: | * * Examples: * * size: 100% 30px * yields: * width: 100% * height: 30px * * size: 5px * yields: * width: 5px * height: 5px * */ size() if length(arguments) == 1 width: arguments[0] height: arguments[0] else width: arguments[0] height: arguments[1] ================================================ FILE: lib/nib/text/aliases.styl ================================================ /* * Alias of "nowrap". */ no-wrap = unquote('nowrap') /* * Alias of "white-space". */ whitespace() white-space: arguments ================================================ FILE: lib/nib/text/ellipsis.styl ================================================ /* * Ellipsis with wrapping disabled by default. */ ellipsis(no-wrap = true) if no-wrap white-space: nowrap overflow: hidden text-overflow: ellipsis ================================================ FILE: lib/nib/text/hide-text.styl ================================================ /* * Hide text. */ hide-text() text-indent: 101% white-space: nowrap overflow: hidden ================================================ FILE: lib/nib/text/index.styl ================================================ @import './aliases' @import './ellipsis' @import './hide-text' @import './replace-text' @import './shadow-stroke' ================================================ FILE: lib/nib/text/replace-text.styl ================================================ /* * Replace text with an image. */ replace-text(image, x=50%, y=50%) hide-text() background-image image background-repeat no-repeat background-position x y ================================================ FILE: lib/nib/text/shadow-stroke.styl ================================================ shadow-stroke(n) text-shadow: -1px -1px 0 n, 1px -1px 0 n, -1px 1px 0 n, 1px 1px 0 n ================================================ FILE: lib/nib/vendor.styl ================================================ use('../nodes/vendor-helpers.js') @import 'config' /* * Alias "nowrap" as "no-wrap". */ no-wrap = unquote('nowrap') /* * Helper to find out if a given value is a width */ is-width(val) if auto == val return true else if val && 'unit' == type(val) // Stylus does not short circuit so we need to perform this as a distinct // operation to prevent errors return '' != unit(val) return false /* * Vendor support for the given prop / arguments, optionally specifying the * only prefixes to utilize, or those which should be ignored. */ vendor(prop, args, only = null, ignore = null, vendor-property = true) need_normalize = !vendor-property or prop in ('transition' 'transition-property' 'border-image' 'border-image-slice') for prefix in vendor-prefixes unless (only and !(prefix in only)) or (ignore and prefix in ignore) if official == prefix if need_normalize {prop}: normalize(prop,('%s' % args)) else {prop}: args else newprop = prop newprop = '-' + prefix + '-' + prop if vendor-property if need_normalize {newprop}: normalize(prop,('%s' % args),prefix) else {newprop}: args /* * Vendorize the given value. */ vendor-value(arg, only = null, ignore = null) prop = current-property[0] for prefix in vendor-prefixes unless (only and !(prefix in only)) or (ignore and prefix in ignore) or official == prefix add-property(prop, '-%s-%s' % (prefix arg)) arg /* * Vendor "box-shadow" support. */ box-shadow() vendor('box-shadow', arguments, only: webkit official) /* * Vendor "user-select" support. */ user-select() vendor('user-select', arguments, only: webkit moz ms official) /* * Vendor "column-count" support. */ column-count() vendor('column-count', arguments, only: webkit moz official) /* * Vendor "column-gap" support. */ column-gap() vendor('column-gap', arguments, only: webkit moz official) /* * Vendor "column-rule" support. */ column-rule() vendor('column-rule', arguments, only: webkit moz official) /* * Vendor "column-rule-color" support. */ column-rule-color() vendor('column-rule-color', arguments, only: webkit moz official) /* * Vendor "column-rule-width" support. */ column-rule-width() vendor('column-rule-width', arguments, only: webkit moz official) /* * Vendor "column-rule-style" support. */ column-rule-style() vendor('column-rule-style', arguments, only: webkit moz official) /* * Vendor "column-width" support. */ column-width() vendor('column-width', arguments, only: webkit moz official) /* * Vendor "column-span" support. */ column-span() vendor('column-span', arguments, only: webkit official) /* * Vendor "column-fill" support. */ column-fill() vendor('column-fill', arguments, only: moz official) /* * Legacy syntax support for background-clip and background-origin */ legacy-bg-values(property, args) legacy_args = () importance = unquote('') for subargs in args for arg in subargs if arg in (border-box padding-box content-box) arg = unquote('border') if arg == border-box arg = unquote('padding') if arg == padding-box arg = unquote('content') if arg == content-box if arg != '!important' push(legacy_args,arg) else importance = !important vendor(property, unquote(join(', ',legacy_args)) importance, only: moz webkit) /* * Vendor "background-clip" support. */ background-clip() if arguments[0] == text vendor('background-clip', arguments, only: webkit) else legacy-bg-values('background-clip', arguments) background-clip: arguments /* * Vendor "background-origin" support. */ background-origin() legacy-bg-values('background-origin', arguments) background-origin: arguments /* * Vendor "transform" support. */ transform() vendor('transform', arguments) /* * Vendor "transform-origin" support. */ transform-origin() vendor('transform-origin', arguments) /* * Vendor "transform-style" support. */ transform-style() vendor('transform-style', arguments) /* * Vendor "border-image" support. */ border-image() vendor('border-image', arguments, only: webkit moz o official) /* * Vendor "transition" support. */ transition() vendor('transition', arguments) /* * Vendor "transition-property" support. */ transition-property() vendor('transition-property', arguments) /* * Vendor "transition-duration" support. */ transition-duration() vendor('transition-duration', arguments) /* * Vendor "transition-timing-function" support. */ transition-timing-function() vendor('transition-timing-function', arguments) /* * Vendor "transition-delay" support. */ transition-delay() vendor('transition-delay', arguments) /* * Vendor "backface-visibility" support. */ backface-visibility() vendor('backface-visibility', arguments, only: webkit moz ms official) /* * Vendor "perspective" support. */ perspective() if mixin vendor('perspective', arguments, only: webkit moz ms official) else 'perspective(%s)' % arguments /* * Vendor "perspective-origin" support. */ perspective-origin() vendor('perspective-origin', arguments, only: webkit moz ms official) /* * Opacity with conditional IE support. */ opacity(n, args...) opacity: n args if support-for-ie if n == inherit or n == initial -ms-filter: n args filter: n args else val = round(n * 100) if val == 100 -ms-filter: none args filter: none args else -ms-filter: '"progid:DXImageTransform.Microsoft.Alpha(Opacity=%s)"' % val args filter: 'alpha(opacity=%s)' % val args /* * Vendor "text-size-adjust" */ text-size-adjust() vendor('text-size-adjust', arguments) /* * Alias the "white-space" property. */ whitespace() white-space: arguments /* * Vendor "box-sizing" support. */ box-sizing() vendor('box-sizing', arguments, only: webkit moz official) /* * Vendor "box-orient" support. */ box-orient() vendor('box-orient', arguments, only: webkit moz official) /* * Vendor "box-flex-group" support. */ box-flex-group() vendor('box-flex-group', arguments, only: webkit moz official) /* * Vendor "box-ordinal-group" support. */ box-ordinal-group() vendor('box-ordinal-group', arguments, only: webkit moz ms official) /* * Vendor "box-align" support. */ box-align() vendor('box-align', arguments, only: webkit moz ms official) /* * Vendor "box-pack" support. */ box-pack() vendor('box-pack', arguments, only: webkit moz ms official) /* * Vendor "box-direction" support. */ box-direction() vendor('box-direction', arguments, only: webkit moz ms official) /* * Vendor "animation" support. */ animation() vendor('animation', arguments) /* * Vendor "animation-name" support. */ animation-name() vendor('animation-name', arguments) /* * Vendor "animation-duration" support. */ animation-duration() vendor('animation-duration', arguments) /* * Vendor "animation-delay" support. */ animation-delay() vendor('animation-delay', arguments) /* * Vendor "animation-direction" support. */ animation-direction() vendor('animation-direction', arguments) /* * Vendor "animation-iteration-count" support. */ animation-iteration-count() vendor('animation-iteration-count', arguments) /* * Vendor "animation-timing-function" support. */ animation-timing-function() vendor('animation-timing-function', arguments) /* * Vendor "animation-play-state" support. */ animation-play-state() vendor('animation-play-state', arguments) /* * Vendor "animation-fill-mode" support. */ animation-fill-mode() vendor('animation-fill-mode', arguments) /* * Vendor "hyphens" support. */ hyphens() vendor('hyphens', arguments, only: webkit moz ms official) /* * Vendor "appearance" support. */ appearance() vendor('appearance', arguments, only: webkit moz official) /* * Vendor "tab-size" support. */ tab-size() vendor('tab-size', arguments, only: moz o official) /* * Vendor "overflow-scrolling" support. */ overflow-scrolling() vendor('overflow-scrolling', arguments, only: webkit official) /* * Vendor "text-overflow" support, , -o- for opera 9.* - 10.* */ text-overflow() vendor('text-overflow', arguments, only: official o) /* * Vendor "text-size-adjust" support. */ text-size-adjust() vendor('text-size-adjust', arguments, only: official webkit ms) /* * Vendor "font-smoothing" support, webkit only. */ font-smoothing() vendor('font-smoothing', arguments, only: webkit) /** * Vendor input-placeholder/placeholder support. * * Examples: * // Default syntax * body * placeholder(color #333, font-weight normal) * * // The comma is important * .placeholder-red * placeholder(color red,) * * // We can pass a function * green-placeholder() * color green * .placeholder-green * placeholder(green-placeholder) * * // We can pass a hash * textarea * placeholder((font-style italic) (font-weight bold) (padding '4px 10px')) */ placeholder() for v in ':-webkit-input' '-moz' ':-moz' '-ms-input' &:{v}-placeholder for pair in arguments if typeof(pair) == 'function' pair() else if pair is not null && pair[0] is not null {pair[0]}: type(pair[1]) == 'string' ? s(pair[1]) : pair[1] input-placeholder = placeholder /* * Vendor background support (gradients). */ background() if match('-gradient\(', ''+arguments) vendor('background', arguments, vendor-property: false) else background arguments background-image() if match('-gradient\(', ''+arguments) vendor('background-image', arguments, vendor-property: false) else background-image arguments cursor() if match('-gradient\(', ''+arguments) vendor('cursor', arguments, vendor-property: false) else cursor arguments list-style() if match('-gradient\(', ''+arguments) vendor('list-style', arguments, vendor-property: false) else list-style arguments list-style-image() if match('-gradient\(', ''+arguments) vendor('list-style-image', arguments, vendor-property: false) else list-style-image arguments ================================================ FILE: lib/nib.js ================================================ /*! * nib * Copyright (c) 2010 TJ Holowaychuk * MIT Licensed */ /** * Module dependencies. */ var stylus = require('stylus'), path = require('path'), nodes = stylus.nodes, utils = stylus.utils, Canvas; exports = module.exports = plugin; // conditionally expose canvas-based APIs. try { Canvas = require('canvas'); var gradient = require('./nodes/gradient'), colorImage = require('./nodes/color-image'); } catch (err) { // ignore } /** * Library version. */ exports.version = require(path.join(__dirname, '../package.json')).version; /** * Stylus path. */ exports.path = __dirname; /** * Return the plugin callback for stylus. * * @return {Function} * @api public */ function plugin() { return function(style){ style.include(__dirname); if (Canvas) { style.define('has-canvas', nodes.true); // gradients style.define('create-gradient-image', gradient.create); style.define('gradient-data-uri', gradient.dataURL); style.define('add-color-stop', gradient.addColorStop); // color images style.define('create-color-image', colorImage.create); style.define('color-data-uri', colorImage.dataURL); } else { style.define('has-canvas', nodes.false); } }; } ================================================ FILE: lib/nodes/color-image.js ================================================ /** * Module dependencies. */ var stylus = require('stylus'), Canvas = require('canvas'), nodes = stylus.nodes, utils = stylus.utils; /** * Expose `ColorImage`. */ exports = module.exports = ColorImage; /** * Create a new `ColorImage` node with the given `color`. * * @param {Color} color node * @return {ColorImage} * @api public */ exports.create = function(color){ utils.assertColor(color); return new ColorImage(color); }; /** * Return the data URI for `colorImage`. * * @param {ColorImage} colorImage * @return {String} * @api public */ exports.dataURL = function(colorImage){ utils.assertType(colorImage, 'colorimage'); return new nodes.String(colorImage.toDataURL()); }; /** * Initialize a new `ColorImage` node with the given arguments. * * @param {Color} color node * @api private */ function ColorImage(color) { this.color = color; this.canvas = new Canvas(1, 1); this.ctx = this.canvas.getContext('2d'); this.ctx.fillStyle = color.toString(); this.ctx.fillRect(0, 0, 1, 1); } /** * Inherit from `nodes.Node.prototype`. */ ColorImage.prototype.__proto__ = nodes.Node.prototype; /** * Inspect the color. * * @return {String} * @api private */ ColorImage.prototype.toString = function(){ return 'ColorImage(' + this.color.toString() + ')'; }; /** * Return data URI string. * * @return {String} * @api private */ ColorImage.prototype.toDataURL = function(){ return this.canvas.toDataURL(); }; ================================================ FILE: lib/nodes/gradient.js ================================================ /** * Module dependencies. */ var stylus = require('stylus'), Canvas = require('canvas'), nodes = stylus.nodes, utils = stylus.utils; /** * Expose `Gradient`. */ exports = module.exports = Gradient; /** * Create a new `Gradient` node with the given `size` * and `start` position. * * @param {Number} size * @param {String|Ident|Literal} start * @return {Gradient} * @api public */ exports.create = function(size, start){ utils.assertType(size, 'unit', 'size'); utils.assertString(start, 'start'); return new Gradient(size.val, start.string); }; /** * Add color stop to `grad`. * * @param {Gradient} grad * @param {Unit} pos * @param {HSLA|RGBA} color * @return {Null} * @api public */ exports.addColorStop = function(grad, pos, color){ utils.assertType(grad, 'gradient', 'grad'); utils.assertType(pos, 'unit', 'pos'); utils.assertColor(color, 'color'); grad.addColorStop(pos.val / 100, color.rgba.toString()); return nodes.null; }; /** * Return the data URI for `grad`. * * @param {Gradient} grad * @return {String} * @api public */ exports.dataURL = function(grad){ utils.assertType(grad, 'gradient'); return new nodes.String(grad.toDataURL()); }; /** * Initialize a new `Gradient` node with the given `size` * and `start` position. * * @param {Number} size * @param {String} start * @api private */ function Gradient(size, start) { this.size = size; this.canvas = new Canvas(1, 1); this.setStartPosition(start); this.ctx = this.canvas.getContext('2d'); this.grad = this.ctx.createLinearGradient( this.from[0], this.from[1], this.to[0], this.to[1]); } /** * Inspect the gradient. * * @return {String} * @api private */ Gradient.prototype.toString = function(){ return 'Gradient(' + this.size + 'px ' + this.stops.map(function(stop){ return stop[0] + ' ' + stop[1]; }).join(', ') + ')'; }; /** * Set `start` position. * * @param {String} start * @api private */ Gradient.prototype.setStartPosition = function(start){ var size = this.size, canvas = this.canvas; switch (start) { case 'top': canvas.height = size; this.from = [canvas.width / 2, 0]; this.to = [canvas.width / 2, canvas.height]; break; case 'bottom': canvas.height = size; this.from = [canvas.width / 2, canvas.height]; this.to = [canvas.width / 2, 0]; break; case 'left': canvas.width = size; this.from = [0, 0]; this.to = [canvas.width, canvas.height]; break; case 'right': canvas.width = size; this.from = [canvas.width, canvas.height]; this.to = [0, 0]; break; default: throw new Error('invalid start position "' + start + '"'); } }; /** * Add color stop `pos` / `color`. * * @param {Number} pos * @param {String} color * @api private */ Gradient.prototype.addColorStop = function(pos, color){ this.grad.addColorStop(pos, color); }; /** * Return data URI string. * * @return {String} * @api private */ Gradient.prototype.toDataURL = function(){ var canvas = this.canvas, ctx = this.ctx; ctx.fillStyle = this.grad; ctx.fillRect(0, 0, canvas.width, canvas.height); return canvas.toDataURL(); }; /** * Inherit from `nodes.Node.prototype`. */ Gradient.prototype.__proto__ = nodes.Node.prototype; ================================================ FILE: lib/nodes/vendor-helpers.js ================================================ var RE_GRADIENT_STOPS = /([\(\,]\s*)(-?(?:\d*\.)?\d+(?:%|px|em))(\s+)((hsl|rgb)a?\([^\)]+\)|#[^\)\,]+)/g, RE_GRADIENT_VAL = /(\(\s*)(?:(-?(\d*\.)?\d+)deg|((to )?(top|bottom|left|right)( (top|bottom|left|right))?))/g, RE_GRADIENT_TYPE = /((repeating-)?(linear|radial)-gradient\()/g, RE_TRANSFORM = /\b(transform)\b/g, RE_FILL_KEYWORD = /\s*\b(fill)\b\s*/g; var DIRECTIONS = { top: 'bottom', bottom: 'top', left: 'right', right:'left' }; /** * Expose `normalize`. */ function normalize(property, value, prefix){ var result = value.toString(), args; /* Fixing the gradients */ if (~result.indexOf('gradient(')) { /* Normalize color stops */ result = result.replace(RE_GRADIENT_STOPS,'$1$4$3$2'); /* Normalize legacy gradients */ result = result.replace(RE_GRADIENT_VAL, function(){ args = [].slice.call(arguments, 1); return normalizeGradient(args, prefix); }); /* Adding prefixes to the legacy gradients */ if (prefix) result = result.replace(RE_GRADIENT_TYPE, '-' + prefix + '-$1'); } /* Adding prefixes to the `transform` values of legacy `transition` property */ if (prefix && (property == "'transition'" || property == "'transition-property'")) { result = result.replace(RE_TRANSFORM, '-' + prefix + '-$1'); } /* Removing `fill` keyword from the legacy `border-image` property */ if (prefix && (property == "'border-image'" || property == "'border-image-slice'")) { result = result.replace(RE_FILL_KEYWORD, ' '); } return result; } function normalizeGradient(parts, prefix){ /* Fix the degrees to the legacy syntax */ var val = parts[0]; // when the gradients were unprefixed, the w3c changed the way that the // angle direction is interpreted. see: // http://blogs.msdn.com/b/ie/archive/2012/06/25/unprefixed-css3-gradients-in-ie10.aspx if (parts[1]) val += (prefix ? parseFloat((Math.abs(450 - parts[1]) % 360).toFixed(3)) : parts[1]) + 'deg'; /* Fix the directions to the legacy syntax */ if (prefix && parts[4]) { // `to top` to `bottom` etc. if (parts[5]) val += DIRECTIONS[parts[5]]; if (parts[6]) val += ' ' + DIRECTIONS[parts[7]]; } else if (!prefix && !parts[4]) { // `top` to `to bottom` etc. if (parts[5]) val += 'to ' + DIRECTIONS[parts[5]]; if (parts[6]) val += ' ' + DIRECTIONS[parts[7]]; } else { if (parts[3]) val += parts[3]; } return val; } var plugin = function(){ return function(style){ var nodes = this.nodes; style.define('normalize', function(property, value, prefix) { return new nodes.Ident(normalize(property, value, prefix)); }); }; }; module.exports = plugin; ================================================ FILE: package.json ================================================ { "name": "nib", "description": "Stylus mixins and utilities", "version": "1.2.0", "license": "MIT", "repository": { "type": "git", "url": "git://github.com/stylus/nib.git" }, "peerDependencies": { "stylus": "*" }, "devDependencies": { "chai": "^4.3.6", "connect": "^3.7.0", "mocha": "^10.0.0", "pug": "^3.0.2", "serve-static": "^1.15.0", "stylus": "^0.57.0" }, "author": "TJ Holowaychuk ", "maintainers": [ { "name": "iChenLei", "email": "chenleicoder@foxmail.com" } ], "main": "lib/nib.js", "engines": { "node": "*" }, "scripts": { "test": "mocha", "test-server": "node test/server.js" } } ================================================ FILE: test/cases/absolute.css ================================================ #login { position: absolute; bottom: 0; right: 0; } #login { position: absolute; top: 5px; left: 10px; } #login { position: absolute; top: 5px; right: 5px; bottom: 5px; } #login { position: absolute; top: 0; } #login { position: absolute; top: 0; right: 5px; bottom: 0; left: 10px; } ================================================ FILE: test/cases/absolute.styl ================================================ @import 'nib/positions' #login absolute bottom right #login absolute top 5px left 10px #login absolute top 5px right 5px bottom 5px #login absolute top #login absolute top right 5px bottom left 10px ================================================ FILE: test/cases/border-radius.css ================================================ button { border-radius: 1px 2px/3px 4px; } button { border-top-left-radius: 10px; } button { border-top-left-radius: 10px !important; } button { border-bottom-right-radius: 5px; } button { border-top-left-radius: 5px; border-bottom-right-radius: 10px; } button { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } button { border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } button { border-top-left-radius: 5px; border-bottom-right-radius: 10px; } button { border-radius: 5px; } ================================================ FILE: test/cases/border-radius.styl ================================================ @import 'nib/border-radius' button border-radius: 1px 2px / 3px 4px button border-radius: top left 10px button border-radius: top left 10px !important button border-radius: bottom right 5px vendor-prefixes = webkit moz official button border-radius: top left 5px bottom right 10px button border-radius: bottom 10px button border-radius: top 5px bottom 10px button border-radius: top left 5px, bottom right 10px prepend(vendor-prefixes, ms, o) button border-radius: 5px ================================================ FILE: test/cases/border.css ================================================ .foo { border: none; border: 1px solid #f00; border: 1px solid #0f0 !important; border: 1px solid #f00; } ================================================ FILE: test/cases/border.styl ================================================ @import 'nib/border' .foo border: none border: red border: lime !important border: 1px solid red ================================================ FILE: test/cases/clearfix.css ================================================ #clearfix { zoom: 1; } #clearfix:before, #clearfix:after { content: ""; display: table; } #clearfix:after { clear: both; } ================================================ FILE: test/cases/clearfix.styl ================================================ @import 'nib/clearfix' support-for-ie = true #clearfix clearfix() ================================================ FILE: test/cases/fixed.css ================================================ #login { position: fixed; bottom: 0; right: 0; } #login { position: fixed; top: 5px; left: 10px; } #login { position: fixed; bottom: 0; left: 10px; } #login { position: fixed; bottom: 10px; right: 0; } ================================================ FILE: test/cases/fixed.styl ================================================ @import 'nib/positions' #login fixed: bottom right #login fixed: top 5px left 10px #login fixed: bottom left 10px #login fixed: bottom 10px right ================================================ FILE: test/cases/flex.css ================================================ section { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -o-box-orient: horizontal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } section div { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1 0; -ms-flex: 1 0; flex: 1 0; } section { display: -webkit-inline-box; display: -moz-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-box; display: inline-flex; } flex-flow { -webkit-box-direction: reverse; -moz-box-direction: reverse; -o-box-direction: reverse; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -o-box-orient: horizontal; -webkit-flex-flow: row-reverse; -ms-flex-flow: row-reverse; flex-flow: row-reverse; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -o-box-orient: horizontal; -webkit-box-lines: multiple; -moz-box-lines: multiple; -o-box-lines: multiple; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-direction: reverse; -moz-box-direction: reverse; -o-box-direction: reverse; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-box-lines: multiple; -moz-box-lines: multiple; -o-box-lines: multiple; -webkit-flex-flow: wrap-reverse column-reverse; -ms-flex-flow: wrap-reverse column-reverse; flex-flow: wrap-reverse column-reverse; } justify-content { -webkit-box-pack: start; -moz-box-pack: start; -o-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-box-pack: end; -moz-box-pack: end; -o-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-pack: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; -webkit-box-pack: distribute; -moz-box-pack: distribute; -o-box-pack: distribute; -ms-flex-pack: distribute; -webkit-justify-content: space-around; justify-content: space-around; } align-items { -webkit-box-align: start; -moz-box-align: start; -o-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; -webkit-box-align: end; -moz-box-align: end; -o-box-align: end; -ms-flex-align: end; -webkit-align-items: flex-end; align-items: flex-end; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } align-content { -ms-flex-line-pack: start; -webkit-align-content: flex-start; align-content: flex-start; -ms-flex-line-pack: end; -webkit-align-content: flex-end; align-content: flex-end; -ms-flex-line-pack: center; -webkit-align-content: center; align-content: center; -ms-flex-line-pack: justify; -webkit-align-content: space-between; align-content: space-between; -ms-flex-line-pack: distribute; -webkit-align-content: space-around; align-content: space-around; } flex { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 0 auto; -ms-flex: 0 auto; flex: 0 auto; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: auto 0; -ms-flex: auto 0; flex: auto 0; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: initial; -ms-flex: initial; flex: initial; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: auto; -ms-flex: auto; flex: auto; -webkit-box-flex: 0; -moz-box-flex: 0; -o-box-flex: 0; box-flex: 0; -webkit-flex: none; -ms-flex: none; flex: none; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-flex: 0; -moz-box-flex: 0; -o-box-flex: 0; box-flex: 0; -webkit-flex: 0px 0 0; -ms-flex: 0px 0 0; flex: 0px 0 0; -webkit-box-flex: 2; -moz-box-flex: 2; -o-box-flex: 2; box-flex: 2; -webkit-flex: 1 2 0; -ms-flex: 1 2 0; flex: 1 2 0; } order { -webkit-box-ordinal-group: 0; -moz-box-ordinal-group: 0; -o-box-ordinal-group: 0; -ms-flex-order: 0; -webkit-order: 0; order: 0; } section { display: -webkit-box !important; display: -moz-box !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: box !important; display: flex !important; } section { display: -webkit-inline-box !important; display: -moz-inline-box !important; display: -webkit-inline-flex !important; display: -ms-inline-flexbox !important; display: inline-box !important; display: inline-flex !important; } section { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: box; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -o-box-orient: horizontal; } section div { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; } section { display: -webkit-inline-box; display: -moz-inline-box; display: -ms-inline-flexbox; display: inline-box; } section { display: -webkit-box !important; display: -moz-box !important; display: -ms-flexbox !important; display: box !important; } section { display: -webkit-inline-box !important; display: -moz-inline-box !important; display: -ms-inline-flexbox !important; display: inline-box !important; } section { display: -webkit-flex; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } section div { -webkit-flex: 1 0; -ms-flex: 1 0; flex: 1 0; } section { display: -webkit-inline-flex; display: inline-flex; } section { display: -webkit-flex !important; display: flex !important; } section { display: -webkit-inline-flex !important; display: inline-flex !important; } ================================================ FILE: test/cases/flex.styl ================================================ @import 'nib/vendor' @import 'nib/flex' section display: flex flex-direction: row div flex: 1 0 section display: inline-flex flex-flow flex-flow row-reverse flex-flow row wrap flex-flow wrap-reverse column-reverse justify-content justify-content flex-start justify-content flex-end justify-content center justify-content space-between justify-content space-around align-items align-items flex-start align-items flex-end align-items center align-content align-content flex-start align-content flex-end align-content center align-content space-between align-content space-around flex flex 0 auto flex auto 0 flex initial flex auto flex none flex 1 flex 0px 0 0 flex 1 2 0 order order 0 section display: flex !important section display: inline-flex !important // Obsolete property conditional rendering flex-version = box section display: flex flex-direction: row div flex: 1 0 section display: inline-flex section display: flex !important section display: inline-flex !important // New property conditional rendering flex-version = flex section display: flex flex-direction: row div flex: 1 0 section display: inline-flex section display: flex !important section display: inline-flex !important ================================================ FILE: test/cases/image.css ================================================ #logo { background-image: url("/images/branding/logo.main.png"); } @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; } } #logo { background-image: url("/images/branding/logo.main.png"); } @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; } } #logo { background-image: url("/images/branding/logo.main.png"); } @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: cover; } } #logo { background-image: url("/images/branding/logo.main.png"); } @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: contain; } } ================================================ FILE: test/cases/image.styl ================================================ @import 'nib/image' #logo image: '/images/branding/logo.main.png' #logo image: '/images/branding/logo.main.png' 50px 100px #logo image: '/images/branding/logo.main.png' cover #logo image: '/images/branding/logo.main.png' contain ================================================ FILE: test/cases/importance.css ================================================ .test { position: relative !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; z-index: 0 !important; float: left !important; clear: left !important; display: none !important; visibility: hidden !important; overflow: hidden !important; overflow-x: scroll !important; overflow-y: auto !important; clip: auto !important; -webkit-box-sizing: border-box !important; -moz-box-sizing: border-box !important; box-sizing: border-box !important; margin: 0 !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding: 0 !important; padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; width: 0 !important; height: 0 !important; min-width: 0 !important; min-height: 0 !important; max-height: 0 !important; max-width: 0 !important; outline: 0 !important; border-collapse: collapse !important; border-spacing: 0 !important; border-color: #000 !important; border-top-color: #000 !important; border-right-color: #000 !important; border-bottom-color: #000 !important; border-left-color: #000 !important; border-style: solid !important; border-top-style: solid !important; border-right-style: solid !important; border-bottom-style: solid !important; border-left-style: solid !important; border-width: 0 !important; border-top-width: 0 !important; border-right-width: 0 !important; border-bottom-width: 0 !important; border-left-width: 0 !important; border: 1px !important; border-top: 1px !important; border-right: 1px !important; border-bottom: 1px !important; border-left: 1px !important; border-radius: 50% !important; border-top-right-radius: 50% !important; border-top-left-radius: 50% !important; border-bottom-left-radius: 50% !important; border-bottom-right-radius: 50% !important; -webkit-border-image: none !important; -moz-border-image: none !important; -o-border-image: none !important; border-image: none !important; background-attachment: fixed !important; background-color: #f00 !important; background-image: none !important; background-position-x: 0 !important; background-position-y: 0 !important; background-position: 0 !important; background-repeat: no-repeat !important; -webkit-background-clip: border !important; -moz-background-clip: border !important; background-clip: border-box !important; -webkit-background-origin: padding !important; -moz-background-origin: padding !important; background-origin: padding-box !important; background-size: 0 !important; background: none !important; -webkit-box-shadow: 0 1px 0 #000 !important; box-shadow: 0 1px 0 #000 !important; color: rgba(0,0,0,0.5) !important; table-layout: fixed !important; caption-side: top !important; empty-cells: hide !important; list-style-image: none !important; list-style-position: inside !important; list-style-type: disc !important; list-style: none !important; quotes: none !important; content: "lol" !important; counter-increment: none !important; counter-reset: none !important; vertical-align: middle !important; text-align: center !important; text-align-last: right !important; text-decoration: none !important; text-indent: 0 !important; text-justify: auto !important; text-outline: none !important; text-transform: capitalize !important; text-wrap: normal !important; -o-text-overflow: ellipsis !important; text-overflow: ellipsis !important; text-shadow: 0 1px 0 0 #fff !important; line-height: 1.5 !important; white-space: nowrap !important; word-spacing: normal !important; word-wrap: normal !important; 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; hyphens: manual !important; letter-spacing: normal !important; font-family: Monaco, monospace !important; font-size: 21px !important; font-style: italic !important; font-variant: small-caps !important; font-weight: bold !important; font-size-adjust: none !important; 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; filter: alpha(opacity=50) !important; opacity: 1 !important; -ms-filter: none !important; filter: none !important; resize: both !important; cursor: pointer !important; unicode-bidi: normal !important; direction: rtl !important; break-before: auto !important; break-after: auto !important; break-inside: none !important; orphans: 3 !important; widows: 3 !important; zoom: 1 !important; } ================================================ FILE: test/cases/importance.styl ================================================ @import 'nib' .test position: relative !important top: 0 !important right: 0 !important bottom: 0 !important left: 0 !important z-index: 0 !important float: left !important clear: left !important display: none !important visibility: hidden !important overflow: hidden !important overflow-x: scroll !important overflow-y: auto !important clip: auto !important box-sizing: border-box !important margin: 0 !important margin-top: 0 !important margin-right: 0 !important margin-bottom: 0 !important margin-left: 0 !important padding: 0 !important padding-top: 0 !important padding-right: 0 !important padding-bottom: 0 !important padding-left: 0 !important width: 0 !important height: 0 !important min-width: 0 !important min-height: 0 !important max-height: 0 !important max-width: 0 !important outline: 0 !important border-collapse: collapse !important border-spacing: 0 !important border-color: #000 !important border-top-color: #000 !important border-right-color: #000 !important border-bottom-color: #000 !important border-left-color: #000 !important border-style: solid !important border-top-style: solid !important border-right-style: solid !important border-bottom-style: solid !important border-left-style: solid !important border-width: 0 !important border-top-width: 0 !important border-right-width: 0 !important border-bottom-width: 0 !important border-left-width: 0 !important border: 1px !important border-top: 1px !important border-right: 1px !important border-bottom: 1px !important border-left: 1px !important border-radius: 50% !important border-top-right-radius: 50% !important border-top-left-radius: 50% !important border-bottom-left-radius: 50% !important border-bottom-right-radius: 50% !important border-image: none !important background-attachment: fixed !important background-color: red !important background-image: none !important background-position-x: 0 !important background-position-y: 0 !important background-position: 0 !important background-repeat: no-repeat !important background-clip: border-box !important background-origin: padding-box !important background-size: 0 !important background: none !important box-shadow: 0 1px 0 #000 !important color: rgba(0,0,0,0.5) !important table-layout: fixed !important caption-side: top !important empty-cells: hide !important list-style-image: none !important list-style-position: inside !important list-style-type: disc !important list-style: none !important quotes: none !important content: "lol" !important counter-increment: none !important counter-reset: none !important vertical-align: middle !important text-align: center !important text-align-last: right !important text-decoration: none !important text-indent: 0 !important text-justify: auto !important text-outline: none !important text-transform: capitalize !important text-wrap: normal !important text-overflow: ellipsis !important text-shadow: 0 1px 0 0 #FFF !important line-height: 1.5 !important white-space: nowrap !important word-spacing: normal !important word-wrap: normal !important word-break: normal !important tab-size: 4 !important hyphens: manual !important letter-spacing: normal !important font-family: Monaco, monospace !important font-size: 21px !important font-style: italic !important font-variant: small-caps !important font-weight: bold !important font-size-adjust: none !important font-stretch: condensed !important font: normal 16px/1.25 Arial, sans-serif !important opacity: 0.5 !important opacity: 1 !important resize: both !important cursor: pointer !important unicode-bidi: normal !important direction: rtl !important break-before: auto !important break-after: auto !important break-inside: none !important orphans: 3 !important widows: 3 !important zoom: 1 !important ================================================ FILE: test/cases/linear-gradient.css ================================================ body { background: -webkit-linear-gradient(#fff, #000); background: -moz-linear-gradient(#fff, #000); background: -o-linear-gradient(#fff, #000); background: -ms-linear-gradient(#fff, #000); background: linear-gradient(#fff, #000); } body { background: -webkit-linear-gradient(top, #fff, #000); background: -moz-linear-gradient(top, #fff, #000); background: -o-linear-gradient(top, #fff, #000); background: -ms-linear-gradient(top, #fff, #000); background: linear-gradient(to bottom, #fff, #000); } body { background: -webkit-linear-gradient(bottom, #fff, #000); background: -moz-linear-gradient(bottom, #fff, #000); background: -o-linear-gradient(bottom, #fff, #000); background: -ms-linear-gradient(bottom, #fff, #000); background: linear-gradient(to top, #fff, #000); } body { background: -webkit-linear-gradient(top left, #fff, #000); background: -moz-linear-gradient(top left, #fff, #000); background: -o-linear-gradient(top left, #fff, #000); background: -ms-linear-gradient(top left, #fff, #000); background: linear-gradient(to bottom right, #fff, #000); } body { background: -webkit-linear-gradient(45deg, #fff, #000); background: -moz-linear-gradient(45deg, #fff, #000); background: -o-linear-gradient(45deg, #fff, #000); background: -ms-linear-gradient(45deg, #fff, #000); background: linear-gradient(45deg, #fff, #000); } body { background: -webkit-linear-gradient(135deg, #fff, #000); background: -moz-linear-gradient(135deg, #fff, #000); background: -o-linear-gradient(135deg, #fff, #000); background: -ms-linear-gradient(135deg, #fff, #000); background: linear-gradient(-45deg, #fff, #000); } body { background: -webkit-linear-gradient(top left, #fff, #f00, #00f, #000); background: -moz-linear-gradient(top left, #fff, #f00, #00f, #000); background: -o-linear-gradient(top left, #fff, #f00, #00f, #000); background: -ms-linear-gradient(top left, #fff, #f00, #00f, #000); background: linear-gradient(to bottom right, #fff, #f00, #00f, #000); } body { background: -webkit-linear-gradient(bottom right, #fff, #000 80%); background: -moz-linear-gradient(bottom right, #fff, #000 80%); background: -o-linear-gradient(bottom right, #fff, #000 80%); background: -ms-linear-gradient(bottom right, #fff, #000 80%); background: linear-gradient(to top left, #fff, #000 80%); } body { background: -webkit-linear-gradient(right bottom, #fff, #000 80%); background: -moz-linear-gradient(right bottom, #fff, #000 80%); background: -o-linear-gradient(right bottom, #fff, #000 80%); background: -ms-linear-gradient(right bottom, #fff, #000 80%); background: linear-gradient(to left top, #fff, #000 80%); } body { background: -webkit-linear-gradient(right bottom, #fff 80%, #000); background: -moz-linear-gradient(right bottom, #fff 80%, #000); background: -o-linear-gradient(right bottom, #fff 80%, #000); background: -ms-linear-gradient(right bottom, #fff 80%, #000); background: linear-gradient(to left top, #fff 80%, #000); } body { background: -webkit-linear-gradient(right bottom, rgba(0,0,0,0.5) 80%, #000); background: -moz-linear-gradient(right bottom, rgba(0,0,0,0.5) 80%, #000); background: -o-linear-gradient(right bottom, rgba(0,0,0,0.5) 80%, #000); background: -ms-linear-gradient(right bottom, rgba(0,0,0,0.5) 80%, #000); background: linear-gradient(to left top, rgba(0,0,0,0.5) 80%, #000); } body { background: -webkit-linear-gradient(right bottom, hsla(0,0%,0%,0.5) 80.5%, #000); background: -moz-linear-gradient(right bottom, hsla(0,0%,0%,0.5) 80.5%, #000); background: -o-linear-gradient(right bottom, hsla(0,0%,0%,0.5) 80.5%, #000); background: -ms-linear-gradient(right bottom, hsla(0,0%,0%,0.5) 80.5%, #000); background: linear-gradient(to left top, hsla(0,0%,0%,0.5) 80.5%, #000); } body { background: -webkit-linear-gradient(right bottom, hsla(0,0%,0%,0.5) 80.5%, #000); background: -moz-linear-gradient(right bottom, hsla(0,0%,0%,0.5) 80.5%, #000); background: -o-linear-gradient(right bottom, hsla(0,0%,0%,0.5) 80.5%, #000); background: -ms-linear-gradient(right bottom, hsla(0,0%,0%,0.5) 80.5%, #000); background: linear-gradient(to left top, hsla(0,0%,0%,0.5) 80.5%, #000); } body { background: -webkit-linear-gradient(right bottom, #fff 20px, #000); background: -moz-linear-gradient(right bottom, #fff 20px, #000); background: -o-linear-gradient(right bottom, #fff 20px, #000); background: -ms-linear-gradient(right bottom, #fff 20px, #000); background: linear-gradient(to left top, #fff 20px, #000); } body { background: -webkit-linear-gradient(top, #fff, #000); background: -moz-linear-gradient(top, #fff, #000); background: -ms-linear-gradient(top, #fff, #000); background: -o-linear-gradient(top, #fff, #000); background: linear-gradient(to bottom, #fff, #000); } body { background: -webkit-linear-gradient(top, #fff, #000), #fff; background: -moz-linear-gradient(top, #fff, #000), #fff; background: -ms-linear-gradient(top, #fff, #000), #fff; background: -o-linear-gradient(top, #fff, #000), #fff; background: linear-gradient(to bottom, #fff, #000), #fff; } body { -webkit-border-image: -webkit-linear-gradient(top, #fff, #000) 20% stretch stretch; -moz-border-image: -moz-linear-gradient(top, #fff, #000) 20% stretch stretch; -o-border-image: -o-linear-gradient(top, #fff, #000) 20% stretch stretch; border-image: linear-gradient(to bottom, #fff, #000) 20% stretch stretch; } body { -webkit-border-image: -webkit-linear-gradient(top, #fff, #000) 20% stretch stretch; -moz-border-image: -moz-linear-gradient(top, #fff, #000) 20% stretch stretch; -o-border-image: -o-linear-gradient(top, #fff, #000) 20% stretch stretch; border-image: linear-gradient(to bottom, #fff, #000) 20% fill stretch stretch; } body { cursor: -webkit-linear-gradient(50deg, #f00, #0f0); cursor: -moz-linear-gradient(50deg, #f00, #0f0); cursor: -ms-linear-gradient(50deg, #f00, #0f0); cursor: -o-linear-gradient(50deg, #f00, #0f0); cursor: linear-gradient(40deg, #f00, #0f0); } body { list-style: -webkit-linear-gradient(50deg, #f00, #0f0); list-style: -moz-linear-gradient(50deg, #f00, #0f0); list-style: -ms-linear-gradient(50deg, #f00, #0f0); list-style: -o-linear-gradient(50deg, #f00, #0f0); list-style: linear-gradient(40deg, #f00, #0f0); } body { list-style-image: -webkit-linear-gradient(50deg, #f00, #0f0); list-style-image: -moz-linear-gradient(50deg, #f00, #0f0); list-style-image: -ms-linear-gradient(50deg, #f00, #0f0); list-style-image: -o-linear-gradient(50deg, #f00, #0f0); list-style-image: linear-gradient(40deg, #f00, #0f0); } ================================================ FILE: test/cases/linear-gradient.styl ================================================ @import 'nib/vendor' @import 'nib/gradients' body background: linear-gradient(white, black) body background: linear-gradient(top, white, black) body background: linear-gradient(to top, white, black) body background: linear-gradient(to bottom right, white, black) body background: linear-gradient(45deg, white, black) body background: linear-gradient(-45deg, white, black) body background: linear-gradient(top left, white, red, blue, black) body background: linear-gradient(bottom right, white, black 80%) body background: linear-gradient(right bottom, white, 80% black) body background: linear-gradient(right bottom, 80% white, black) body background: linear-gradient(right bottom, 80% rgba(#000,0.5), black) body background: linear-gradient(right bottom, 80.5% hsla(0,0,0,0.5), black) body background: linear-gradient(right bottom, 80.5% hsla(0,0%,0%,0.5), black) body background: linear-gradient(right bottom, 20px white, black) vendor-prefixes = webkit moz ms o official body background: linear-gradient(top, white, black) body background: linear-gradient(top, white, black), white body border-image: linear-gradient(top, #fff, #000) 20% stretch stretch; body border-image: linear-gradient(top, #fff, #000) 20% fill stretch stretch; gradient-var = linear-gradient(40deg, red, lime) body cursor: gradient-var body list-style: gradient-var body list-style-image: gradient-var ================================================ FILE: test/cases/multiple-gradients.css ================================================ .test1 { background: -webkit-linear-gradient(bottom, #fff, #000), -webkit-linear-gradient(top, #000, #fff); background: -moz-linear-gradient(bottom, #fff, #000), -moz-linear-gradient(top, #000, #fff); background: -o-linear-gradient(bottom, #fff, #000), -o-linear-gradient(top, #000, #fff); background: -ms-linear-gradient(bottom, #fff, #000), -ms-linear-gradient(top, #000, #fff); background: linear-gradient(to top, #fff, #000), linear-gradient(to bottom, #000, #fff); } .test2 { background: #fff -webkit-linear-gradient(bottom, #000, #fff) 0 0 no-repeat, -webkit-linear-gradient(top, #000, #fff) 10px bottom repeat-y; background: #fff -moz-linear-gradient(bottom, #000, #fff) 0 0 no-repeat, -moz-linear-gradient(top, #000, #fff) 10px bottom repeat-y; background: #fff -o-linear-gradient(bottom, #000, #fff) 0 0 no-repeat, -o-linear-gradient(top, #000, #fff) 10px bottom repeat-y; background: #fff -ms-linear-gradient(bottom, #000, #fff) 0 0 no-repeat, -ms-linear-gradient(top, #000, #fff) 10px bottom repeat-y; background: #fff linear-gradient(to top, #000, #fff) 0 0 no-repeat, linear-gradient(to bottom, #000, #fff) 10px bottom repeat-y; } .test3 { background-image: -webkit-linear-gradient(bottom, #fff, #000), url("a.png"), -webkit-linear-gradient(top, #000, #fff); background-image: -moz-linear-gradient(bottom, #fff, #000), url("a.png"), -moz-linear-gradient(top, #000, #fff); background-image: -o-linear-gradient(bottom, #fff, #000), url("a.png"), -o-linear-gradient(top, #000, #fff); background-image: -ms-linear-gradient(bottom, #fff, #000), url("a.png"), -ms-linear-gradient(top, #000, #fff); background-image: linear-gradient(to top, #fff, #000), url("a.png"), linear-gradient(to bottom, #000, #fff); } .test4 { background: -webkit-linear-gradient(top, #000, #fff), -webkit-linear-gradient(bottom, #fff, #000); background: -moz-linear-gradient(top, #000, #fff), -moz-linear-gradient(bottom, #fff, #000); background: -o-linear-gradient(top, #000, #fff), -o-linear-gradient(bottom, #fff, #000); background: -ms-linear-gradient(top, #000, #fff), -ms-linear-gradient(bottom, #fff, #000); background: linear-gradient(to bottom, #000, #fff), linear-gradient(to top, #fff, #000); } ================================================ FILE: test/cases/multiple-gradients.styl ================================================ @import 'nib/vendor' @import 'nib/gradients' .test1 background: linear-gradient(to top, white, black), linear-gradient(to bottom, black, white) .test2 background: #fff \ linear-gradient(to top, black, white) 0 0 no-repeat, linear-gradient(to bottom, black, white) 10px bottom repeat-y .test3 background-image: linear-gradient(to top, white, black), url(a.png), linear-gradient(to bottom, black, white) gradient1 = linear-gradient(to top, white, black) gradient2 = linear-gradient(to bottom, black, white) .test4 background: gradient2, gradient1 ================================================ FILE: test/cases/normalize-reset.css ================================================ html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; } article, details, section, summary, aside, main, menu, nav, figcaption, figure, footer, header, hgroup { display: block; } audio, canvas, progress, video { display: inline-block; vertical-align: baseline; } audio:not([controls]) { display: none; height: 0; } [hidden], template { display: none; } a { background-color: transparent; } a:active, a:hover { outline: 0; } abbr[title] { border-bottom: 1px dotted; } dfn { font-style: italic; } mark { background: #ff0; color: #000; } b, strong { font-weight: bold; } h1 { font-size: 2em; margin: 0.67em 0; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } img { border: 0; } svg:not(:root) { overflow: hidden; } figure { margin: 1em 40px; } hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; } pre { overflow: auto; } code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; } button { overflow: visible; } button, select { text-transform: none; } button, html input[type='button'], input[type='reset'], input[type='submit'] { cursor: pointer; -webkit-appearance: button; } button[disabled], html input[disabled] { cursor: default; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } input { line-height: normal; } input[type='checkbox'], input[type='radio'] { box-sizing: border-box; padding: 0; } input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button { height: auto; } input[type='search'] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type='search']::-webkit-search-cancel-button, input[type='search']::-webkit-search-decoration { -webkit-appearance: none; } fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { border: 0; padding: 0; } textarea { overflow: auto; } optgroup { font-weight: bold; } table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } ================================================ FILE: test/cases/normalize-reset.styl ================================================ @import 'nib/normalize' normalize-css() ================================================ FILE: test/cases/radial-gradient.css ================================================ body { background: -webkit-radial-gradient(50% 0, farthest-side, rgba(9,36,95,0.175), rgba(9,36,95,0)); background: -moz-radial-gradient(50% 0, farthest-side, rgba(9,36,95,0.175), rgba(9,36,95,0)); background: -o-radial-gradient(50% 0, farthest-side, rgba(9,36,95,0.175), rgba(9,36,95,0)); background: -ms-radial-gradient(50% 0, farthest-side, rgba(9,36,95,0.175), rgba(9,36,95,0)); background: radial-gradient(50% 0, farthest-side, rgba(9,36,95,0.175), rgba(9,36,95,0)); } ================================================ FILE: test/cases/radial-gradient.styl ================================================ @import 'nib/vendor' @import 'nib/gradients' body background: radial-gradient(50% 0, farthest-side, rgba(9,36,95,0.175), rgba(9,36,95,0)) ================================================ FILE: test/cases/relative.css ================================================ #login { position: relative; left: 10px; } ================================================ FILE: test/cases/shadow-stroke.css ================================================ button { text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; } button { text-shadow: -1px -1px 0 rgba(0,0,0,0.5), 1px -1px 0 rgba(0,0,0,0.5), -1px 1px 0 rgba(0,0,0,0.5), 1px 1px 0 rgba(0,0,0,0.5); } button { text-shadow: -1px -1px 0 #f00, 1px -1px 0 #f00, -1px 1px 0 #f00, 1px 1px 0 #f00; } ================================================ FILE: test/cases/shadow-stroke.styl ================================================ @import 'nib/text/shadow-stroke' button shadow-stroke(#000) button shadow-stroke(rgba(0, 0, 0, 0.5)) button shadow-stroke(red) ================================================ FILE: test/cases/text.ellipsis.css ================================================ button { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } button { overflow: hidden; text-overflow: ellipsis; } button { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } ================================================ FILE: test/cases/text.ellipsis.styl ================================================ @import 'nib/text/ellipsis' @import 'nib/overflow' button ellipsis() button ellipsis(false) button overflow: ellipsis ================================================ FILE: test/cases/vendor.css ================================================ button { -webkit-box-shadow: 1px 1px 5px #eee; box-shadow: 1px 1px 5px #eee; } button { opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); } button { opacity: 0.75; white-space: nowrap; } button { -webkit-animation-name: myAnimation; -moz-animation-name: myAnimation; animation-name: myAnimation; -webkit-animation-delay: 1s; -moz-animation-delay: 1s; animation-delay: 1s; -webkit-animation-duration: 10s; -moz-animation-duration: 10s; animation-duration: 10s; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; -moz-animation-direction: alternate; animation-direction: alternate; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: running; -moz-animation-play-state: running; animation-play-state: running; -webkit-animation-timing-function: ease; -moz-animation-timing-function: ease; animation-timing-function: ease; } button { -webkit-animation: myAnimation 1s ease; -moz-animation: myAnimation 1s ease; animation: myAnimation 1s ease; } button { -webkit-appearance: none; -moz-appearance: none; appearance: none; } section { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-rule: 1px solid #bbb; -moz-column-rule: 1px solid #bbb; column-rule: 1px solid #bbb; -webkit-column-gap: 2em; -moz-column-gap: 2em; column-gap: 2em; } section { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-rule-width: 1px; -moz-column-rule-width: 1px; column-rule-width: 1px; -webkit-column-rule-style: solid; -moz-column-rule-style: solid; column-rule-style: solid; -webkit-column-rule-color: #bbb; -moz-column-rule-color: #bbb; column-rule-color: #bbb; -webkit-column-width: 200px; -moz-column-width: 200px; column-width: 200px; } section { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-rule-width: 1px; -moz-column-rule-width: 1px; column-rule-width: 1px; -webkit-column-rule-style: solid; -moz-column-rule-style: solid; column-rule-style: solid; -webkit-column-rule-color: #bbb; -moz-column-rule-color: #bbb; column-rule-color: #bbb; -webkit-column-gap: 2em; -moz-column-gap: 2em; column-gap: 2em; } button { -webkit-background-origin: border, padding; -moz-background-origin: border, padding; background-origin: border-box, padding-box; -webkit-background-clip: border, padding; -moz-background-clip: border, padding; background-clip: border-box, padding-box; } button { -o-transition: all 0.1s ease-in-out 1s; -webkit-transition: all 0.1s ease-in-out 1s; -moz-transition: all 0.1s ease-in-out 1s; transition: all 0.1s ease-in-out 1s; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } button { -o-transition-property: all; -webkit-transition-property: all; -moz-transition-property: all; transition-property: all; -o-transition-duration: 0.1s; -webkit-transition-duration: 0.1s; -moz-transition-duration: 0.1s; transition-duration: 0.1s; -o-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; -o-transition-delay: 1s; -webkit-transition-delay: 1s; -moz-transition-delay: 1s; transition-delay: 1s; } button { -o-transform: rotateY(45deg); -webkit-transform: rotateY(45deg); -moz-transform: rotateY(45deg); transform: rotateY(45deg); } button { -o-transform: perspective(500px); -webkit-transform: perspective(500px); -moz-transform: perspective(500px); transform: perspective(500px); } button { -webkit-perspective: 500; -moz-perspective: 500; perspective: 500; } section { -o-border-image: url("image.png") 20% stretch stretch; -webkit-border-image: url("image.png") 20% stretch stretch; -moz-border-image: url("image.png") 20% stretch stretch; border-image: url("image.png") 20% stretch stretch; } section { -o-border-image: url("image.png") 20% stretch stretch; -webkit-border-image: url("image.png") 20% stretch stretch; -moz-border-image: url("image.png") 20% stretch stretch; border-image: url("image.png") 20% fill stretch stretch; } p { -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; } section { -webkit-overflow-scrolling: touch; overflow-scrolling: touch; } ================================================ FILE: test/cases/vendor.inherit.css ================================================ button { -webkit-box-shadow: inherit; box-shadow: inherit; } button { opacity: inherit; -ms-filter: inherit; filter: inherit; } button { opacity: inherit; white-space: inherit; } button { -webkit-animation-name: inherit; -moz-animation-name: inherit; animation-name: inherit; -webkit-animation-delay: inherit; -moz-animation-delay: inherit; animation-delay: inherit; -webkit-animation-duration: inherit; -moz-animation-duration: inherit; animation-duration: inherit; -webkit-animation-iteration-count: inherit; -moz-animation-iteration-count: inherit; animation-iteration-count: inherit; -webkit-animation-direction: inherit; -moz-animation-direction: inherit; animation-direction: inherit; -webkit-animation-fill-mode: inherit; -moz-animation-fill-mode: inherit; animation-fill-mode: inherit; -webkit-animation-play-state: inherit; -moz-animation-play-state: inherit; animation-play-state: inherit; -webkit-animation-timing-function: inherit; -moz-animation-timing-function: inherit; animation-timing-function: inherit; } button { -webkit-animation: inherit; -moz-animation: inherit; animation: inherit; } button { -webkit-appearance: inherit; -moz-appearance: inherit; appearance: inherit; } section { -webkit-column-count: inherit; -moz-column-count: inherit; column-count: inherit; -webkit-column-rule: inherit; -moz-column-rule: inherit; column-rule: inherit; -webkit-column-gap: inherit; -moz-column-gap: inherit; column-gap: inherit; } section { -webkit-column-count: inherit; -moz-column-count: inherit; column-count: inherit; -webkit-column-rule-width: inherit; -moz-column-rule-width: inherit; column-rule-width: inherit; -webkit-column-rule-style: inherit; -moz-column-rule-style: inherit; column-rule-style: inherit; -webkit-column-rule-color: inherit; -moz-column-rule-color: inherit; column-rule-color: inherit; -webkit-column-width: inherit; -moz-column-width: inherit; column-width: inherit; } section { -webkit-column-count: inherit; -moz-column-count: inherit; column-count: inherit; -webkit-column-rule-width: inherit; -moz-column-rule-width: inherit; column-rule-width: inherit; -webkit-column-rule-style: inherit; -moz-column-rule-style: inherit; column-rule-style: inherit; -webkit-column-rule-color: inherit; -moz-column-rule-color: inherit; column-rule-color: inherit; -webkit-column-gap: inherit; -moz-column-gap: inherit; column-gap: inherit; } button { -webkit-background-origin: inherit; -moz-background-origin: inherit; background-origin: inherit; -webkit-background-clip: inherit; -moz-background-clip: inherit; background-clip: inherit; } button { -o-transition: inherit; -webkit-transition: inherit; -moz-transition: inherit; transition: inherit; -webkit-backface-visibility: inherit; -moz-backface-visibility: inherit; backface-visibility: inherit; } button { -o-transition-property: inherit; -webkit-transition-property: inherit; -moz-transition-property: inherit; transition-property: inherit; -o-transition-duration: inherit; -webkit-transition-duration: inherit; -moz-transition-duration: inherit; transition-duration: inherit; -o-transition-timing-function: inherit; -webkit-transition-timing-function: inherit; -moz-transition-timing-function: inherit; transition-timing-function: inherit; -o-transition-delay: inherit; -webkit-transition-delay: inherit; -moz-transition-delay: inherit; transition-delay: inherit; } button { -o-transform: inherit; -webkit-transform: inherit; -moz-transform: inherit; transform: inherit; } button { -o-transform: inherit; -webkit-transform: inherit; -moz-transform: inherit; transform: inherit; } button { -webkit-perspective: inherit; -moz-perspective: inherit; perspective: inherit; } section { -o-border-image: inherit; -webkit-border-image: inherit; -moz-border-image: inherit; border-image: inherit; } section { -o-border-image: inherit; -webkit-border-image: inherit; -moz-border-image: inherit; border-image: inherit; } p { -webkit-hyphens: inherit; -moz-hyphens: inherit; hyphens: inherit; } section { -webkit-overflow-scrolling: inherit; overflow-scrolling: inherit; } ================================================ FILE: test/cases/vendor.inherit.styl ================================================ @import 'nib/vendor' @import 'nib/gradients' vendor-prefixes = webkit moz official button box-shadow: inherit button opacity: inherit support-for-ie = false button opacity: inherit whitespace: inherit button animation-name: inherit; animation-delay: inherit; animation-duration: inherit; animation-iteration-count: inherit; animation-direction: inherit; animation-fill-mode: inherit; animation-play-state: inherit; animation-timing-function: inherit button animation: inherit; button appearance: inherit; section column-count: inherit; column-rule: inherit; column-gap: inherit; section column-count: inherit; column-rule-width: inherit; column-rule-style: inherit; column-rule-color: inherit; column-width: inherit; section column-count: inherit; column-rule-width: inherit; column-rule-style: inherit; column-rule-color: inherit; column-gap: inherit; prepend(vendor-prefixes, o) button background-origin: inherit; background-clip: inherit; button transition: inherit backface-visibility: inherit button transition-property: inherit transition-duration: inherit transition-timing-function: inherit transition-delay: inherit button transform: inherit button transform: inherit button perspective: inherit section border-image: inherit section border-image: inherit; p hyphens: inherit section overflow-scrolling: inherit ================================================ FILE: test/cases/vendor.initial.css ================================================ button { -webkit-box-shadow: initial; box-shadow: initial; } button { opacity: initial; -ms-filter: initial; filter: initial; } button { opacity: initial; white-space: initial; } button { -webkit-animation-name: initial; -moz-animation-name: initial; animation-name: initial; -webkit-animation-delay: initial; -moz-animation-delay: initial; animation-delay: initial; -webkit-animation-duration: initial; -moz-animation-duration: initial; animation-duration: initial; -webkit-animation-iteration-count: initial; -moz-animation-iteration-count: initial; animation-iteration-count: initial; -webkit-animation-direction: initial; -moz-animation-direction: initial; animation-direction: initial; -webkit-animation-fill-mode: initial; -moz-animation-fill-mode: initial; animation-fill-mode: initial; -webkit-animation-play-state: initial; -moz-animation-play-state: initial; animation-play-state: initial; -webkit-animation-timing-function: initial; -moz-animation-timing-function: initial; animation-timing-function: initial; } button { -webkit-animation: initial; -moz-animation: initial; animation: initial; } button { -webkit-appearance: initial; -moz-appearance: initial; appearance: initial; } section { -webkit-column-count: initial; -moz-column-count: initial; column-count: initial; -webkit-column-rule: initial; -moz-column-rule: initial; column-rule: initial; -webkit-column-gap: initial; -moz-column-gap: initial; column-gap: initial; } section { -webkit-column-count: initial; -moz-column-count: initial; column-count: initial; -webkit-column-rule-width: initial; -moz-column-rule-width: initial; column-rule-width: initial; -webkit-column-rule-style: initial; -moz-column-rule-style: initial; column-rule-style: initial; -webkit-column-rule-color: initial; -moz-column-rule-color: initial; column-rule-color: initial; -webkit-column-width: initial; -moz-column-width: initial; column-width: initial; } section { -webkit-column-count: initial; -moz-column-count: initial; column-count: initial; -webkit-column-rule-width: initial; -moz-column-rule-width: initial; column-rule-width: initial; -webkit-column-rule-style: initial; -moz-column-rule-style: initial; column-rule-style: initial; -webkit-column-rule-color: initial; -moz-column-rule-color: initial; column-rule-color: initial; -webkit-column-gap: initial; -moz-column-gap: initial; column-gap: initial; } button { -webkit-background-origin: initial; -moz-background-origin: initial; background-origin: initial; -webkit-background-clip: initial; -moz-background-clip: initial; background-clip: initial; } button { -o-transition: initial; -webkit-transition: initial; -moz-transition: initial; transition: initial; -webkit-backface-visibility: initial; -moz-backface-visibility: initial; backface-visibility: initial; } button { -o-transition-property: initial; -webkit-transition-property: initial; -moz-transition-property: initial; transition-property: initial; -o-transition-duration: initial; -webkit-transition-duration: initial; -moz-transition-duration: initial; transition-duration: initial; -o-transition-timing-function: initial; -webkit-transition-timing-function: initial; -moz-transition-timing-function: initial; transition-timing-function: initial; -o-transition-delay: initial; -webkit-transition-delay: initial; -moz-transition-delay: initial; transition-delay: initial; } button { -o-transform: initial; -webkit-transform: initial; -moz-transform: initial; transform: initial; } button { -o-transform: initial; -webkit-transform: initial; -moz-transform: initial; transform: initial; } button { -webkit-perspective: initial; -moz-perspective: initial; perspective: initial; } section { -o-border-image: initial; -webkit-border-image: initial; -moz-border-image: initial; border-image: initial; } section { -o-border-image: initial; -webkit-border-image: initial; -moz-border-image: initial; border-image: initial; } p { -webkit-hyphens: initial; -moz-hyphens: initial; hyphens: initial; } section { -webkit-overflow-scrolling: initial; overflow-scrolling: initial; } ================================================ FILE: test/cases/vendor.initial.styl ================================================ @import 'nib/vendor' @import 'nib/gradients' vendor-prefixes = webkit moz official button box-shadow: initial button opacity: initial support-for-ie = false button opacity: initial whitespace: initial button animation-name: initial; animation-delay: initial; animation-duration: initial; animation-iteration-count: initial; animation-direction: initial; animation-fill-mode: initial; animation-play-state: initial; animation-timing-function: initial button animation: initial; button appearance: initial; section column-count: initial; column-rule: initial; column-gap: initial; section column-count: initial; column-rule-width: initial; column-rule-style: initial; column-rule-color: initial; column-width: initial; section column-count: initial; column-rule-width: initial; column-rule-style: initial; column-rule-color: initial; column-gap: initial; prepend(vendor-prefixes, o) button background-origin: initial; background-clip: initial; button transition: initial backface-visibility: initial button transition-property: initial transition-duration: initial transition-timing-function: initial transition-delay: initial button transform: initial button transform: initial button perspective: initial section border-image: initial section border-image: initial; p hyphens: initial section overflow-scrolling: initial ================================================ FILE: test/cases/vendor.placeholder.css ================================================ body::-webkit-input-placeholder { color: #333; font-weight: normal; font-family: Helvetica, arial, sans-serif; } body:-moz-placeholder { color: #333; font-weight: normal; font-family: Helvetica, arial, sans-serif; } body::-moz-placeholder { color: #333; font-weight: normal; font-family: Helvetica, arial, sans-serif; } body:-ms-input-placeholder { color: #333; font-weight: normal; font-family: Helvetica, arial, sans-serif; } .placeholder-red::-webkit-input-placeholder { color: #f00; } .placeholder-red:-moz-placeholder { color: #f00; } .placeholder-red::-moz-placeholder { color: #f00; } .placeholder-red:-ms-input-placeholder { color: #f00; } .placeholder-green::-webkit-input-placeholder { color: #008000; } .placeholder-green:-moz-placeholder { color: #008000; } .placeholder-green::-moz-placeholder { color: #008000; } .placeholder-green:-ms-input-placeholder { color: #008000; } .input-placeholder-gray::-webkit-input-placeholder { color: #808080; } .input-placeholder-gray:-moz-placeholder { color: #808080; } .input-placeholder-gray::-moz-placeholder { color: #808080; } .input-placeholder-gray:-ms-input-placeholder { color: #808080; } textarea::-webkit-input-placeholder { font-style: italic; font-weight: bold; padding: 4px 10px; } textarea:-moz-placeholder { font-style: italic; font-weight: bold; padding: 4px 10px; } textarea::-moz-placeholder { font-style: italic; font-weight: bold; padding: 4px 10px; } textarea:-ms-input-placeholder { font-style: italic; font-weight: bold; padding: 4px 10px; } ================================================ FILE: test/cases/vendor.placeholder.styl ================================================ @import 'nib/vendor' $placeholderFont = Helvetica, arial, sans-serif body placeholder(color #333, font-weight normal, font-family $placeholderFont) .placeholder-red placeholder(color red,) green-placeholder() color green .placeholder-green placeholder(green-placeholder) .input-placeholder-gray input-placeholder(color gray,) textarea placeholder((font-style italic) (font-weight bold) (padding '4px 10px')) ================================================ FILE: test/cases/vendor.styl ================================================ @import 'nib/vendor' @import 'nib/gradients' vendor-prefixes = webkit moz official button box-shadow: 1px 1px 5px #eee button opacity: 0.5 support-for-ie = false button opacity: 0.75 whitespace: no-wrap button animation-name: myAnimation; animation-delay: 1s; animation-duration: 10s; animation-iteration-count: infinite; animation-direction: alternate; animation-fill-mode: both; animation-play-state: running; animation-timing-function: ease button animation: myAnimation 1s ease; button appearance: none; section column-count: 2; column-rule: 1px solid #bbb; column-gap: 2em; section column-count: 2; column-rule-width: 1px; column-rule-style: solid; column-rule-color: #bbb; column-width: 200px; section column-count: 2; column-rule-width: 1px; column-rule-style: solid; column-rule-color: #bbb; column-gap: 2em; prepend(vendor-prefixes, o) button background-origin: border-box, padding-box; background-clip: border-box, padding-box; button transition: all 0.1s ease-in-out 1s backface-visibility: hidden button transition-property: all transition-duration: 0.1s transition-timing-function: ease-in-out transition-delay: 1s button transform: rotateY(45deg) button transform: perspective(500px) button perspective: 500 section border-image: url("image.png") 20% stretch stretch; section border-image: url("image.png") 20% fill stretch stretch; p hyphens: auto section overflow-scrolling: touch ================================================ FILE: test/cases/vendor.values.css ================================================ button { -webkit-transition: -webkit-transform; -moz-transition: -moz-transform; -o-transition: -o-transform; -ms-transition: -ms-transform; transition: transform; } button { -webkit-transition: -webkit-transform 0.3s 0.2s linear; -moz-transition: -moz-transform 0.3s 0.2s linear; -o-transition: -o-transform 0.3s 0.2s linear; -ms-transition: -ms-transform 0.3s 0.2s linear; transition: transform 0.3s 0.2s linear; } button { -webkit-transition: -webkit-transform cubic-bezier(1, 1, 1); -moz-transition: -moz-transform cubic-bezier(1, 1, 1); -o-transition: -o-transform cubic-bezier(1, 1, 1); -ms-transition: -ms-transform cubic-bezier(1, 1, 1); transition: transform cubic-bezier(1, 1, 1); } button { -webkit-transition: -webkit-transform 2s, width 0.3s linear, height; -moz-transition: -moz-transform 2s, width 0.3s linear, height; -o-transition: -o-transform 2s, width 0.3s linear, height; -ms-transition: -ms-transform 2s, width 0.3s linear, height; transition: transform 2s, width 0.3s linear, height; } button { -webkit-transition: height, -webkit-transform 2s, width 0.3s linear; -moz-transition: height, -moz-transform 2s, width 0.3s linear; -o-transition: height, -o-transform 2s, width 0.3s linear; -ms-transition: height, -ms-transform 2s, width 0.3s linear; transition: height, transform 2s, width 0.3s linear; } button { -webkit-transition: -webkit-transform 1s !important; -moz-transition: -moz-transform 1s !important; -o-transition: -o-transform 1s !important; -ms-transition: -ms-transform 1s !important; transition: transform 1s !important; } button { -webkit-transition: -webkit-transform, height !important; -moz-transition: -moz-transform, height !important; -o-transition: -o-transform, height !important; -ms-transition: -ms-transform, height !important; transition: transform, height !important; } button { -webkit-transition: -webkit-transform 1s, width 2s linear, cubic-bezier(1, 1, 1); -moz-transition: -moz-transform 1s, width 2s linear, cubic-bezier(1, 1, 1); -o-transition: -o-transform 1s, width 2s linear, cubic-bezier(1, 1, 1); -ms-transition: -ms-transform 1s, width 2s linear, cubic-bezier(1, 1, 1); transition: transform 1s, width 2s linear, cubic-bezier(1, 1, 1); } ================================================ FILE: test/cases/vendor.values.styl ================================================ @import 'nib/vendor' button transition: transform button transition: transform .3s .2s linear button transition: transform cubic-bezier(1,1,1) button transition: transform 2s, width .3s linear, height button transition: height, transform 2s, width .3s linear button transition: transform 1s !important button transition: transform, height !important button transition: transform 1s, width 2s linear, cubic-bezier(1,1,1) ================================================ FILE: test/clearfix.styl ================================================ @import 'nib/clearfix' support-for-ie = true #clearfix-left-only, #clearfix-left-right clearfix() background: blue div background: green margin: 10px width: 47% div.left float: left div.right float: right #clearfix-left-right margin-top: 10px ================================================ FILE: test/color-images.styl ================================================ @import 'nib/color-image' #color-images .rgba background: color-image(rgba(blue, 0.3)) .rgb background: color-image(rgb(200, 150, 150)) .hex background: color-image(#fff) .hexa background: color-image(#ffffff80) .hexa-short background: color-image(#0005) ================================================ FILE: test/gradients.styl ================================================ @import 'nib/gradients' #gradients tr height: 50px color: white td padding: 0 width: 150px &:first-child border-right: 1px solid #fff #gradients tr:nth-child(1) td:first-child background: linear-gradient(top, yellow, blue) td:last-child background: linear-gradient-image(50px, yellow, blue) tr:nth-child(2) td:first-child background: linear-gradient(top, red, green, yellow, blue) td:last-child background: linear-gradient-image(50px, red, green, yellow, blue) tr:nth-child(3) td:first-child background: linear-gradient(top, red, green 10%, 90% yellow, blue) td:last-child background: linear-gradient-image(50px, red, green 10%, 90% yellow, blue) tr:nth-child(4) td:first-child background: linear-gradient(top, red 15, green 80%, white, 90% yellow, blue) td:last-child background: linear-gradient-image(50px, red 15, green 80%, white, 90% yellow, blue) tr:nth-child(5) td:first-child background: linear-gradient(bottom, #fff, #000) td:last-child background: linear-gradient-image(50px bottom, #fff, #000) tr:nth-child(6) td:first-child background: linear-gradient(left, #fff, #000) td:last-child background: linear-gradient-image(150px left, #fff, #000) tr:nth-child(7) td:first-child background: linear-gradient(right, #008AB4, #E9FAFF, 2% #90E4FD, #1FCBFF, 80% #008AB4) td:last-child background: linear-gradient-image(150px right, #008AB4, #E9FAFF, 2% #90E4FD, #1FCBFF, 80% #008AB4) tr:nth-child(8) td:first-child background: linear-gradient(top, red, 50% green, blue) td:last-child background: linear-gradient-image(50px top, red, 50% green, blue) tr:nth-child(9) td:first-child background: linear-gradient(50px top, red, green, yellow, blue) ================================================ FILE: test/index.pug ================================================ html head title Nib link(rel='stylesheet', href='/test.css') link(rel='stylesheet', href='/gradients.css') link(rel='stylesheet', href='/buttons.css') link(rel='stylesheet', href='/clearfix.css') link(rel='stylesheet', href='/color-images.css') script(src='/jquery.min.js') script. $(function(){ $(':button, :submit, a.button').click(function(){ return false; }); }); body h2 Gradients table#gradients - var n = 9 tbody - while (n--) tr td td h2 Color images #color-images .rgba rgba() .hexa-short #0003 .hexa #ffffff80 .rgb rgb() .hex #fff h2 Clearfix div#clearfix-left-only div | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut commodo | turpis quis mauris tempus commodo a non tellus. Sed eu convallis | mauris. Donec scelerisque lacus quis orci viverra tincidunt. Nunc sed | risus lectus. Proin vulputate elit sed eros consectetur interdum. div#clearfix-left-right div.left | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut commodo | turpis quis mauris tempus commodo a non tellus. Sed eu convallis | mauris. Donec scelerisque lacus quis orci viverra tincidunt. Nunc sed | risus lectus. Proin vulputate elit sed eros consectetur interdum. div.right | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut commodo | turpis quis mauris tempus commodo a non tellus. Sed eu convallis | mauris. Donec scelerisque lacus quis orci viverra tincidunt. Nunc sed | risus lectus. Proin vulputate elit sed eros consectetur interdum. ================================================ FILE: test/public/.gitignore ================================================ ================================================ FILE: test/runner.js ================================================ /** * Module dependencies. */ var stylus = require('stylus'), nib = require('../'), expect = require('chai').expect, fs = require('fs'); /** * Read test/cases directory and filter all `.styl` files, then remove * this extension for each file in the collection and prepare to test. */ var cases = fs.readdirSync('test/cases').filter(function(file){ return ~file.indexOf('.styl'); // bitwise flip to treat result as truthy. }).map(function(file){ return file.replace('.styl', ''); }); /* * For each `.styl` and `.css` pair in `test/cases`, compile stylus to css * and compare actual result to expected css. */ describe('integration', function(){ cases.forEach(function(test){ var name = test.replace(/[-.]/g, ' '); it(name, function(){ var path = 'test/cases/' + test + '.styl'; var styl = fs.readFileSync(path, 'utf8').replace(/\r/g, ''); var css = fs.readFileSync('test/cases/' + test + '.css', 'utf8').replace(/\r/g, '').trim(); var style = stylus(styl) .use(nib()) .set('filename', path) .define('url', stylus.url()); if (~test.indexOf('compress')) { style.set('compress', true); } style.render(function(err, actual){ if (err) throw err; expect(actual.trim()).equal(css); }); }); }); }); ================================================ FILE: test/server.js ================================================ /** * Module dependencies. */ var stylus = require('stylus'), serveStatic = require('serve-static'), connect = require('connect'), pug = require('pug'), nib = require('../'); /** * Server. */ var server = connect(); function compile(str, path) { return stylus(str) .set('filename', path) .use(nib()); } server.use(stylus.middleware({ src: __dirname , dest: __dirname + '/public' , force: true , compile: compile })); server.use(serveStatic(__dirname + '/public')); server.use(function(req, res){ pug.renderFile(__dirname + '/index.pug', function(err, str){ res.setHeader('Content-Type', 'text/html; charset=utf-8'); res.end(str); }); }); server.listen(3000); console.log('Server listening on port 3000'); ================================================ FILE: test/test.styl ================================================ @import 'nib/vendor' gray = #ebebeb body padding: 50px h1, h2, h3 font-family: helvetica, arial table border-collapse: collapse td padding: 3px 10px border-left: 1px solid #eee &:first-child font: 12px helvetica, arial tr:nth-child(4n) border-bottom: 1px solid #eee td padding-bottom: 15px tr:nth-child(4n+1) td padding-top: 15px #color-images width: 400 height: 300 background: url(http://f.cl.ly/items/0W1R2J2L3g2C2L3p1l1e/Image%202011.08.26%2011:42:20%20AM.png) center box-sizing: border-box padding-top: 130px text-align: center div display: inline-block width: 50px height: 50px margin: 0 15px box-sizing: border-box padding-top: 18px border: 1px solid #fff font: 9px Lucida Grande color: #666