Autoprefixer: Ask not to remove the code: -webkit-box-orient

[eugle]

By default, Autoprefixer also removes outdated prefixes.This is not out of date, consider not removing it

[ai]

Can you post input CSS, output and expected output?

And Browserslist config.

[Dan503]

This is a repeat of issue https://github.com/postcss/autoprefixer/issues/776

People keep focusing on the wrong thing though.

This is a valid issue but the reason https://github.com/postcss/autoprefixer/issues/776 was closed is also valid.

-webkit-box-orient is outdated flexbox syntax. It translates to flex-direction in modern syntax.

The reason why people are getting annoyed at Autoprefixer is because Autoprefixer is breaking line-clamp and it has been for quite a while.

Using the old outdated flexbox syntax is the only way to make line-clamp work at the moment in any browser.

See this codepen as an example:

https://codepen.io/Yukishi/pen/zEBoMr

Also see https://github.com/postcss/autoprefixer/issues/776#issuecomment-423836152

line-clamp

Input CSS

.line-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

Current output CSS

(This breaks line-clamp in all _modern_ browsers)

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
}

Expected output CSS

.line-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

Flexbox

Input CSS

.line-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

Current output CSS

.line-clamp {
  display: -webkit-box;
}

Expected output CSS

If deleting old properties: (a warning should be provided if no modern syntax is provided as an alternative)

.line-clamp {
}

If aborting deletion due to no modern syntax being provided:

.line-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

If transforming old properties:

.line-clamp {
  display: flex;
  flex-direction: column;
}

The difference

Note that the key difference here is the presence of -webkit-line-clamp. If the rule contains -webkit-line-clamp Autoprefixer should not remove any of the old flexbox syntax.

If -webkit-line-clamp is _not_ present though, Autoprefixer should either remove or replace any old flexbox syntax with the modern equivalent.

Replacing the old syntax would be better but I'm not sure if that's in scope. If removing the old syntax, Autoprefixer should warn that it is doing so if there are no modern equivalents available. Autoprefixer is currently not outputting any warnings before removing properties in this use case.

Note that Autoprefixer is currently behaving exactly as expected when the syntax looks like this:

Input CSS

.line-clamp {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  flex-direction: column;
}

Output CSS (this is correct)

.line-clamp {
  display: flex;
  flex-direction: column;
}

Does that clear things up for you @ai?

[ai]

Yeap. I know about line-claimp case. I personally don’t like webkite-only hacks. So I do not want to spend my time to allow people to do them (but it is still possible by /* autoprefixer: ignore next */).

But I will accept PR if somebody will fix it.

[ai]

Fixed by 69ed8a0 and released in 9.6.1.