stylus/nib

Stylus mixins, utilities, components, and gradient image generation

Stylus is a revolutionary new language, providing an efficient, dynamic, and expressive way to generate CSS. Supporting both an indented syntax and regular CSS style.

Sponsors

You can sponsor stylus ongoing development via opencollective or paypal !

Your Logo

Backers

Installation

$ npm install stylus -g

Basic Usage

Watch and compile a stylus file from command line with

stylus -w style.styl -o style.css

You can also try all stylus features on stylus-lang.com, build something with stylus on codepen or RunKit

Community modules

• https://github.com/stylus/stylus/wiki

Stylus cheatsheet

• Stylus cheatsheet, very useful stylus syntax code snippet for you

Code of Conduct

Please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.

Contribution

Please read our Contribution Guide before making any pull requests to the project. Included are directions for opening issues, workflows, and coding standards.

Thank you to all the people who already contributed to Stylus!

License

MIT

Copyright (c) 2010-present TJ and Stylus maintainers

nib's Issues

transition-* methods don't work

Hey,

I've tried to use:

transition-property opacity -webkit-transform

with no luck. It just rendered as 'transition-property: opacity, -webkit-transform'.

If I use the implementation of transition-property directly:

vendor('transition-property', opacity);

it works as expected, but I can't get it to work with more than one property (but that may be because I am a n00b with stylus).

transition(…) works too, it just seems to affect the transition-* properties. Is the dash evil?

CSS Animation

Would be nice to have a CSS3 animation 'vendor' setting as Webkit and Firefox both have it now.

Use filter fallback for rgba values in =<IE8

progid:DXImageTransform.Microsoft.gradient with the same #RRGGBBAA value can act as a fallback for browser that do not support rgba values.

Is this a good idea?

See this article http://css-tricks.com/rgba-browser-support/

Error on install: Cannot call method 'indexOf' of undefined

I get this error on "npm -g install nib":

npm http GET https://registry.npmjs.org/nib
npm http 304 https://registry.npmjs.org/nib
npm http GET https://registry.npmjs.org/nib/-/nib-0.3.2.tgz
npm http 200 https://registry.npmjs.org/nib/-/nib-0.3.2.tgz

npm ERR! TypeError: Cannot call method 'indexOf' of undefined
npm ERR! at FileReader.filter (/usr/local/lib/node_modules/npm/lib/utils/tar.js:115:49)
npm ERR! at Object.statCb as oncomplete

Debug:

info it worked if it ends with ok
verbose cli [ 'node', '/usr/local/bin/npm', '-g', 'install', 'nib' ]
info using [email protected]
info using [email protected]
verbose config file /Users/peter/.npmrc
verbose config file /usr/local/etc/npmrc
verbose config file /usr/local/lib/node_modules/npm/npmrc
verbose cache add [ 'nib', null ]
silly cache add: name, spec, args [ undefined, 'nib', [ 'nib', null ] ]
verbose parsed url { pathname: 'nib', path: 'nib', href: 'nib' }
verbose addNamed [ 'nib', '' ]
verbose addNamed [ null, '' ]
silly name, range, hasData [ 'nib', '', false ]
verbose raw, before any munging nib
verbose url resolving [ 'https://registry.npmjs.org/', './nib' ]
verbose url resolved https://registry.npmjs.org/nib
verbose etag "5BUZIQXV4VR2B5VDW8Z1UGZEB"
http GET https://registry.npmjs.org/nib
http 304 https://registry.npmjs.org/nib
silly get cb [ 304,
silly get cb { server: 'CouchDB/1.2.0 (Erlang OTP/R15B)',
silly get cb etag: '"5BUZIQXV4VR2B5VDW8Z1UGZEB"',
silly get cb date: 'Tue, 27 Mar 2012 13:35:55 GMT',
silly get cb 'content-length': '0' } ]
verbose etag nib from cache
silly name, range, hasData 2 [ 'nib', '', true ]
silly versions [ 'nib',
silly versions [ '0.0.1',
silly versions '0.0.2',
silly versions '0.0.3',
silly versions '0.0.4',
silly versions '0.0.5',
silly versions '0.0.6',
silly versions '0.0.7',
silly versions '0.0.8',
silly versions '0.1.0',
silly versions '0.2.0',
silly versions '0.3.0',
silly versions '0.3.1',
silly versions '0.3.2' ] ]
verbose bin dist [ '0.6-ares1.7.5-DEV-evundefined-openssl0.9.8r-v83.6.6.24-darwin-x64-11.3.0',
verbose bin dist { shasum: 'f437324a9f93504397df146549bfa162d04dfa50',
verbose bin dist tarball: 'http://registry.npmjs.org/nib/-/nib-0.3.2.tgz' } ]
verbose addRemoteTarball [ 'https://registry.npmjs.org/nib/-/nib-0.3.2.tgz',
verbose addRemoteTarball 'f437324a9f93504397df146549bfa162d04dfa50' ]
verbose mkdir (expected) error ENOENT, stat '/var/folders/rr/cc644yy136721ft0nzmqmxsm0000gn/T/npm-1332855355309'
verbose mkdir (expected) error ENOENT, stat '/var/folders/rr/cc644yy136721ft0nzmqmxsm0000gn/T/npm-1332855355309/1332855355309-0.4986961039248854'
verbose mkdir done: /var/folders/rr/cc644yy136721ft0nzmqmxsm0000gn/T/npm-1332855355309/1332855355309-0.4986961039248854 755
verbose fetch to /var/folders/rr/cc644yy136721ft0nzmqmxsm0000gn/T/npm-1332855355309/1332855355309-0.4986961039248854/tmp.tgz
http GET https://registry.npmjs.org/nib/-/nib-0.3.2.tgz
http 200 https://registry.npmjs.org/nib/-/nib-0.3.2.tgz
silly updated sha bytes 40960
silly updated sha bytes 40960
silly updated sha bytes 40960
info shasum f437324a9f93504397df146549bfa162d04dfa50
info shasum /var/folders/rr/cc644yy136721ft0nzmqmxsm0000gn/T/npm-1332855355309/1332855355309-0.4986961039248854/tmp.tgz
verbose mkdir (expected) error ENOENT, stat '/var/folders/rr/cc644yy136721ft0nzmqmxsm0000gn/T/npm-1332855355309/1332855355309-0.4986961039248854/package'
verbose mkdir done: /var/folders/rr/cc644yy136721ft0nzmqmxsm0000gn/T/npm-1332855355309/1332855355309-0.4986961039248854/package 755
verbose unpack_ uid, gid [ undefined, undefined ]
verbose unpackTarget /var/folders/rr/cc644yy136721ft0nzmqmxsm0000gn/T/npm-1332855355309/1332855355309-0.4986961039248854/package
silly gunzTarPerm modes [ '755', '644' ]
verbose gunzed /var/folders/rr/cc644yy136721ft0nzmqmxsm0000gn/T/npm-1332855355309/1332855355309-0.4986961039248854/package
verbose caching /var/folders/rr/cc644yy136721ft0nzmqmxsm0000gn/T/npm-1332855355309/1332855355309-0.4986961039248854/package/package.json
verbose loadDefaults [email protected]
verbose tarball contents [ 'package', 'tmp.tgz' ]
verbose from cache /var/folders/rr/cc644yy136721ft0nzmqmxsm0000gn/T/npm-1332855355309/1332855355309-0.4986961039248854/package/package.json
verbose pack /var/folders/rr/cc644yy136721ft0nzmqmxsm0000gn/T/npm-1332855355309/1332855355309-0.4986961039248854/package
verbose pack /var/folders/rr/cc644yy136721ft0nzmqmxsm0000gn/T/npm-1332855355309/1332855355309-0.4986961039248854/package /Users/peter/.npm/nib/0.3.2/package.tgz
silly makeList /var/folders/rr/cc644yy136721ft0nzmqmxsm0000gn/T/npm-1332855355309/1332855355309-0.4986961039248854/package
silly dir, dirLen [ '/var/folders/rr/cc644yy136721ft0nzmqmxsm0000gn/T/npm-1332855355309/1332855355309-0.4986961039248854/package',
silly dir, dirLen 108 ]
verbose tarball /Users/peter/.npm/nib/0.3.2/package.tgz
verbose parent /var/folders/rr/cc644yy136721ft0nzmqmxsm0000gn/T/npm-1332855355309/1332855355309-0.4986961039248854/package
ERR! TypeError: Cannot call method 'indexOf' of undefined
ERR! at FileReader.filter (/usr/local/lib/node_modules/npm/lib/utils/tar.js:115:49)
ERR! at Object.statCb as oncomplete
ERR! You may report this log at:
ERR! http://github.com/isaacs/npm/issues
ERR! or email it to:
ERR! [email protected]
ERR!
ERR! System Darwin 11.3.0
ERR! command "node" "/usr/local/bin/npm" "-g" "install" "nib"
ERR! cwd /Users/peter/Code/jquery/read-more
ERR! node -v v0.6.14
ERR! npm -v 1.1.12
ERR! type non_object_property_call
ERR! arguments [ 'indexOf', undefined ]
ERR! message Cannot call method 'indexOf' of undefined
verbose exit [ 1, true ]

linear-gradient background image example

It'd be nice if the documentation for nib included an example of how to get the background-image generation with node-canvas to work. It was somewhat unclear from the source what the right incantation of arguments was...

something like background: linear-gradient(100px top, white, black);

Opacity test can't pass

When I run 'make test' there's an error showing that every opacity value get an unnecessary space in the end. To fix this, I removed args of opacity function in the file /lib/nib/verdor.styl. I'm not very sure about whether this argument is necessary and how to remove the space if we have to use it.

/*
 * Opacity with conditional IE support.
 */

opacity(n, args...)
  opacity: n args
  if support-for-ie
    filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=%s)' % round(n * 100) args

Made a fork, not sure where it's going

Hey TJ,

I just made a fork today. I've been working on another stylus framework called "ink", and thought I'd build a little off nib for:
A) learning purposes (this is my first fork, or serious code project for that matter), and
B) because there's some duplicate ideas/code.

I'm not sure where it'll lead but just wanted to let you know. I'll be working on it considerably for the next few weeks as I complete a new website for a client.

But I expect the project-quality to be quite.... well "learning". I.E. tests/makefiles/et al, not sure about all that..haha.

What is iconic for?

Does it mean to help user create icons?

Why not create a font-face function so the user can use whatever font she wants?

I'd be happy to add a font-face function if you think it will be worth it.

Feature request: mix() built-in function

I'd like to see mix() implemented and added to the built-in functions. Both LESS and SASS has this function, so it's only fair that Stylus should have it as well.

mix() is used to easily mix two colors, like this: mix(#35c32d, #264ef3, 20%)

Reference: SASS documentation

-pos proposal

Hello TJ
what do you think about adding this line of code to the position helper, most of the time when I use fixed or absolute
I fix the top/bottom and stretch the element setting both right and left.

-pos(type, args)
  i = 0
  position: unquote(type)
  {args[i]}: args[i + 1] is a 'unit' ? args[i += 1] : 0
  {args[i += 1]}: args[i + 1] is a 'unit' ? args[i += 1] : 0
  if length(args) > i + 1
    {args[i += 1]}: args[i + 1] is a 'unit' ? args[i += 1] : 0

body
  fixed: top 0 right 5px left 5px

Loading Nib in Rails

Currently using the rails_stylus gem and its working well - just wondering how I can get some of the nibby goodness since stylus cant find it with a simple @import 'nib'

Will someone need to write a gem for this as well?

In the meantime what is the quick and dirty way to get this working?

nib registry

I think it would be nice in the long term to have a registry (kind of like npm) so that users can share nibs more easily. It could either have its own nib command, or be integrated into visionmedia/asset.

Thoughts ?

linear-gradient and multiple background

a error has been throwed out when I set multiple background with "linear-gradient" mixin.
example:

body
    background linear-gradient(top, rgba(black, 0.8), rgba(white, 0.8)), url("/images/pattern.gif")

exception:
RangeError: /home/fabiano/workdir/smx/node_modules/nib/lib/nib/gradients.styl:105
104| linear-gradient(start, stops...)

105| error('color stops required') unless length(stops)
106| prop = current-property[0]
107| val = current-property[1]
108| stops = normalize-stops(stops)

Weird Errors (on Windows)

This is what I get after a call to stylus -w ./gaia.styl:

  watching gaia\class\debug.styl
Error: nib\lib\nib\gradients.styl:120
   116|       add-property(prop, replace(val, '__CALL__', img))
   117|     start = start[1]
   118|
   119|   // legacy webkit
 > 120|   end = grad-point(opposite-position(start))
   121|   webkit-legacy = '-webkit-gradient(linear, %s, %s, %s)' % (grad-point(start) end join-stops(stops, webkit-stop))
   122|   add-property(prop, replace(val, '__CALL__', webkit-legacy))
   123|

TypeError: expected string, ident or literal, but got null:null
    at ".grid " (gaia\class\debug.styl:7)
    at ".debug " (gaia\class\debug.styl:22)

    at Object.assertString (C:\Users\Alix\AppData\Roaming\npm\node_modules\stylus\lib\utils.js:152:13)
    at C:\Users\Alix\AppData\Roaming\npm\node_modules\stylus\lib\functions\index.js:573:11
    at Array.forEach (native)
    at Evaluator.oppositePosition (C:\Users\Alix\AppData\Roaming\npm\node_modules\stylus\lib\functions\index.js:572:33)
    at Evaluator.invokeBuiltin (C:\Users\Alix\AppData\Roaming\npm\node_modules\stylus\lib\visitor\evaluator.js:783:28)
    at Evaluator.visitCall (C:\Users\Alix\AppData\Roaming\npm\node_modules\stylus\lib\visitor\evaluator.js:335:16)
    at Evaluator.<anonymous> (C:\Users\Alix\AppData\Roaming\npm\node_modules\stylus\lib\visitor\index.js:28:39)
    at Evaluator.visit (C:\Users\Alix\AppData\Roaming\npm\node_modules\stylus\lib\visitor\evaluator.js:75:18)
    at Evaluator.<anonymous> (C:\Users\Alix\AppData\Roaming\npm\node_modules\stylus\lib\visitor\evaluator.js:458:26)
    at Evaluator.<anonymous> (C:\Users\Alix\AppData\Roaming\npm\node_modules\stylus\lib\visitor\index.js:28:39)

This is the full gaia\class\debug.styl source code:

.debug
    *
        opacity: 0.90

    .grid
        background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.75) ($gridGutter * 2), rgba(255, 0, 0, 0.25) ($gridGutter * 2), rgba(255, 0, 0, 0.25)), linear-gradient(90deg, #eee 1px, transparent 1px, transparent)
        background-position: ($gridGutter * -1) 0
        background-size: (100% / $gridColumns) unit($textRhythm, 'rem')

    &.verbose // github.com/csswizardry/inuit.css/blob/1aff2367f43c96cea1634e10466d47109cf2cb04/core/css/inuit.css#L685
        [class=""],
        [id=""]
            outline: 5px solid yellow

        a
            outline: 5px solid yellow

            &[title]
                outline-color: green

            &[href="#"]
                outline-color: yellow

            &[href*="javascript"],
            &[onclick],
            &[target]
                outline-color: red

        h
            &1,
            &2,
            &3,
            &4,
            &5,
            &6
                outline: 5px solid green

        img
            outline: 5px solid red

            &[alt]
                outline-color: green

            &[alt=""]
                outline-color: yellow

Not sure if it matters, but I've even tried installing the node-canvas module (using npm install canvas -g):

npm http GET https://registry.npmjs.org/canvas
npm http 304 https://registry.npmjs.org/canvas

> [email protected] preinstall C:\Users\Alix\AppData\Roaming\npm\node_modules\canvas
> node-waf configure build

'node-waf' is not recognized as an internal or external command,
operable program or batch file.

npm ERR! [email protected] preinstall: `node-waf configure build`
npm ERR! `cmd "/c" "node-waf configure build"` failed with 1
npm ERR!
npm ERR! Failed at the [email protected] preinstall script.
npm ERR! This is most likely a problem with the canvas package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node-waf configure build
npm ERR! You can get their info via:
npm ERR!     npm owner ls canvas
npm ERR! There is likely additional logging output above.
npm ERR!
npm ERR! System Windows_NT 6.1.7601
npm ERR! command "C:\\Program Files\\nodejs\\\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install" "canvas" "-g"
npm ERR! cwd C:\xampp\htdocs\gaia\_\style
npm ERR! node -v v0.6.13
npm ERR! npm -v 1.1.9
npm ERR! code ELIFECYCLE
npm ERR! message [email protected] preinstall: `node-waf configure build`
npm ERR! message `cmd "/c" "node-waf configure build"` failed with 1
npm ERR! errno {}
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR!     C:\xampp\htdocs\gaia\_\style\npm-debug.log
npm not ok

I'm running Stylus 0.24.0 and nib 0.3.2. Any pointers how I could get this to work?

Linear Gradient Image With SVG Option

I think adding an SVG format option would be great for the linear gradient image. There would be no need for node-canvas and the image can be configured to scale content if size isn't provided, or made to fit a specific dimension without impacting size.

This should be relatively simple. We could use Jade to create some SVG templates, render them with the options, and then run the Stylus.url method on the output.

use "vendors" from Stylus

unify this

linear-gradient produces errors

Hello I use this css code linear-gradient(center top, #F5F5F5 0%, #EEEEEE 100%) but I get the following error when I try to parse it with nib:

/home/rnd/domains/design.rnd/public_html/app-ui/apps/main/node_modules/nib/lib/nib/gradients.styl:120
   116|       add-property(prop, replace(val, '__CALL__', img))
   117|     start = start[1]
   118| 
   119|   // legacy webkit
 > 120|   end = grad-point(opposite-position(start))
   121|   webkit-legacy = '-webkit-gradient(linear, %s, %s, %s)' % (grad-point(start) end join-stops(stops, webkit-stop))
   122|   add-property(prop, replace(val, '__CALL__', webkit-legacy))
   123| 

invalid position center
    at ".subnav " (/home/rnd/domains/design.rnd/public_html/app-ui/apps/main/front-end/assets/css/style.styl:61)

Error: /home/rnd/domains/design.rnd/public_html/app-ui/apps/main/node_modules/nib/lib/nib/gradients.styl:120
   116|       add-property(prop, replace(val, '__CALL__', img))
   117|     start = start[1]
   118| 
   119|   // legacy webkit
 > 120|   end = grad-point(opposite-position(start))
   121|   webkit-legacy = '-webkit-gradient(linear, %s, %s, %s)' % (grad-point(start) end join-stops(stops, webkit-stop))
   122|   add-property(prop, replace(val, '__CALL__', webkit-legacy))
   123| 

invalid position center
    at ".subnav " (/home/rnd/domains/design.rnd/public_html/app-ui/apps/main/front-end/assets/css/style.styl:61)

    at /home/rnd/domains/design.rnd/public_html/app-ui/apps/main/node_modules/stylus/lib/functions/index.js:581:22
    at /home/rnd/domains/design.rnd/public_html/app-ui/apps/main/node_modules/stylus/lib/functions/index.js:582:7
    at Array.forEach (native)
    at Evaluator.oppositePosition (/home/rnd/domains/design.rnd/public_html/app-ui/apps/main/node_modules/stylus/lib/functions/index.js:574:33)
    at Evaluator.invokeBuiltin (/home/rnd/domains/design.rnd/public_html/app-ui/apps/main/node_modules/stylus/lib/visitor/evaluator.js:775:28)
    at Evaluator.visitCall (/home/rnd/domains/design.rnd/public_html/app-ui/apps/main/node_modules/stylus/lib/visitor/evaluator.js:329:16)
    at Evaluator.<anonymous> (/home/rnd/domains/design.rnd/public_html/app-ui/apps/main/node_modules/stylus/lib/visitor/index.js:28:39)
    at Evaluator.visit (/home/rnd/domains/design.rnd/public_html/app-ui/apps/main/node_modules/stylus/lib/visitor/evaluator.js:74:18)
    at Evaluator.<anonymous> (/home/rnd/domains/design.rnd/public_html/app-ui/apps/main/node_modules/stylus/lib/visitor/evaluator.js:451:26)
    at Evaluator.<anonymous> (/home/rnd/domains/design.rnd/public_html/app-ui/apps/main/node_modules/stylus/lib/visitor/index.js:28:39)

feature suggestions

Hey! If I get time to implement these I will, but thought I'd put them on the table in case you were doing something similar, or we're inspired by them or something:

1. sticky footer (like http://ryanfait.com/sticky-footer/)
2. dataURI generation with canvas with <IE7 fallback e.g.

body
background url(dataUri('path/to/img'))

generates

body {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAAC...etc");
*background: url("path/to/img"); // ie7 hack
}

or else use MHTML (except MHTML doesn't work (without lots of hack work not feasible for automation)
on Vista IE8 Compat mode..hoorah)

that is all.

transition for mozilla

Why is 'transition' webkit only? in vendor.styl

Firefox (at least Firefox4) does support transitions.

I had to redefine transition

transition()
    vendor('transition', arguments)

nib + css3pie : compilation shoud just copy/paste unknown prefixed properties

On my latest project, i use concurrently stylus and css3pie.
sidenote : css3pie adds support of CSS3 properties to IE7-9.

Due to IE internals, PIE cannot support background rules as-is. So one has to add a prefixed rule specific to PIE.

        background linear-gradient(top, 0% #46BFD3, 4% #3398B7, 100% #287790)
        -pie-background linear-gradient(top, 0% #46BFD3, 4% #3398B7, 100% #287790)

Unfortunately the -pie-background rule is compiled by nib into

  -pie-background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #6799b9), color-stop(0.04, #6799b9), color-stop(0.05, #5188ab), color-stop(1, #0e537e));
  -pie-background: -webkit-linear-gradient(top, #6799b9 0%, #6799b9 4%, #5188ab 5%, #0e537e 100%);
  -pie-background: -moz-linear-gradient(top, #6799b9 0%, #6799b9 4%, #5188ab 5%, #0e537e 100%);
  -pie-background: linear-gradient(top, #6799b9 0%, #6799b9 4%, #5188ab 5%, #0e537e 100%);

which is useless....
i know i can wrap the rule in @css {} but compiler should just ignore my -pie- rules and copy it to output..

Note: i still want to use nib to generate background-gradient for moz/webkit/o browser and even for future ms-ie10 browser which supports it. CSS3PIE is only there to support old IE (ie. IE6-9)

thoughts ?

http://twitter.com/signap

linear-gradient() fails when passing degree

If you pass a degree to linear-gradient() it will blow up in your face. I disapprove! :)

linear-gradient(-45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent 100%)

Opera vendor prefix

Hi,

I noticed that in config.styl file you have:
vendor-prefixes ?= webkit moz official

I think it would be better if we have Opera vendor prefix there. What do you think?

I can try to do this and find affected places:

transition()
vendor('transition', arguments, only: webkit moz)

Then I will send you Pull request. Is it ok?

TypeError: Cannot set property '_imports' of undefined

I seem to be getting an error when I try to use nib. I'm not sure what's going wrong, but all I'm doing is using the example code to upgrade the compiler.

This is the output;

/usr/local/lib/node_modules/stylus/lib/middleware.js:137
          var paths = style.options._imports = [];
                                             ^
TypeError: Cannot set property '_imports' of undefined
    at /usr/local/lib/node_modules/stylus/lib/middleware.js:137:46
    at [object Object].<anonymous> (fs.js:107:5)
    at [object Object].emit (events.js:61:17)
    at afterRead (fs.js:878:12)
    at wrapper (fs.js:245:17)

un-implemented visitGradient (seems like this just broke)

/home/wavded/Projects/adn/node_modules/nib/lib/nib/gradients.styl:143
   139|   stops = stops[0] if length(stops) == 1
   140|   error('gradient image size required') unless start[0] is a 'unit'
   141|   size = start[0]
   142|   start = start[1] or 'top'
 > 143|   grad = create-gradient-image(size, start)
   144|   stops = normalize-stops(stops)
   145|   add-color-stop(grad, stop[0], stop[1]) for stop in stops
   146|   'url(%s)' % gradient-data-uri(grad)

I'm at the latest stylus, nib, and canvas.

fix gradient image use with dynamic size etc

currently breaks due to unwrap issue

@keyframes generates invalid vendor prefix combinations

@import 'nib'
@keyframes fadeinout
  0%
    opacity 1
  50%
    opacity 0
  100%
    opacity 1

results in

@-moz-keyframes fadeinout{0%{opacity:1;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100)}
50%{opacity:0;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0)}
100%{opacity:1;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100)}
}@-webkit-keyframes fadeinout{0%{opacity:1;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100)}
50%{opacity:0;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0)}
100%{opacity:1;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100)}
}@-o-keyframes fadeinout{0%{opacity:1;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100)}
50%{opacity:0;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0)}
100%{opacity:1;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100)}
}@-ms-keyframes fadeinout{0%{opacity:1;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100)}
50%{opacity:0;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0)}
100%{opacity:1;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100)}
}@Keyframes fadeinout{0%{opacity:1;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100)}
50%{opacity:0;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0)}
100%{opacity:1;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100)}
}

The filter:DXImageTransform is for IE6(?) compatibility, but even if IE6 would support the @-ms-keyframes property, it's a waste of space to put the IE specific prefixes within Webkit/Mozilla/Opera prefixes.

Same things happens with CSS transforms:

@import 'nib'
@keyframes fadeinout
  0%
    transform: translateX(10px)

Resulting in:

@-moz-keyframes fadeinout{0%{-webkit-transform:translateX(10px);-moz-transform:translateX(10px);transform:translateX(10px)}
}@-webkit-keyframes fadeinout{0%{-webkit-transform:translateX(10px);-moz-transform:translateX(10px);transform:translateX(10px)}
}@-o-keyframes fadeinout{0%{-webkit-transform:translateX(10px);-moz-transform:translateX(10px);transform:translateX(10px)}
}@-ms-keyframes fadeinout{0%{-webkit-transform:translateX(10px);-moz-transform:translateX(10px);transform:translateX(10px)}
}@Keyframes fadeinout{0%{-webkit-transform:translateX(10px);-moz-transform:translateX(10px);transform:translateX(10px)}
}

-moz-transforms inside @-webkit-keyframes, etc

Using node v0.6.8, stylus v0.22.6.

display box

I think display box would fit in well here.

http://compass-style.org/reference/compass/css3/box/
http://www.html5rocks.com/en/tutorials/flexbox/quick/#toc-center

Add semantic.gs functions

Include grid functionality from semantic.gs

I've already ported semantic.gs to less,
https://github.com/dmmalam/semantic.gs

So just need to include the rows / cols function form grid.styl

Gradient helper prevents having a 'top()' mixin

I get this error when trying to declare a mixing with a name of top()

TypeError: expected string, ident or literal, but got function:top()

and declaring a gradient using a string doesn't work either linear-gradient('top', ...

Not sure if there is a solution that keeps both of the functions around...

The state of the gradients in nib

Problem

There is a problem with gradients in nib now: there is a canvas polyfill for simple linear gradients and support for old webkit syntax.

While this is cool, it's cool until you want to do something more than just simple linear gradient.

Today you can do a lot of other things, like repeating gradients, radial ones, multiple images (look for example at the Lea Verou's pattern collection), and you can't use all those things with nib, 'cause, as I understand, you'll need to support the canvas and old webkit syntax as well, so you can't do just anything you want to gradients' mixin.

The nib's issues affected by this:

• #14 could be fixed easily.
• #19 also would be easiy to work for border-image, -webkit-mask etc.
• #71 could be fixed.
• #12 — issues with such fallbacks must be done apart of the nib.
• #56 there is a chance that it would be fixed.
• #67 could be fixed easily.

The solution

1. Move the canvas generated gradients (and other fallbacks like pie or svg) to the mixins with different syntax from the current one, so the linear-gradient() one wouldn't generate them by default. Or move them to different repo at all.
2. Remove the support for the old webkit syntax — it's needed now only for some old androids — so who cares really? They're already in the Candidate Recomendation state and such legacy is a burden for nib.
3. Rewrite the mixins a bit, so it would fix all the current issues. It would be rather simple if you'd have no need in all this legacy stuff, that are there now.

I can try to fork nib and do all those things, but I want to know if it's needed there.

@visionmedia, what do you think?

Pseudo-elements

What is the way to put following case into the nib?

::-moz-selection { color: gold; background: red; }
::selection { color: gold; background: red; }

Background patterns

Hi,

Any plans to add background patterns like http://leaverou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients/

Many thanks,

CJ

Docs / site

yeahhhhhh

Use nib with the stylus executable?

Is is somehow possible to use nib with the stylus executable?

grid_() mixin

I'll push over my work soon as a comment to this issue.

Noisy Background Generator

This might be best suited as a separate module, but I thought I'd throw the idea out there. This jQuery plugin uses the canvas element to generate a noisy background. We could easily port this code over to nib and use node-canvas to allow users to declare noisy backgrounds in their stylus files.

jQuery Project: http://plugins.jquery.com/project/Noisy

sticky-footer_() mixin

May need some cleanup, but here you go.

_sticky-footer.styl

// Inspired by Compass' sticky-footer() mixin
stickyfooter_(footerHeight = 50, container = unquote("container"), push = unquote("containerPush"), footer = unquote("footer"))
  html, body
    height 100%
  #{container}
    clear both
    min-height 100%
    height auto !important
    height 100%
    margin-bottom unit(footerHeight * -1, 'px')
    #{containerPush}
      height unit(footerHeight, 'px')
  #{footer}
    clear both
    position relative
    height unit(footerHeight, 'px')

Using nib without connect

I'm making heavy use out of "stylus -w" to work on static HTML templates. I would love to use nib's simple gradient syntax, but @import 'nib' doesn't seem to work by itself. I get the following error:

failed to locate @import file nib.styl

Update: I've fixed this for now by copying the nib stylus files into my project. It would still be nice to have an automatic way to do this with stylus, but it's not a big deal.

!important not preserved?

A snippet like this:

selector
    opacity: 1 !important

Compiles to this for me:

selector{opacity:1;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100)}

Note how !important wasn't preserved. Not sure if this is a Stylus bug or a Nib one, but I think Nib?

I'm running [email protected], which I think is the latest, but [email protected], which is a bit old.

iteration variable `i` leaked into background image url.

When I use a file path that includes /i/, nib replaces that /i/ with /0/ in the vendor-prefixed gradients.

a
    background-image url(/i/providence/plus.png) linear-gradient(top, rgba(0,0,0,0.25), rgba(0,0,0,0.07))

produces

a {
  background-image: url("/0/providence/plus.png") -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0,0,0,0.25)), color-stop(1, rgba(0,0,0,0.07)));
  background-image: url("/0/providence/plus.png") -webkit-linear-gradient(top, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.07) 100%);
  background-image: url("/0/providence/plus.png") -moz-linear-gradient(top, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.07) 100%);
  background-image: url("/i/providence/plus.png") linear-gradient(top, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.07) 100%);
}

Tests for border-radius

Tests for border-radius are broken right now.

Is it for everybody of just for me?

File: vendor.border-radius.styl

Missing `-khtml` vendor

http://stackoverflow.com/a/2212549

release 0.3.3 / 0.4?

It's been 3 months since the last release -- I think it makes sense to push out some of the recent improvements. Thoughts?

Properties that use `vendor()` convert `rgba()` to hex

Noticed this weird bug when rgba values with alpha were coming out wonky in the generated CSS.

It doesn’t seem to happen in interactive mode. I’m not sure where to look really, but check everything that reads rgba values for possible unwarranted conversions to hex colors…?

linear-gradient with variables

@import 'nib'

a
  background-image: linear-gradient(bottom, hsl(0, 0%, 35%), hsl(0, 0%, 45%))

works, but

@import 'nib'

dark-gradient = linear-gradient(bottom, hsl(0, 0%, 35%), hsl(0, 0%, 45%))

doesn't, it fails with

/usr/lib64/node_modules/stylus/bin/stylus:511
              throw err;
                    ^
Error: nib/gradients.styl:108
   104|  */
   105|
   106| linear-gradient(start, stops...)
   107|   error('color stops required') unless length(stops)
 > 108|   prop = current-property[0]
   109|   val = current-property[1]
   110|   stops = normalize-stops(stops)
   111|

cannot perform null[(0)]

    at Null.operate (/usr/lib64/node_modules/stylus/lib/nodes/node.js:189:13)
    at Evaluator.visitBinOp (/usr/lib64/node_modules/stylus/lib/visitor/evaluator.js:388:28)
    at Evaluator.<anonymous> (/usr/lib64/node_modules/stylus/lib/visitor/index.js:28:39)
    at Evaluator.visit (/usr/lib64/node_modules/stylus/lib/visitor/evaluator.js:74:18)
    at Evaluator.<anonymous> (/usr/lib64/node_modules/stylus/lib/visitor/evaluator.js:451:26)
    at Evaluator.<anonymous> (/usr/lib64/node_modules/stylus/lib/visitor/index.js:28:39)
    at Evaluator.visit (/usr/lib64/node_modules/stylus/lib/visitor/evaluator.js:74:18)
    at Evaluator.<anonymous> (/usr/lib64/node_modules/stylus/lib/visitor/evaluator.js:451:26)
    at Evaluator.<anonymous> (/usr/lib64/node_modules/stylus/lib/visitor/index.js:28:39)
    at Evaluator.visit (/usr/lib64/node_modules/stylus/lib/visitor/evaluator.js:74:18)

Why does nib need to use current-property? Can it be avoided?

transform within keyframe

@keyframes moveCover {
    from {
        transform: rotate(-7deg) translatex(20px);
    }
}

results in

@-moz-keyframes moveCover {
  0% {
    ("-webkit-transform"): rotate(-7deg) translatex(20px);
    ("-moz-transform"): rotate(-7deg) translatex(20px);
    (("transform")): rotate(-7deg) translatex(20px);
  }
}

Linear Gradient Support for Opera

Opera has vendor-prefixed support for linear-gradient. It would be nice if the linear-gradient mixin also emitted a -o-linear-gradient rule.

Causes lots of warnings with stylus option `warn` on

Having just added nib to a project where the stylus warn option was set, I found the following output.

Turns out in lib/nib/vendor.styl border-image is actually declared twice, but I can't see why all of the other warnings should be fired.

Warning: local function "border-image" previously defined in this scope

Warning: local function "whitespace" previously defined in this scope

Warning: local function "ellipsis" previously defined in this scope

Warning: local function "vendor" previously defined in this scope

Warning: local function "box-shadow" previously defined in this scope

Warning: local function "user-select" previously defined in this scope

Warning: local function "column-count" previously defined in this scope

Warning: local function "column-gap" previously defined in this scope

Warning: local function "column-rule" previously defined in this scope

Warning: local function "column-rule-color" previously defined in this scope

Warning: local function "column-rule-width" previously defined in this scope

Warning: local function "column-rule-style" previously defined in this scope

Warning: local function "column-width" previously defined in this scope

Warning: local function "background-size" previously defined in this scope

Warning: local function "transform" previously defined in this scope

Warning: local function "border-image" previously defined in this scope

Warning: local function "transition" previously defined in this scope

Warning: local function "transition-property" previously defined in this scope

Warning: local function "transition-duration" previously defined in this scope

Warning: local function "transition-timing-function" previously defined in this scope

Warning: local function "transition-delay" previously defined in this scope

Warning: local function "backface-visibility" previously defined in this scope

Warning: local function "opacity" previously defined in this scope

Warning: local function "whitespace" previously defined in this scope

Warning: local function "box-sizing" previously defined in this scope

Warning: local function "box-orient" previously defined in this scope

Warning: local function "box-flex" previously defined in this scope

Warning: local function "box-flex-group" previously defined in this scope

Warning: local function "box-align" previously defined in this scope

Warning: local function "box-pack" previously defined in this scope

Warning: local function "box-direction" previously defined in this scope

Warning: local function "animation" previously defined in this scope

Warning: local function "animation-name" previously defined in this scope

Warning: local function "animation-duration" previously defined in this scope

Warning: local function "animation-delay" previously defined in this scope

Warning: local function "animation-direction" previously defined in this scope

Warning: local function "animation-iteration-count" previously defined in this scope

Warning: local function "animation-timing-function" previously defined in this scope
Warning: local function "animation-play-state" previously defined in this scope
Warning: local function "animation-fill-mode" previously defined in this scope
Warning: local function "border-image" previously defined in this scope

Warning: local function "hyphens" previously defined in this scope

Warning: local function "appearance" previously defined in this scope
Warning: local function "-apply-border-radius" previously defined in this scope
Warning: local function "border-radius" previously defined in this scope

Warning: local function "replace" previously defined in this scope

Warning: local function "grad-point" previously defined in this scope
Warning: local function "pos-in-stops" previously defined in this scope
Warning: local function "normalize-stops" previously defined in this scope
Warning: local function "join-stops" previously defined in this scope
Warning: local function "webkit-stop" previously defined in this scope
Warning: local function "std-stop" previously defined in this scope
Warning: local function "linear-gradient" previously defined in this scope
Warning: local function "linear-gradient-image" previously defined in this scope

"border-radius top left" yields to wrong css for mozilla

border-radius top left currently yields to -moz-border-radius-lefttop instead of -moz-border-radius-topleft. The same happens with right and bottom combinations.

Vendor-prefixed properties AND values

Say I want to do the following:

.someClass
  border-image(linear-gradient(0px top, red, blue))

This crashes:

500 Error: /home/vegard/editor/node_modules/nib/lib/nib/gradients.styl:106
102| */
103|
104| linear-gradient(start, stops...)
105| error('color stops required') unless length(stops) >
106| prop = current-property[0]
107| val = current-property[1]
108| stops = normalize-stops(stops)
109| cannot perform null[(0)] at standard-box() (/home/vegard/editor/public/stylesheets/style.styl:4) at "body" (/home/vegard/editor/public/stylesheets/style.styl:13)

Will it ever be possible to output the jungle of declarations needed to get this to work. I took a cursory look in gradients.styl and vender.styl, but my attempts to patch this in a language I don't really know yet have been useless.