Factor out Prefixer as a separate project

[chandu0101]

Hi ,
How about publishing prefixer as its own entity , it'll be useful for other projects ..

[ianobermiller]

Yeah I've thought about it. The prefixer is based on https://github.com/jsstyles/css-vendor, but I've basically rewritten it all and added quite a bit. We actually want to move away from this type of prefixer, and use one based on user agents, see discussion in #201.

Do you have something in mind that you'd like to use it for?

[chandu0101]

Do you have something in mind that you'd like to use it for?

In my internal scala.js project i am using inline styles, was searching for good a prefixer to use , found some on internet but they are not active projects.. ,as radium has decent community,it's safe bet for me!

[robinweser]

I also love the idea of creating/using an extern prefixer in general as it really is not a problem styling libraries should worry about.
While creating Look I tried to build some kind of dynamic & hackable stylesheet class which can easily be processed by any kind of processor (basically any object with a process-method). Therefore I've created an Autoprefixer which is based on userAgent information. By now it is not really complex and always uses the same list for every userAgent, but this could get extended heavily.

import Prefixer from 'dss-prefixer';
Prefixer.process(/* styles */);

For server-side rendering there's a Prefixer.setUserAgent(userAgent) which should be called before processing. Optionally you can also pass it within process as Prefixer.process(/*styles*/, userAgent).

If you've thought about a similar approach I would really like to help creating a powerful prefixer module similar to Autoprefixer but in javascript.

[ianobermiller]

@rofrischmann very nice work with react-look! I'd love to add it to our comparision page if you wouldn't mind submitting a PR.

Your work on the prefixer looks like a great start, I've got a very old bookmark with something similar but less comprehensive. Biggest things that need to be added to dss-prefixer are more specific version checking for IE and webkit variants and prefixing/fixing of values as well (looks like some of that is in a separate mixin just for flexbox). It would be great to collaborate on a neutral project. Something with a very simple API: prefix(styleObject, userAgent).

[robinweser]

Thanks a lot! I will add it later on for sure.
Maybe I will create a separate repository tomorrow and set up some initial stuff. Thought about something which lets you define minBrowser-versions for all major browser.
A build script should generate a data map Using from caniuse (just as Autoprefixer does).

I'll update you asap :p

[robinweser]

@ianobermiller I have set up a prefixer that generates information using caniuse data which is done automatically on install. See inline-style-prefixer.

It generates those info using a searchmap (see repo), which by now does not contain many properties. It would be nice to have some help as I am not sure which props even exist with prefixes. A list of properties would help a lot, but I can barely find one..

Also I have now started implementing some hack polyfill to ensure e.g. Flexbox IE 10 specs get also resolved (ms-flex-align, ...)
I am sure to have a fully running prefixer soon :)

[arush]

@rofrischmann using caniuse data is the correct approach and i wish Radium did this. is inline-style-prefixer a drop in replacement for Radium's autoprefixer?

[ianobermiller]

My plan is to use inline-style-prefixer when it is mature enough. I think it would be fairly easy to write a drop in replacement plugin for prefixer using inline-style-prefixer, except prefixer is also used by keyframes and the style plugin, and is currently not replaceable.

[ianobermiller]

If this is still useful, let me know and I can resurrect the old prefixer into its own repo, IMO inline-style-prefixer is better anyway :).

[arush]

@ianobermiller to clarify, do you recommend we use inline-style-prefixer instead of Radium's builtin prefixer? If so, how?

[ianobermiller]

@arush the latest version of Radium uses inline-style-prefixer already.

[arush]

great