support remove styles of `injectGlobal`

The problem

I am using emotion in sevelte components, where I can’t use @emotion/react, and instead I could use @emotion/css.

I want to inject some global styles when component mount and remove them when component unmount. With injectGlobal I have no way to undo the injection.

Proposed solution

Alternative solutions

Additional context

• @emotion/css: 11.0.0

[Andarist]

This is an interesting use case but it’s also quite problematic to handle right now and supporting this out of the box in the current injectGlobal could have been a breaking change.

You can implement your own version of injectGlobal under 20 LOC that would support this:

import { serializeStyles } from "@emotion/serialize";
import { StyleSheet } from "@emotion/sheet";
import { serialize, compile, middleware, rulesheet, stringify } from "stylis";

function injectGlobal(...args) {
  const { name, styles } = serializeStyles(...args);
  const sheet = new StyleSheet({
    key: `global-${name}`,
    container: document.head
  });
  const stylis = (styles) =>
    serialize(
      compile(styles),
      middleware([
        stringify,
        rulesheet((rule) => {
          sheet.insert(rule);
        })
      ])
    );
  stylis(styles);
  return () => sheet.flush();
}

You can check out the demo here. It’s using React for rendering as that was just convenient for me but doesn’t use any React-specific APIs for styling.

[gregjacobs]

@Andarist Interesting. Ok, thanks for that, and the quick response. Removal of rules has been on the back of my mind for large portal systems which load many apps as the user is using it, but maybe it’s not necessary after all.

Best, Greg