Prepended auto-prefixed css variables in Visual Studio Code

Question

Is there a way to set css-auto-prefixer in Visual Studio Code to prepend the auto-prefixed css values rather than append them?

When I type in a prefix-able property, such as border-radius the auto-prefixer adds -webkit-border-radius (as expected). But it appends it to the list and when a browser like Firefox goes through the list of properties, it ends up using the -webkit version since it came last.

border-radius: .5rem;
-webkit-border-radius: .5rem;

As it is a cascading style sheet, one would think the unprefixed current property should come last and the retro properties first.

-webkit-border-radius: .5rem;
border-radius: .5rem;

Answer 1

Type it like this:

-bdrs and then when you choose border-radius from the sugggestions, the vendor prefixes will be completed before the un-prefixed version. So start the property with the dash - to get that functionality.

This is literally the example from the documentation: see https://code.visualstudio.com/docs/editor/emmet#_include-vendor-prefixes .

---

If you don't want to use emmet abbreviations, look at https://marketplace.visualstudio.com/items?itemName=sporiley.css-auto-prefix or https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-autoprefixer