Emotion: Activating the Loom browser extension causes my emotion-based site to break

[fnune]

Current behavior:

I have an SSR setup with emotion using babel-plugin-emotion with default configuration. The initial HTML response from my server renders the site correctly. Among other interesting parts, it looks like this:

However, once the client bundle takes over, it looks like this:

Here's the fun part: I have the Loom extension activated. If I disable it, the footer renders correctly both before and after the client bundle takes over.

I read the CSS injected by Loom, but there are no clashing classes.

What I could observe was that after my client bundle loads, some of emotion's style tags are removed from the head. My suspicion is that Loom also has an instance of emotion and it's running [extractCritical](https://emotion.sh/docs/ssr#extractcritical) on my code? This sounds unlikely because extractCritical is supposed to run on top of the rendered tree from React, which would only affect their app.

To reproduce:

I'm sorry, but I can't produce a minimal reproducible example because I don't know where the problem originates. So I have to direct you to the website in question:

1. Use Chrome/Chromium, because Loom only works on Chrome/Chromium.
2. Install the Loom extension.
3. Visit this website.
4. Play around activating and deactivating Loom using chrome://extensions/ to see how that affects the website.

Expected behavior:

The header and the footer on my website do not break after the client bundle loads.

Environment information:

• react version: 16.10.2
• @emotion/core version: 10.0.22
• babel-plugin-emotion version: 10.0.22

Note:

I'm aware that this may just be a problem with the Loom extension. I wanted to raise this here, too, in case it's a bug in emotion.

[belgattitude]

Hey, nice catch. related to my issue #1745... Just tried in incognito (so loom is disabled) and it works.

[belgattitude]

For info, got this bug since yesterday (loom extension was updated at the same time). I'll try to contact them next morning.

[fnune]

I already did, they said they have a patch ready for release. However, could this also be a bug in emotion?

[fnune]

I've asked them to leave a post-mortem here, we'll see :relaxed:

[belgattitude]

@fnune

However, could this also be a bug in emotion?

Not sure, some other sites are impacted as well, ;i.e: https://www.algolia.com/pricing/ not sure if they use emotion or styled-components though... does it worth investigation ?

[n00b2pr0]

Seeing this Loom extension issue on a site I maintain. Same scenario with Loom, using Emotion and initially looks good but shortly after styles are broken.

[Andarist]

https://www.algolia.com/pricing/ not sure if they use emotion

There are some emotion styles there.

There is really not anything that emotion can do to prevent such issues, CSS are effectively global and if some other scripts mess up our styles it's their fault and the problem should be fixed there.

[einomi]

We are experiencing the same issue on our Gatsby+emotion.js websites

As a temporal workaround I've created this component that shows a message about Loom extension issue and suggests to turn it off until the new version is released.

import React from 'react';
import styled from '@emotion/styled';

const StyledBrokenStylesMessage = styled.div`
  display: none;
`;

function BrokenStylesMessage() {
  return (
    <StyledBrokenStylesMessage>
      <div
        style={{
          position: 'fixed',
          top: 0,
          left: 0,
          width: '100%',
          height: '100%',
          background: 'rgba(255,255,255,0.85)',
          textAlign: 'center',
          zIndex: 10000,
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
        }}
      >
        <div style={{ maxWidth: 450, color: '#1b1b1b' }}>
          <p
            style={{
              fontSize: 32,
              color: '#f3a5c1',
              fontWeight: 'bold',
            }}
          >
            If you’re seeing this message, please try to turn off your Loom
            browser extension and then reload the page.
          </p>
          <p style={{ fontSize: 18, marginTop: 30, lineHeight: 1.35 }}>
            For some reason, the new version of Loom extension is breaking CSS
            styles on some websites. We are sorry for bad experience, however
            Loom developers should release a new version of their extension soon
            that should fix this issue.
          </p>
        </div>
      </div>
    </StyledBrokenStylesMessage>
  );
}

export default BrokenStylesMessage;

[n00b2pr0]

I contacted Loom support last night and the got back to me. The plugin is now updated and this issue doesn't exist in the latest version. Their instructions were to remove and re-install the plugin.

That worked for me, but I don't know if the extension autoupdates for our customers. For now we're asking those that write in to re-install the extension.

[einomi]

It was reinstalled automatically in my Google Chrome and now I don't have this issue anymore.

[fnune]

I'm wondering how this may happen. I've only seen it happen on my emotion-based site.

Activating Loom makes some of emotion's generated style tags disappear.

This is why I'm assuming Loom include some instance of emotion that's removing the styles, taking them for unused styles.

[Andarist]

I've emailed Loom support with an offer to give them technical advice about Emotion if needed. Not much more that I can do, so given the fact that the issue got fixed on their site I consider this as resolved.

[alexbonine]

This is a longshot but I'm guessing there was no follow-up on this issue from Loom? I'm asking because I'm seeing my own extension built with Emotion breaking some sites that appear to also be using Emotion and I'd really love to stop it from doing that.

[alexbonine]

For future devs that land on this page, I was able to use @emotion/css/create-instance to create and export with a custom instance. I then replaced all imports of @emotion/react. I was not able to use createContext as it executes just by importing it into the build without even calling ReactDOM.render. The solution and more info here on the createContext issue: https://github.com/emotion-js/emotion/issues/2210#issuecomment-790783310.