Search code examples
cssautoprefixer

Autoprefixer generically adds prefixes to browser-specific extensions

how to block autoprefixer from adding -webkit prefixes to a Mozilla specific extension ?

Here are some examples to make my point :

.custom-range::-moz-range-thumb {
    -webkit-transition: none;
    transition: none
}

-webkit-transition has nothing to do here as it is a Mozilla specific selector (::-moz-range-thumb).

Another crazy output happens with keyframes and transitions, as Autoprefixer creates useless variants 

  -webkit-transition: -webkit-box-shadow 0.1s ease-out;
  transition: -webkit-box-shadow 0.1s ease-out;
  transition: box-shadow 0.1s ease-out;
  transition: box-shadow 0.1s ease-out, -webkit-box-shadow 0.1s ease-out;

Instead of just

-webkit-transition: -webkit-box-shadow 0.1s ease-out;
      transition: box-shadow 0.1s ease-out;

How to fix this ? Thanks for your help.

Solution

  • You can force Autoprefixer to ignore specific blocks of CSS by using "Control Comments" (their words). It looks pretty flexible. 

    .className {
  /* autoprefixer: off */
  something: not-prefixed;
}

    Here's the documentation.

    But you might also want to submit a bug as what you're seeing could be filtered out.