Skip to content


Vendor-prefixed properties AND values #19

vegardlarsen opened this Issue · 17 comments

7 participants


Say I want to do the following:

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

This crashes:

500 Error: /home/vegard/editor/node_modules/nib/lib/nib/gradients.styl:106
102| */
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.

tj commented

not sure I get what you're trying to do, why not:

  border-image: linear-gradient(...)

I am sorry if I was unclear. border-image gets vendor-prefixed (so -webkit-border-image and -moz-border-image gets generated). If you try to mix vendor-prefixed border-image with vendor-prefixed linear-gradient, nib crashes.

The optimum result would be skipping all "illegal combinations", meaning you would only get combinations with the same vendor prefix:

-webkit-border-image: -webkit-linear-gradient(....)
-webkit-border-image: -webkit-gradient(....)
-moz-border-image: -moz-linear-gradient(....)
-o-border-image: -o-linear-gradient(....)
border-image: linear-gradient(....)
/* never output this, doesn't make sense: */
-webkit-border-image: -moz-linear-gradient(....)
tj commented

ah, gotcha. yeah that could be a little difficult to work around, I'll have to investigate that a bit and see if it can be done without being a massive hack


Yeah, after my cursory look at it, I realized my limitations and abandoned it. But it would be a huge advantage if you could get this to work.


Another case to consider:

-webkit-transition: -webkit-transform 2s ease-in-out;
-moz-transition: -moz-transform 2s ease-in-out;
-o-transition: -o-transform 2s ease-in-out;
transition: transform 2s ease-in-out;

Would be nice if we can write just:

transition: transform 2s ease-in-out

or similar

tj commented

@podviaznikov yeah i agree, thought about that just the other day. I'll give it a go when i have a minute


Yes, it would be great to have that for transition!

@kizu kizu added a commit to kizu/nib that referenced this issue
@kizu kizu Applying linear-gradient to border-image; fixes #19 e8df27e

Hey guys. So what's the best alternative for transition: transform 2s ease-in-out that works?


@GotEmB Actually, the case with transform was already fixed in #95


Well, I tried

transition transform 0.5s ease, opacity 0.5s ease

and it didn't work... The transform wasn't expanded into the vendor specific ones.

I got,

-webkit-transition: transform 0.5s ease, opacity 0.5s ease;
-moz-transition: transform 0.5s ease, opacity 0.5s ease;
-o-transition: transform 0.5s ease, opacity 0.5s ease;
-ms-transition: transform 0.5s ease, opacity 0.5s ease;
transition: transform 0.5s ease, opacity 0.5s ease;

@GotEmB Which version of nib do you have? If it's the one from npm, then it means that the merged code is still not published. Try to use the version from the master branch.


@kizu Weird. Both show version 0.7.0, yet the master branch one works as expected but the npm one doesn't.

tj commented

@GotEmB because I didn't publish yet. 0.8.0


@visionmedia Ah! That didn't hit me. All's well then.

Random thought.. Why not use some kind of a hash that is progressive (like version numbers) and is a hash of the build rather than just version numbers?

tj commented

? because we dont publish to npm every commit, otherwise you could just use the commit sha

tj commented

keep in mind you can use git urls with npm, so you could use a sha if you wanted


This issue hasn't been active for 10 months, so I'm closing this. If you think it is still an issue; reopen. [slang-bot]

@slang800 slang800 closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.