Stringify emotion js css results

Question

I have found that the emotion.js will create and append new style every time the styled props changes, this has a performance cost, especially when variable changes rapidly like when dragging an element.

One way to prevent emotion.js from creating new style is to not use props at all and instead using css variables, however this has it own challenges.

I thought if I found a way to stringy output result of the emotion.js css, I can append it manually with fixed class name to document head and change its content when needed, but apparently there is no way to do so, here is what I am expecting:

  const result = css`
   div {
      display: flex;
   }
  `.toString();

  console.log(result);

to print:

    div {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
    }

Any suggestion?

Answer 1

You can call the .styles method on your variable, i.e.

const result = css`
div {
    display: flex;
}`;

console.log(result.styles)

Result: "div{display:flex;};label:result;"