Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Lighthouse 'Avoids old CSS flexbox' audit fails

See original GitHub issue

Can you reproduce the problem with latest npm?

Yes.

Description

The current autoprefixer options prefixes flexbox with old CSS rules, which fails the following Lighthouse audit: https://developers.google.com/web/tools/lighthouse/audits/old-flexbox

Expected behavior

Lighthouse audit ‘Avoids old CSS flexbox’ should pass.

Actual behavior

Lighthouse ‘Avoids old CSS flexbox’ audit fails. Expanding ‘More information’ in the audit reveals that autoprefixer has added display: -webkit-box; and display: -ms-flexbox; to the compiled CSS.

Reproducible Demo

create-react-app my-app && cd my-app
Add display: flex; to body selector in src/index.css.
npm start or npm run build and open local page in browser.
Run Lighthouse audit.

Issue Analytics

State:
Created 7 years ago
Comments:13 (13 by maintainers)

Top GitHub Comments

1reaction

cr101commented, Mar 7, 2017

You’ll probably want to edit Webpack configs in packages/react-scripts/configs and pass postscript plugins (or options) there.

I’ll give it a go

0reactions

gaearoncommented, May 16, 2017

Please help beta test the new version that includes this change! https://github.com/facebookincubator/create-react-app/issues/2172

Top Results From Across the Web

Content is not sized correctly for the viewport - Stack Overflow

I am deploying my webiste to production and running the Lighthouse audit. The audit is throwing an error when running the audit.

Lighthouse: Optimize website speed - Chrome Developers

Audits. Disabling a category prevents the Audits panel from running those audits, and excludes those audits from your report.

HubSpot COS(CMS), meet Lighthouse | by Mike Rizzo - Medium

We've compiled some recommendations for modernizing your web app and avoiding performance pitfalls. These audits do not affect your score but are worth...

lighthouse/changelog.md - UNPKG

Lighthouse 7.0 includes a number of programmatic breaking changes and new audits in the **Accessibility** and **PWA** categories. There were some improvements ...

lighthouse | Yarn - Package Manager

Automated auditing, performance metrics, and best practices for the web. google, chrome, devtools. readme. changelog. 9.6.8 (2022-10 ...