Skip to content

Loading…

Vendor-prefixed properties AND values #19

Closed
vegardlarsen opened this Issue · 17 comments

7 participants

@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
Owner
tj commented

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
Owner
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

@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
Owner
tj commented

@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!

@kizu kizu added a commit to kizu/nib that referenced this issue
@kizu kizu Applying linear-gradient to border-image; fixes #19 e8df27e
@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;
@kizu

@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.

@GotEmB

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

@tj
Owner
tj commented

@GotEmB because I didn't publish yet. 0.8.0

@GotEmB

@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
Owner
tj commented

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

@tj
Owner
tj commented

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

@slang800
Collaborator

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.