How can multiple classes and animation keyframes be fully localized and made mappable?

Hello, I am hitting an edge case in a server-side / PWA hybrid that is causing crawlers to not see accurate server-side pre-rendered content (w/o client-side javascript execution), as well as users experiencing Cumulative Layout Shifts visually. The deeper reasoning for the architecture is beyond the scope of this issue, so will summarize what I’m hoping to do.

How can:

The following css be fully localized (either compiled via stylis or even via @emotion css / keyframes)?
Map the original class/keyframe names to their new localized names?

I have tried some hacks to individually parse through the compiled object, but it gets complicated with keyframes. When using @emotion css it does a good job, except wraps the entire thing into a single localized name making the others inaccessible, and it does not localize keyframes.

const cssString = `
  @keyframes spin {
    from { transform: rotate(0); }
    to { transform: rotate(180deg) }
  }

  .foo {
    @media (min-width: 500px) { font-size: 2.5em; }
    animation: spin 4s forwards;
    border: 4px dashed deeppink;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50%;
    width: 100%;
  }

  .bar {
    @media (min-width: 500px) { font-size: 0.5em; }
    animation: spin 4s forwards;
    border: 4px dashed limegreen;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50%;
    width: 100%;
  }
`;

const compiledResult = compile(cssString);

Both stylis and @emotion are amazingly powerful and greatly appreciate the work. I am using some techniques shared with me by @Andarist last year, mostly doing what's needed to move between objects and stringified css, but this current issue is escaping me.

Thanks for any help with this.

thysultan / stylis

How can multiple classes and animation keyframes be fully localized and made mappable? #297