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.

[SUPPORT] Production build doesn't have prefixes

See original GitHub issue

As I undestood by reading the docs and many previous issues, emotion comes with some sort of autoprefixer out of the box.

Prefixes are added in development mode, yet in production they are not.

I’m using react-scripts wepack config.

Tried adding CacheProvider, still no changes.
Tried all sorts of browserslist, still no changes.

versions "@emotion/core": "^10.0.28" "@emotion/styled": "^10.0.27"

This issue can also be reproduced in circuit-ui: https://github.com/sumup-oss/circuit-ui/blob/5fbe0111738933acc82d352ac9581af989c38b24/.storybook/preview.js#L40-L50

Development mode display: flex is autoprefixed.
Production mode is not.

Am I missing something?

Any help would be highly appreciated.

Issue Analytics

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

Top GitHub Comments

1reaction

katalonnecommented, Jul 6, 2020

@bitbot-rafa It has to be the browserslist. It can also be already declared in your package.json

1reaction

Andaristcommented, Apr 3, 2020

Does it check in the runtime if a css property needs autoprefix based on useragent (maybe)?

No, we are “over-prefixing”. Supported properties are roughly those (although they are not 100% the same, it’s the same parser - stylis - just I’ve linked to its v4 and we are still on v3. I’ve linked to v4 code as it’s easier to see its supported properties).

Find any display: flex property value. To be more precise go to www.healthline.com and find css-lm0pdr class (as of current build).

This is not a repro case, it’s already built and minified site with a potentially very custom setup. I’ve tried to look into its minified source for a brief moment and it seems that it doesn’t have the prefixer in it (or at least doesn’t have some parts of it). It also contains es6+ code in place of what should be es5, so it definitely involves some custom build setup.

A repro case is something I can inspect from its source code to the final build artifacts - I can’t do that here.

Top Results From Across the Web

Why people use CSS vendor-prefix although the specs clearly ...

The vendor-prefixed properties you need to provide depends on what browsers you support. Within a given browser, the requirements often vary ...

Autoprefixer: A Postprocessor for Dealing with Vendor ...

Autoprefixer parses CSS files and adds vendor prefixes to CSS rules using the Can I Use database to determine which prefixes are needed....

Vendor Prefix - MDN Web Docs Glossary

Browser vendors used to add prefixes to experimental or nonstandard CSS properties and JavaScript APIs, so developers could experiment with ...

Adding a Path Prefix - Gatsby

Adding pathPrefix to gatsby-config; gatsby build; gatsby serve ... in production (but doesn't during development where paths don't need to be prefixed).

Adding Custom Environment Variables | Create React App

Since Create React App produces a static HTML/CSS/JS bundle, it can't possibly read them at runtime. To read them at runtime, you would...