Regression: -webkit-box-orient rules removed

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

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

@ai

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

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

Thank you

@ai

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

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

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

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.

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?

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

@ai

@ai thanks - will do

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

@Lars-Weber

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

@Lars-Weber

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

@jinglf000

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

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`
              ]
            },
          }
        ]
      }

@ai

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

@jinglf000

@jinglf000 my autoprefixer version 7.2.6 work，tks.

@meigesir

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

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;

autoprefixer

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

fix: autoprefixer remove of box-orient

@zuobaiquan

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

I am closing 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;
}

Navigation Menu

Repository navigation

Regression: -webkit-box-orient rules removed #776

24 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Regression: -webkit-box-orient rules removed #776

Description

Activity

ai commented on Jan 25, 2017

IharKrasnik commented on Jan 25, 2017

ai commented on Jan 25, 2017

IharKrasnik commented on Jan 25, 2017

Macil commented on Jan 25, 2017

ai commented on Jan 25, 2017

yidea commented on Jan 26, 2017

Macil commented on Jan 26, 2017

jrowlingson commented on Jan 27, 2017

ai commented on Jan 27, 2017

jrowlingson commented on Jan 27, 2017

Lars-Weber commented on Apr 27, 2017

ai commented on Apr 27, 2017

plamitgma commented on Jan 10, 2018

24 remaining items

ai commented on Jun 29, 2018

mebibou commented on Jul 11, 2018

jinglf000 commented on Jul 12, 2018

meigesir commented on Jul 21, 2018

ai commented on Jul 21, 2018

marialovesbeans commented on Sep 23, 2018

eugle commented on Oct 17, 2018

ai commented on Nov 30, 2018

ai commented on Dec 7, 2018

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions