Remove incorrect warning: end value has mixed support, consider using flex-end instead

[maszynka]

Autoprefixer (or browserify) suggest that:

• start and flex-start
• end and flex-end are the same values where actually properties like: justify-content, align-self are used in Grid layout as well.

They won't work the same way when you convert them to 'flex-end' and they will, in fact, break layout.

From MDN:

The align-self CSS property overrides a grid or flex item's align-items value. In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis.

What's the reason of this warning and how to fix it?

[ai]

What's the reason of this warning

mixed support during the Flexbox implementation.

Check browsers compatibility of start and align-self.

justify-content, align-self are used in Grid layout as well.

We are showing this warning only if display: flex is in the same rule https://github.com/postcss/autoprefixer/blob/main/lib/processor.js#L152

[runarberg]

Browser support is over 90% already https://caniuse.com/mdn-css_properties_align-items_flex_context_start_end

However there is an issue with the suggestion if flex-direction is e.g. row-reverse. start/end are writing-mode related while flex-start/flex-end are flow related.

https://stackoverflow.com/a/54278834/2444959

[ai]

90% is still not very big.

Do you have a real reason for using only writing-mode related property?

[runarberg]

I meant the suggestion is wrong:

align-items: start;
display: flex;
flex-direction: row-reverse;

will yield a different layout from

align-items: flex-start;
display: flex;
flex-direction: row-reverse;

In flex layout which uses a -reverse direction, the suggestion should be flipped.

[ai]

Can you in this case just use flex-end? We can make warning smarter, but anyway it is not auto-fix, you need to think before adding changes.

[EmeMatch]

I believe that the display:flex warning rule is wrong because I'm only using display:flex and not display:box. Why does it ask to replace display: box to display: flex ?

What is the recommendation for this warning not to appear?

[ai]

Why does it ask to replace display: box to display: flex ?

Because box is deprecated

[EmeMatch]

ok, but I don't use display: box and still the warning keeps appearing.

I believe there is something wrongly treating display: flex or another property.

on line 135 in processor.js

[ai]

@EmeMatch debug this line, check the CSS input to Autoprefixer. Very likely that some other tool adds display: box before Autoprefixer in your CSS build pipeline.

[just-boris]

Even if this property has mixed support, should this behavior follow the definitions in browserslist? So, if the property is consistently supported across declared browser versions range, the warning won't be printed?

[ai]

Even if this property has mixed support, should this behavior follow the definitions in browserslist? So, if the property is consistently supported across declared browser versions range, the warning won't be printed?

No, there is no such check in Autoprefixer.

PR is welcome.

[dreyks]

https://caniuse.com/mdn-css_properties_align-items_flex_context_start_end

as far as i understand this data comes from MDN browser compatibility data, not from caniuse. do I understand correctly that caniuse-lite (which is used by autoprefixer) can't help us here? Trying to see if I can come up with a PR for this

[ai]

@dreyks yes. We can add some MDN pages to caniuse-db. Send PR like you have this data.

[omril1]

What if I don't care if it's "technically" correct or not? Is there an option at least to remove this warning?

[ai]

Is there an option at least to remove this warning?

Write custom PostCSS plugin which will clean result.messages

[omril1]

Write custom PostCSS plugin which will clean result.messages

Doesn't "feel right" to me to write a custom plugin just to make it stop printing a warning that should've been optional. IMHO this isn't esoteric enough for a custom plugin

[Teamop]

I think after 10.4.19 - https://github.com/postcss/autoprefixer/releases/tag/10.4.19, this issue can be closed