I was recently looking into how to add a Prefixr command to TextMate 2. For those of you not familiar, Prefixr is a way (created by Jeffrey Way of NetTuts) to take a new-ish CSS property like box-shadow or transform and add all the vendor-specific prefixes automatically. So:
transform: rotate(-7deg);
becomes:
-webkit-transform: rotate(-7deg); -moz-transform: rotate(-7deg); -o-transform: rotate(-7deg); -ms-transform: rotate(-7deg); transform: rotate(-7deg);
to accomodate the prefixes for Webkit browsers (Safari and Chrome), Firefox, Opera and Internet Explorer. These prefixes are used by the different browser vendors to experiment with newer CSS properties before the standard has been finalized. So, ideally, these prefixes would eventually go away as the these properties become standardized across browsers.
Jeffrey actually has an example of how to add a command to TextMate 1 in his introduction article to Prefixr and this works perfectly in TextMate 2. I simply went to “Bundles > Edit Bundles” and chose the CSS bundle. I then clicked “New” and chose “Command.” In my new command, I pasted in the command from Jeffrey’s article:
curl -sSd "css=$TM_SELECTED_TEXT" "http://prefixr.com/api/index.php"
I chose Selection for the Input so that my highlighted text would be acted on. I also entered “source.css” for the scope and… it worked great! But, I tested it in a SASS document (.SCSS) and, because of the scope… nada. It wasn’t available as an option when searching all my commands. Well, one can add more than one scope by separating them with commas. So I changed the scope to:
source.css,source.scss
And the command is now available to me in both CSS and SASS.