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

[Macil]

While upgrading my dependencies on a project with some pretty old css (and which includes some webkit-specific hacks), I noticed an issue. Autoprefixer version 6.7.0 now entirely removes "-webkit-box-orient" rules. Version 6.6.1 did not have this issue.

.foo {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-box-align: stretch;
}

->

.foo {
  display: -webkit-box;
  -webkit-box-align: stretch;
}

Here's the code I've tested with:

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

[ai]

Is it a really issue if you ask Autoprefixer to remove old prefix? ;)

[IharKrasnik]

@ai How to preserve -webkit-box-orient?

[ai]

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

[IharKrasnik]

Thank you

[Macil]

@ai This still happens even if I add remove: false to the options.

[ai]

Are you sure that it does from Autoprefixer? Maybe some other tool (like minification in webpack’s css-loader) change file too?

[yidea]

tested out with css-loader remain the same version, Autoprefixer is the only factor remains that causing this

[Macil]

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.

[jrowlingson]

Disabling the remove option or adding a flexbox 2009 browser to browsers list are both fairly coarse workarounds for this type of scenario. Any interest in adding an option to opt-out of removal at the rule level?

[ai]

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

[jrowlingson]

@ai thanks - will do

[Lars-Weber]

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]

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

[plamitgma]

@Lars-Weber: awesome, thank you so much!

[ai]

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

[shizitou]

-webkit-box-orient: vertical can not be completed, you say"add old Safari to browserslist config".
I do not know how to write it. Can you give a specific example？
For beginners, please understand。 thank

[ai]

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

Safari 6

[kmvan]

@Lars-Weber Works man.
@ai

defaults
Safari 6

not works man.

[ai]

@kmvan do you created Browsersllist config?

[kmvan]

@ai Yes.
filename: .browserslistrc
content:

defaults
Safari 6

[ai]

@kmvan what is your input CSS, output, and expected output?

[kmvan]

@ai The output result -webkit-box-align: stretch; is missing. Expected output that keeps -webkit-box-align: stretch; .

[ai]

@kmvan what is CSS input? ;)

[kmvan]

@ai Sorry, not CSS. Just SCSS input: -webkit-box-align: stretch;

[ai]

@kmvan give me full rule (everything between { and } including a selector) of SCSS input, not a line.

[printjs]

@Lars-Weber
Thank you for your help.But the error occur when I use you method.

./node_modules/css-loader??ref--7-2!./node_modules/postcss-loader/lib??ref--7-3!./node_modules/stylus-loader??ref--7-4!./src/components/notecatalog/style.styl
(Emitted value instead of an instance of Error) autoprefixer: E:\code\webpack4\src\components\notecatalog\style.styl:21:28: Second Autoprefixer control comment was ignored. Autoprefixer applies control comment to whole block, not to next rules.
 @ ./src/components/notecatalog/style.styl 2:14-206 21:1-42:3 21:204-42:2 22:19-211
 @ ./src/components/notecatalog/index.tsx
 @ ./src/views/note/index.tsx
 @ ./src/route/entry.route.ts
 @ ./src/route/index.ts
 @ ./src/store/store.ts
 @ ./src/main.tsx
 @ multi webpack-hot-middleware/client?path=/__webpack_hmr&timeout=2000&reload=true ./src/main.tsx

[ai]

@wjtGitHub because it is a wrong code ;). /* autoprefixer: off */ disable Autoprefixer for the whole rule, not for next properties.

[fan-haobai]

最后回退到6.5.1了。

[lukechinworth]

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.

[wufu-fire]

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;
}

[ai]

@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).

[kmvan]

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

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

[ai]

@kmvan check my comment above

[ai]

@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).

[kmvan]

@ai

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

It works, thank you very much.

[minchangyong]

But it doesn't show up after packaging

[ai]

@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 */

[mebibou]

I've been trying to use /*! autoprefixer: ignore next */ in my sass file but it does not seem to be taken into account, probably something is removing the comment before autoprefixer tries to read it? my webpack config:

{
        test: /\.(sa|sc|c)ss$/,
        use: [
          devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader', // translates CSS into CommonJS modules
            options: {
              sourceMap: true
            }
          },
          {
            loader: 'resolve-url-loader',
            options: {
              attempts: 1,
              silent: true
            }
          },
          {
            loader: 'postcss-loader', // Run post css actions
            options: {
              sourceMap: true,
              plugins() { // post css plugins, can be exported to postcss.config.js
                return [
                  require('postcss-flexbugs-fixes'),
                  require('autoprefixer')
                ];
              }
            }
          },
          {
            loader: 'sass-loader', // compiles SASS to CSS
            options: {
              sourceMap: true
            }
          },
          {
            loader: 'sass-resources-loader',
            options: {
              resources: [
                `${conf.paths.src}/shared/mixins.scss`,
                `${conf.paths.library}/bootstrap-imports.scss`
              ]
            },
          }
        ]
      }

[jinglf000]

@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:

[meigesir]

@jinglf000 my autoprefixer version 7.2.6 work，tks.

[ai]

@meigesir you use very outdated Autoprefixer. The current version is 9.

[marialovesbeans]

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;

[eugle]

autoprefixer

Is it the same in less？ I used it in less, but it didn't work

[ai]

@zuobaiquan nope, off disable for the whole block. Use /* autoprefixer: ignore next */

[ai]

I am дщслштп this issue because many developers suggest wrong solution. The only right solution:

a {
  line-height: 1em;
  max-height: 2em;
  display: -webkit-box;
  /* autoprefixer: ignore next */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}