Find and remove vendor prefixes in your CSS using Regex

I recently set out to remove all of the vendor prefixes from the CSS for all of our clients at work. This is because we use Gulp with Autoprefixer - which means we have up-to-date prefixes and cleaner SCSS.

One way of doing this would be to open every CSS file, search for -moz, then search for -webkit etc. Some of the CSS I was searching through is well over 5 years old and is rife with vendor prefixes.

Regex to the rescue!

\-(moz|o|webkit|ms|khtml)\-(?!font-smoothing|osx|print|backface).+?;

This is the regular expression I came up with. Using Atom’s built in “Find in Project” tool, with the regex button checked, I was quickly able to find and eliminate the prefixes.

Regex breakdown

For those interested, I’ve broken down the expression below:

• \- This is a literal dash (so far matching: -)
• (moz|o|webkit|ms|khtml) The pipe and brackets act as an or statement (so far matching: -moz OR -o OR -webkit OR -ms OR -khtml)
• \- Another literal dash - (so far matching: Everything before, but with an extra dash e.g. -moz-)
• (?!font-smoothing|osx|print) Similar to the or statement before, the interrobang means not. (so far matching: Everything beggining with the previous or statements, unless they are followed by font-smoothing OR osx OR print OR backfire. This means stamens such as -webkit-font-smoothing: antialiased; and -moz-osx-font-smoothing: grayscale; are ignored)
• .+? This selects anything following the previously selected selected, until the final ; (at the end of the regex) - this means the whole line is selected.

See the Regex in action!

Deleting the lines

For those interested in how I quickly deleted the lines, I installed the delete-lines plugin and passed the same regex into the field when I had the file open.