postcss / autoprefixer

Parse CSS and add vendor prefixes to rules by Can I Use
https://twitter.com/autoprefixer
MIT License
21.66k stars 1.26k forks source link

Do not remove prefixes when using -webkit-line-clamp #1510

Closed Goodwine closed 7 months ago

Goodwine commented 7 months ago

This was previously discussed offline by @ai and @nex3, I'm just summarizing here:

Given this input:

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

And passing "last 1 chrome version"

Results on this output:

.foo {
  flex-direction: column;
  display: -webkit-box;
  -webkit-line-clamp: 4;
}

The -webkit-box-orient declaration got deleted, and this causes browsers to fail doing their line-clamp thingy because:

“It only works in combination with the display property set to -webkit-box or -webkit-inline-box and the -webkit-box-orient property set to vertical.” http://go/mdn/CSS/-webkit-line-clamp#content

@ai suggestion was (2023-Jul-10) to check for -webkit-line-clamp in the same rule. If it exists, don't remove -webkit-box-orient.

Note, this will not work 100% of the times, because I would write the declarations in separate rules:

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

And Autoprefixer would still delete -webkit-box-orient.

Goodwine commented 7 months ago

This issue is somewhat related to https://github.com/postcss/autoprefixer/issues/1322, but not entirely

ai commented 7 months ago

Please, send PR