Turn Off Vendor Prefixing

[Ne-Ne]

Hey All,

I am using Compass alongside SCSS (SASS) however I which to remove the vendor short-codes for emmet, as they are slowing down my workflow.

e.g. border radius

Is it possible to do this? I could avoiding needing to delete them, just disable this functionality.

-Neil

[sergeche]

You need to update css.*PropertiesAddon preferences: http://docs.emmet.io/customization/preferences/

[Ne-Ne]

How to I get to that dir?

I have package control installed, but can't see the preferences in the list. Is this edited via searching in OSX Finder or Sublime 2 package control...

[sergeche]

http://docs.emmet.io/customization/ https://github.com/sergeche/emmet-sublime#extensions-support

[Ne-Ne]

Thanks for the URL, as simple as that sounds I understand what I need to do, but I can't find the file.

The closest one was snippets.json, I can't see preferences.json in my emmet folder ST2.. Can you tell the exact file name & dir after the folder name, please.

OSX, ST2 - Currently Installed

[sergeche]

You need to create this file manually in extensions folder

[Ne-Ne]

An somehow it still does not load the file, I have restarted. This is the dir tree and contents:

Dir:

Contents:

I understand if there was a string I would wrap the true in speech quotes, however its is either or. I don't usually work in json. I have no errors in ST2 when I load and still get the vendor prefixes..

[sergeche]

https://github.com/sergeche/emmet-sublime#extensions-support

The default value of extensions_path is ~/emmet, which points to emmet folder inside your OS user’s home folder.

[Ne-Ne]

Okay that seems a lot clear. I have found and entered the directory correctly, found preferences. Do I have to create a separate file or can I enter the pref's within the "emmet.sublime-settings" ?

So I noticed "precede property with hyphen" do I have to list every single property to remove it or is that a function that will force all?

Sorry for this drawn out issue.. The heat is getting to me.

[sergeche]

Yes, you can add them into .sublime-settings file. The css.*PropertiesAddon preferences are made for your convenience. There are number of ways to turn off vendor prefixes:

• Set css.autoInsertVendorPrefixes to false. It will completely disable automatic vendor prefixes, they will be available only in dashed abbreviations, e.g. -bdrs.
• Change css.*Properties. These preferences contains all CSS properties that should have given vendor prefix.
• Change css.*PropertiesAddon to modify subset of css.*Properties.

[Ne-Ne]

:+1: css.autoInsertVendorPrefixes - Solved!

I wonder if this plugin could piped through dropbox, then I wouldn't have to do this 4 more times... :)

[geebru]

{
    "preferences": {
        "sass.propertyEnd": ";",
        "css.autoInsertVendorPrefixes": false
    }
}

I've got auto vendor prefixing set to false but it's still happening (primarily on the dispay: flex; property). Am I using this option wrong?

Using Sublime Text 3.

[dalgard]

Same here. Those are the contents of my Emmet.sublime-settings file and it happily inserts prefixes whenever I press tab around some properties.

Stuff like this should not be enabled by default unless it presents the best solution out there – which it doesn't.

[andrewdc]

+1 - I have tried everything here (at least as best as I can tell) and I just cannot stop the prefixing. Any help would be great.

Sublime Text 3. My Emmet.sublime-settings:

 {
     "preferences": {
         "sass.propertyEnd": ";",
         "css.autoInsertVendorPrefixes": false,
         "scss.autoInsertVendorPrefixes": false,
         "autoInsertCssPrefixedEnabled": false
     }
 }

Am I missing something obvious here? Thanks all!

[nicasi]

Using Sublime Text 3 the easiest thing to do is to make a folder called emmet in your users folder. In Windows that's C:\users_your_username

In this folder you can place preferences.json and if you want to customize snippets also snippets.json

In preferences.json you put something like this:

{
    "css.autoInsertVendorPrefixes":false
}

More info here: https://github.com/sergeche/emmet-sublime#extensions-support

Here are the preferences and their defaults: http://docs.emmet.io/customization/preferences/

[geebru]

@nicasi - The issue (at least for me) is no longer getting the preference to work but how it's working with Flexbox.

With that option set to false, typical vendor-prefixed items are not prefixed, which is great and how it should work.

The problem with using df which should result in display: flex; is that the vendor prefixes for flex don't exist in the property but the value.

With the option set to false, the values of display: flex; continue to be prefixed.

It's not a deal breaker as typing display: flex; doesn't take much time but the option / preference doesn't seem to extend to values, only properties.

[nicooprat]

Seems like a bug to me! Here's my ~/emmet/preferences.json file:

{
  "css.autoInsertVendorPrefixes": false,
  "less.autoInsertVendorPrefixes": false,
  "scss.autoInsertVendorPrefixes": false,
  "sass.autoInsertVendorPrefixes": false,
  "caniuse.enabled": false,
  "caniuse.vendors": false,
}

(Using Atom 1.11.0-beta5)

[sergeche]

display: flex is actually a snippet, it’s not generated by CSS module. So you have to redefine df snippet as described here: http://docs.emmet.io/customization/snippets/

[nicooprat]

Thanks for your quick answer. Indeed, it works with this ~/emmet/snippets.json:

{
  "css": {
    "snippets": {
      "d:f": "display:flex;"
    }
  }
}

But I don't understand this behavior, since in the original file nothing differs between "d:f" and the others snippets... https://github.com/emmetio/emmet/blob/master/lib/snippets.json#L100 Why is this one different?

[sergeche]

Current CSS implementation simply checks if given property is available with standard vendor prefixes. In case of display: flex it actually requires more complex logic which that have to check which value should be inserted into specific vendor property. It’s not currently supported but might be available in future versions

[nicooprat]

Ok, thanks for the explanation! I think more and more developers use tools like Autoprefixer nowadays, so it could be cool to have this behavior disabled by default or an option to disable vendor prefixes completely.

[sergeche]

I agree, I might even add Autoprefixer itself as optional Emmet plugin so it can generate much better output for vendor prefixes

[jpeg729]

Disabling vendor prefixes did not disable prefixing on display: flex; for me. I also had to set either "caniuse.enabled": false or "caniuse.era": "e1" as per #421.