Avoid old CSS flexbox (PWA, Google Lighthouse)

[sebastienbarre]

Howdy.
I'm running Google Lighthouse to audit my app against Progressive Web Apps best practices, and I'm getting some warnings.

Avoids old CSS flexbox 
The 2009 spec of Flexbox is deprecated and is 2.3x slower than the latest spec
.flex {
  display:-webkit-box;
}
 .flex-m {
  display:-ms-flexbox;
}
etc.

See Flexbox layout isn't slow for Old v New Flexbox Benchmark.
See: Site Does Not Use The Old CSS Flexbox

How to pass the audit

Under URLs, Lighthouse lists every instance of display: box that it found on your page's stylesheets. Replace every instance with the new syntax, display: flex.

If a stylesheet is using display: box, then it may be using other deprecated Flexbox properties. In short, every property that begins with box, such as box-flex, is deprecated and should be replaced. See CSS Flexbox 2009/2011 Spec Syntax Property Mapping to see exactly how the old properties map to the new ones.

@mrmrs do you feel strongly about that one?
Thanks

[sebastienbarre]

From what I gather in this create-react-app issue you may need to pass the flexbox: 'no-2009' option to autoprefixer in tachyons-css/tachyons-build-css.

Or use luisrudge/postcss-flexbugs-fixes: PostCSS plugin that tries to fix all of flexbug's issues, since the build pipeline is already based on PostCSS (see philipwalton/flexbugs: A community-curated list of flexbox issues and cross-browser workarounds for them.).

[mrkhdly]

Tachyons v5 will become a monorepo so this issue is being closed, if the issue is still relevant please open an issue with the main repo https://github.com/tachyons-css/tachyons/issues/new & link to this one