Sublime Forum

Prefixr Plugin

#1

Last night I just finished and published my Prefixr plugin. It takes CSS and runs it through the Prefixr.com API to generate cross-browser CSS.

You can see installation instructions, screenshots and documentation at wbond.net/sublime_packages/prefixr.

0 Likes
#2

Legen-dary!

Cheers mate

0 Likes
#3

Awesome!

Any idea how Prefixer differs from Compass? Do we need both?

0 Likes
#4

[quote=“Side Six”]Awesome!

Any idea how Prefixer differs from Compass? Do we need both?[/quote]

Prefixr, prefixes your CSS with cross-browser compatible properties.

border-radius: 10px 10px 5px 5px

Would give you:

-webkit-border-radius: 10px 10px 5px 5px; -khtml-border-radius: 10px 10px 5px 5px; -moz-border-radius: 10px 10px 5px 5px; border-radius: 10px 10px 5px 5px;

0 Likes
#5

I’ve this error when I press CTRL+ALT+X inside a CSS block:

Traceback (most recent call last): File "./Prefixr.py", line 71, in <lambda> File "./Prefixr.py", line 55, in handle_threads File "./Prefixr.py", line 93, in replace File "./Prefixr.py", line 119, in fix_whitespace AttributeError: 'NoneType' object has no attribute 'begin'

0 Likes
#6

Hey there, I love using the Prefixr Plugin for Sublime but I’ve noticed something that is rather annoying.

Say I have

[code]#button {
width:80px;
height:30px;

background-color: #feca5c;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(254, 218, 113)),to(rgb(254, 186, 72)));
background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72));
background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72));
background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72));
background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72));
background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr=’#feda71’, EndColorStr=’#feba48’);
}[/code]

I highlight the below code to run Prefixr over it. It cleans it up great but for some reason it also removes the width and height there, why is it doing this? Why isn’t it only Prefix’ing what I’ve selected?

background-color: #feca5c; background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(254, 218, 113)),to(rgb(254, 186, 72))); background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72)); background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72)); background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72)); background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72)); background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72)); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba48');

0 Likes
#7

Well, really it really seems a bug in the Prefixr API, but when I reported it I was told that I was not sending enough of the CSS for it to work properly. I had actually forgotten about the issue until you brought it up. I can’t give an ETA to fixing this just because of the amount of time I spend working on Package Control and the channel, but it is on my list to do.

That said, if someone wants to take the time to revise the plugin to include the curly braces with each block, that should solve the bug.

0 Likes
#8

Hi wbound!

Great job, but is possible to make a user_pref where I can put the option to exclude some conversione for exaple with the option -o -ms -moz beacuse in this period I’m develop a specific css code for webkit.

Best Regards

Franco

0 Likes
#9

No longer working for me. I get an error message: URL error timed out contacting API

PITY!

0 Likes
#10

[quote=“wbond”]

Well, really it really seems a bug in the Prefixr API, but when I reported it I was told that I was not sending enough of the CSS for it to work properly. I had actually forgotten about the issue until you brought it up. I can’t give an ETA to fixing this just because of the amount of time I spend working on Package Control and the channel, but it is on my list to do.

That said, if someone wants to take the time to revise the plugin to include the curly braces with each block, that should solve the bug.[/quote]

Waiting for your to fix this :frowning:

0 Likes
#11

Hey, it wold be very nice if you’ll set visually order, like this one:

background-image: -webkit-linear-gradient(top, #fff 0px, #E0E0E0); background-image: -moz-linear-gradient(top, #fff 0px, #E0E0E0); background-image: -ms-linear-gradient(top, #fff 0px, #E0E0E0); background-image: -o-linear-gradient(top, #fff 0px, #E0E0E0); background-image: linear-gradient(top, #fff 0px, #E0E0E0);

Can apply this rules?

0 Likes