Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Production build returns multiple styles #1370

Closed
GitProdEnv opened this issue May 28, 2019 · 13 comments
Closed

Production build returns multiple styles #1370

GitProdEnv opened this issue May 28, 2019 · 13 comments

Comments

@GitProdEnv
Copy link

GitProdEnv commented May 28, 2019 •
edited
Loading

Current behavior:

I use Emotion with "@emotion/babel-preset-css-prop". In production environment Emotion creates multiple style tags. This is desired for the dev environment, but not for production.

To reproduce:

  1. For testing purposes I have created a simple React component.
class Welcome extends React.Component {
  render() {
    return (
      <div css={{ backgroundColor: 'red' }}>
        <div css={{ color: 'yellow'}}>Yellow div</div>
    );
  }
}
  1. In the .babelrc within the production env, I have added within the presets at the first place the @emotion/babel-preset-css-prop.
"production": {
  "presets": [
    ["@emotion/babel-preset-css-prop"],
    [
      "@babel/preset-env",
      {
        "useBuiltIns": false,
        "targets": {
          "browsers": ["last 2 versions"]
        },
        "debug": false
      }
    ],
    ["@babel/preset-typescript"],
    "@babel/preset-react"
  ],
  "plugins": [ .... ]
  1. I get one global stylesheet file, but each css styling gets rendered in a new style tag within the html head. This is on purpose for the dev build, but not for production mode.

Given the component above my head looks as following:

<style data-emotion="css-global"></style>
<style data-emotion-css="f5yfbg">.css-f5yfbg{background-color:red;}</style>
<style data-emotion-css="fsfbn2">.css-fsfbn2{color:yellow;}</style>

I read all issues regarding to Emotion, but I couldn't find something similiar.

Expected behavior:

Emotion should render one single stylesheet file.

Environment information:

  • react version: 16.8.6
  • emotion version: [
    "@emotion/core": "^10.0.10",
    "@emotion/styled": "^10.0.4",
    "@emotion/babel-preset-css-prop": "^10.0.9"
    ]
@FezVrasta
Copy link
Member

Hi. Please make sure to follow the issue template, it will help us to help you.

@dgwyer
Copy link

dgwyer commented Aug 24, 2019

I'm facing the exact same issue. I'd like just one <style> tag outputted rather than several individual ones. Is this possible?

@baldurh
Copy link

baldurh commented Sep 5, 2019

Has anyone looked into this? We have the same problem. We’re developing a big page in Next.js and Emotion is injecting 11 style tags for global styles and 191 style tags for other styles in production builds. Of course the style tags are spread out in the DOM and moved to <head> on runtime but chrome audit still detects it and lowers our score because of this.

Can we somehow disable inline style tags and just inject the styles ourselves during SSR?

@Andarist
Copy link
Member

Andarist commented Sep 5, 2019

@baldurh yes, you can use old SSR API as described here https://emotion.sh/docs/ssr

@baldurh
Copy link

baldurh commented Sep 5, 2019

@Andarist thanks! OK so does that then not inject inline <style> tags?

@Andarist
Copy link
Member

Andarist commented Sep 5, 2019

I believe so, u can check out tests to verify

@baldurh
Copy link

baldurh commented Sep 5, 2019

@Andarist I’ve managed to get it working. Thanks! One weird thing however, it seems the styles from react-select are somehow slipping by the extraction 🤷‍♂
But we’ve managed to go from 200 <style> tags to 20 in the SSR markup! 🎉

@Andarist
Copy link
Member

One weird thing however, it seems the styles from react-select are somehow slipping by the extraction 🤷‍♂

You'd have to share a runnable repro case so I could take a look at this. If you create such then please just create a new issue about this.

Other than that I consider this issue as resolved. Multiple style tags are expected, unless you are using "old" SSR APIs.

@dgwyer
Copy link

dgwyer commented Oct 28, 2019

Would it not be possible to look into combining Emotion styles into (preferably) a single style tag or reduce the number?

The large number of individual style tags put me off using this for production projects.

@baldurh
Copy link

baldurh commented Oct 28, 2019

Would it not be possible to look into combining Emotion styles into (preferably) a single style tag or reduce the number?

The large number of individual style tags put me off using this for production projects.

I guess it makes sense that the default behavior just works and it does that by injecting the style tags where the styles are used. You could try our approach using the style extraction. It has been working well for us

This was referenced Dec 6, 2019
Closed
Merged
@SimonKlausLudwig
Copy link

@baldurh baldurh How did you get it working ? Could you append a codesnippe or point me to the right direction ?

@LekoArts LekoArts mentioned this issue Sep 21, 2020
Closed
@IRediTOTO
Copy link

I really want create a seperate css file, don't like css in html. :( it can make site slow down (1% i think XD)...

@ZeeshanTamboli ZeeshanTamboli mentioned this issue Aug 1, 2022
Closed
2 tasks
@addlistener
Copy link

@baldurh Could you share some piece of code?

Specifically I cannot make it because I want some custom namespace... #3238

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
8 participants
@dgwyer @baldurh @addlistener @FezVrasta @Andarist @SimonKlausLudwig @IRediTOTO @GitProdEnv