Vendor-prefixed properties AND values

[vegardlarsen]

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.

[tj]

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

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

[vegardlarsen]

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]

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

[vegardlarsen]

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.

[podviaznikov]

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]

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

[cpojer]

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

[GotEmB]

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

[kizu]

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

[GotEmB]

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;