autoprefixer: Regression: -webkit-box-orient rules removed

Possibly helpful for anyone reading up on this thread and problem, least intrusive option to prevent the removal of the line in question is to just disable the autoprefixer for this line/section

    /* autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */

@ai

  /* autoprefixer: ignore next */
  -webkit-box-orient: vertical;

It works, thank you very much.

@ai In my Vue project( use vue-cli init), I had tried many ways, such as

/*! autoprefixer: ignore next */

option - remove: false

/* autoprefixer: autoprefixer: off */
/* autoprefixer: autoprefixer: on */

browserList: ...

That not useful,only by this way

/*! autoprefixer: off */
...
 /*! autoprefixer: on */

case:

Can anyone please make a PR to fix this by default? This css rule is used together with -webkit-line-clamp to achieve multiline ellipsis even in the latest Chrome & Safari, and should NOT be removed.

line-height: 1em;
max-height: 2em;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;

the best solution is the follow, if you use less .test-orient{ display: -webkit-box; /*! autoprefixer: off / -webkit-box-orient: vertical; /! autoprefixer: on */ -webkit-line-clamp: 2; overflow: hidden; }

thanks @Lars-Weber for those working in scss, you need to add a ! to the start of the comment so that it is preserved for postcss:

.box-vertical {
    /*! autoprefixer: off */
    -webkit-box-orient: vertical;
}

I put it inside the rule, so that only that rule would be affected.

@Lars-Weber @plamitgma /* autoprefixer: off|on */ doesn’t work like this. This comment disable/enable Autoprefxier for whole block, not for next lines.

@shizitou create .browserslistrc file in your project root with this content:

defaults
Safari 6

Oh, I was passing remove:false to postcss-cssnext. Passing it on to autoprefixer results in -webkit-box-orient not being removed.

var postcss = require('postcss');

var css = postcss([
  require('postcss-cssnext')({
    browsers: 'chrome >= 42, safari >= 8',
    features: {
      autoprefixer: {remove: false}
    }
  })
]).process(`
.foo {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-box-align: stretch;
}`).css;

console.log(css);

I thought the behavior of the (default) remove:true option was to only remove outdated rules if the modern rule was specified too. So that display:-webkit-flex;display:flex; -> display:flex; if possible, but display:-webkit-flex; alone would remain as display:-webkit-flex;. This case still seems to be the same. The -webkit-box-orient rules uniquely being stripped unconditionally is surprising to me, and I wonder if it really is intended or best given that it doesn’t seem any other rules are treated like that.

@kmvan

it is wrong since autoprefixer: off/on disable/enable Autoprefixer for whole block, not next lines. Use autoprefixer ignore next (check docs for correct syntax).

    /*! autoprefixer: off */
    -webkit-box-orient: vertical;
    /*! autoprefixer: on */

Works, but needs to remove discardComments: { removeAll: true }, this line in webpack config file.

@xuanGetit it is wrong since autoprefixer: off/on disable/enable Autoprefixer for whole block, not next lines. Use autoprefixer ignore next (check docs for correct syntax).

Extra option is not a solution, because most of developers will not read docs.

If you want to fix it, send a PR removing this hack https://github.com/postcss/autoprefixer/blob/master/lib/processor.coffee#L133

@Lars-Weber best option is just add old Safari to browserslist config

Add any flexbox 2009 browser to browserslist in your package.json.

@jinglf000 I removed your comment since it is wrong to put off and on comments. Autoprefixer apply these comments to whole block, NOT next lines (Autoprefixer even show a warning about it).

In Sass use /*! autoprefixer: ignore next */