Autoprefixer: Deactivate one css property from prefixing.

[philipisik]

Hi,

is it possible to deactivate one css property from prefixing globally e. g. in the grunt configuration? In my case I don't want that autoprefixer prefixes the css property flexbox for any browser. Thank you for your help.

cheers

Philip

[ai]

There is no config for it.

Tell my why you wan’t prefixes for flexbox and maybe I can suggest you a solution.

[ai]

You can disable Autoprefixer in some file or rule by /* autoprefixer: off */ comment https://github.com/postcss/autoprefixer#disabling

[philipisik]

Hi, thank you for your quick response. I know /* autoprefixer: off */, but I've to update existing scss files and it's stupid monkey work to put this comment manually before each flexbox property in a lot of files ;-)

But thank you again for your help!

Cheers Philip

[ai]

But why you doesn’t need prefix for flexbox?

[philipisik]

Safari has a flex bug while using flexbox for sticky footer with unkown height and because the latest Safari is using vendor prefix, I don't want a -webkit prefix.

[ai]

But it is only a one -webkit- old prefix. There is also -ms-, -moz- and -webkit- new prefix :).

[ai]

I think we can fix yoour sitiation with unlimited power of PostCSS. Lets write a small custom PostCSS plugin to remove -webkit- old prefixes.

Autoprefixer is a PostCSS plugin too. So you can execute Autoprefixer and your plugin together in gulp-postcss or grunt-postcss.

postcss([
    require('autoprefixer'),
    require('./safari-no-flexbox')
]);

safari-no-flexbox.js will looks like:

module.exports = function (css) {
    css.eachDecl('display', function (decl) {
        if ( decl.value  == '-webkit-box' ) decl.removeSelf();
    });
    css.eachDecl('-webkit-box-ordinal-group', function (decl) {
        decl.removeSelf();
    });
    css.eachDecl('-webkit-box-flex', function (decl) {
        decl.removeSelf();
    });
    css.eachDecl('-webkit-box-orient', function (decl) {
        decl.removeSelf();
    });
    css.eachDecl('-webkit-box-direction', function (decl) {
        decl.removeSelf();
    });
    css.eachDecl('-webkit-box-pack', function (decl) {
        decl.removeSelf();
    });
    css.eachDecl('-webkit-box-align', function (decl) {
        decl.removeSelf();
    });
};

[philipisik]

Man, that's awesome :-D Thank you so much for your help!

[paazmaya]

This is a great example. Could it be incorporated to the autoprefixer documentation?

[ai]

@paazmaya does Safari flexbox removing is a common task?

[simevidas]

@philipisik You’re having trouble with the old -webkit- flexbox features? But don’t the new features override the old ones? E.g.

display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex

Is display: -webkit-box; causing issues? Isn’t it overridden by display: -webkit-flex; in modern Safari?

[paazmaya]

@ai perhaps not specifically the given Safari use case, but it would demonstrate the simplicity of adding such a method.

[paazmaya]

@simevidas The order of the prefixes matters. The last one understood by Safari will be used, hence it is better to remove the old one all together, in order to avoid any mistakes.

[simevidas]

@paazmaya I see. Since Autoprefixer generates prefixes in the correct order, no further edits are needed, and this issue can only be caused by prefixes that were already in the source code before applying Autoprefixer, in which case it seems logical to run the custom plugin _before_, instead of after:

postcss([
    require('./safari-no-flexbox'),
    require('autoprefixer')
]);

[brookjordan]

I'd really like to be able to disable autoprefixer for transition-* properties.

Right now, transition is only a nice-to-have and if a browser doesn't support it unprefixed, I'm fine for it not to have it.
Having to convert all of my transition-property properties to transition is going to make complex transition overrides even more complex 😖

[ai]

Just write custom PostCSS plugin to remove prefixed transitions and run it after Autoprefixer. It will be 8 LOC.

[BB-000]

I'm trying to add a similar plugin (remove -ms-flexbox prefixes) to my grunt task but can't get it working from this or https://github.com/postcss/autoprefixer/issues/107 example
'Fatal error: postcss.eachDecl is not a function'

postcss-no-ms-flex.js

module.exports = function (css) {    
          css.eachDecl('display', function (decl) {
            if ( decl.value  == '-ms-flexbox' ) decl.removeSelf();
    });
    css.eachDecl('-ms-flex', function (decl) {
        decl.removeSelf();
    });
    css.eachDecl('-ms-flex-align', function (decl) {
        decl.removeSelf();
    });
    css.eachDecl('-ms-flex-item-align', function (decl) {
        decl.removeSelf();
    });
    css.eachDecl('-ms-flex-direction', function (decl) {
        decl.removeSelf();
    });
    css.eachDecl('-ms-flex-wrap', function (decl) {
        decl.removeSelf();
    });
};

I also tried

var postcss = require('postcss');

module.exports = postcss.plugin('flexbox-cleaner', function () {
    return function (css) {
        css.eachDecl('display', function (decl) {
            if ( decl.value  == '-ms-flexbox' ) decl.removeSelf();
        });
        css.eachDecl('-ms-flex', function (decl) {
            decl.removeSelf();
        });
        css.eachDecl('-ms-flex-align', function (decl) {
            decl.removeSelf();
        });
        css.eachDecl('-ms-flex-item-align', function (decl) {
            decl.removeSelf();
        });
        css.eachDecl('-ms-flex-direction', function (decl) {
            decl.removeSelf();
        });
        css.eachDecl('-ms-flex-wrap', function (decl) {
            decl.removeSelf();
        });
    };
});

Gruntfile.js

...
postcss: {
      options: {
           processors: [
                   require('autoprefixer')({browsers: 'last 2 versions'}),
                   require('./postcss-no-ms-flex')
            ]
        },
...
},
...

How can I get this to work? Thanks!

[ai]

@BB-000 first function receives plugin option, not css. It should return a function, receivescss.

var postcss = require ("postcss")
module.exports = postcss.plugin("ms-flexbox-cleaner", function () {
  return function (css) {
    // write your plugin here
  }
}

[BB-000]

Amazing thanks for quick reply!

Problem was I was using old functions, i swapped

css.eachDecl('display', function (decl) {
    if ( decl.value  == '-ms-flexbox' ) decl.removeSelf();
});

for

css.walkDecls('display', function (decl) {
    if ( decl.value  == '-ms-flexbox' ) decl.remove();
});

👍