Find and remove vendor prefixes in your CSS using Regex
By Mike Street
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! #
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:
\-Another literal dash - (so far matching: Everything before, but with an extra dash e.g.
(?!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
backfire. This means stamens such as
-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.
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.