New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
Macil opened this Issue Jan 25, 2017 · 45 comments

Comments

Projects
None yet
@Macil
Copy link

Macil commented Jan 25, 2017

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

This comment has been minimized.

Copy link
Member

ai commented Jan 25, 2017

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

@IharKrasnik

This comment has been minimized.

Copy link

IharKrasnik commented Jan 25, 2017

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

@ai

This comment has been minimized.

Copy link
Member

ai commented Jan 25, 2017

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

@IharKrasnik

This comment has been minimized.

Copy link

IharKrasnik commented Jan 25, 2017

Thank you

@ai ai closed this Jan 25, 2017

@Macil

This comment has been minimized.

Copy link
Author

Macil commented Jan 25, 2017

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

@ai

This comment has been minimized.

Copy link
Member

ai commented Jan 25, 2017

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

@yidea

This comment has been minimized.

Copy link

yidea commented Jan 26, 2017

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

@Macil

This comment has been minimized.

Copy link
Author

Macil commented Jan 26, 2017

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

This comment has been minimized.

Copy link

jrowlingson commented Jan 27, 2017

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

This comment has been minimized.

Copy link
Member

ai commented Jan 27, 2017

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

This comment has been minimized.

Copy link

jrowlingson commented Jan 27, 2017

@ai thanks - will do

@Lars-Weber

This comment has been minimized.

Copy link

Lars-Weber commented Apr 27, 2017

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

This comment has been minimized.

Copy link
Member

ai commented Apr 27, 2017

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

@plamitgma

This comment has been minimized.

Copy link

plamitgma commented Jan 10, 2018

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

@ai

This comment has been minimized.

Copy link
Member

ai commented Jan 10, 2018

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

@shizitou

This comment has been minimized.

Copy link

shizitou commented Mar 5, 2018

-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

This comment has been minimized.

Copy link
Member

ai commented Mar 5, 2018

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

defaults
Safari 6
@kmvan

This comment has been minimized.

Copy link

kmvan commented Mar 26, 2018

@Lars-Weber Works man.
@ai

defaults
Safari 6

not works man.

@ai

This comment has been minimized.

Copy link
Member

ai commented Mar 26, 2018

@kmvan do you created Browsersllist config?

@kmvan

This comment has been minimized.

Copy link

kmvan commented Mar 26, 2018

@ai Yes.
filename: .browserslistrc
content:

defaults
Safari 6

@ai

This comment has been minimized.

Copy link
Member

ai commented Mar 26, 2018

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

@kmvan

This comment has been minimized.

Copy link

kmvan commented Mar 26, 2018

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

@ai

This comment has been minimized.

Copy link
Member

ai commented Mar 26, 2018

@kmvan what is CSS input? ;)

@kmvan

This comment has been minimized.

Copy link

kmvan commented Mar 26, 2018

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

@ai

This comment has been minimized.

Copy link
Member

ai commented Mar 26, 2018

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

@printjs

This comment has been minimized.

Copy link

printjs commented Apr 13, 2018

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

This comment has been minimized.

Copy link

lukechinworth commented May 24, 2018

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.

@xuanGetit

This comment has been minimized.

Copy link

xuanGetit commented May 27, 2018

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

This comment has been minimized.

Copy link
Member

ai commented May 27, 2018

@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

This comment has been minimized.

Copy link

kmvan commented May 27, 2018

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

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

@ai

This comment has been minimized.

Copy link
Member

ai commented May 27, 2018

@kmvan check my comment above

@ai

This comment has been minimized.

Copy link
Member

ai commented May 27, 2018

@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

This comment has been minimized.

Copy link

kmvan commented May 27, 2018

@ai

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

It works, thank you very much.

@minchangyong

This comment has been minimized.

Copy link

minchangyong commented Jun 4, 2018

But it doesn't show up after packaging

@ai

This comment has been minimized.

Copy link
Member

ai commented Jun 29, 2018

@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

This comment has been minimized.

Copy link

mebibou commented Jul 11, 2018

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

This comment has been minimized.

Copy link

jinglf000 commented Jul 12, 2018

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

@meigesir

This comment has been minimized.

Copy link

meigesir commented Jul 21, 2018

@jinglf000 my autoprefixer version 7.2.6 work,tks.

@ai

This comment has been minimized.

Copy link
Member

ai commented Jul 21, 2018

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

@postcss postcss deleted a comment from Benbzhou Sep 11, 2018

@marialovesbeans

This comment has been minimized.

Copy link

marialovesbeans commented Sep 23, 2018

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

This comment has been minimized.

Copy link

eugle commented Oct 17, 2018

autoprefixer

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

wssgcg1213 added a commit to alibaba/rax that referenced this issue Nov 30, 2018

@ai

This comment has been minimized.

Copy link
Member

ai commented Nov 30, 2018

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

@ai

This comment has been minimized.

Copy link
Member

ai commented Dec 7, 2018

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

@postcss postcss locked as resolved and limited conversation to collaborators Dec 7, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.