Upgrade to stylis 3.2 and use constructor

[kitten]

This prevents bugs with shared options when different libraries all use
stylis.

cc @thysultan Is the keyframe option for namespacing broken? I'm seeing some regressions with mangled animation names.

Edit:

-@-webkit-keyframes keyframe_880{ from{ opacity: 0; } } @keyframes keyframe_880{ from{ opacity: 0; } } .sc-a{ } .d{ -webkit-animation:keyframe_880 1s both; animation:keyframe_880 1s both; } @-webkit-keyframes keyframe_144{ from{ opacity: 1; } } @keyframes keyframe_144{ from{ opacity: 1; } } .sc-b{ } .c{ -webkit-animation:keyframe_144 1s both; animation:keyframe_144 1s both; }
+@-webkit-keyframes keyframe_880{ from{ opacity: 0; } } @keyframes keyframe_880{ from{ opacity: 0; } } .sc-a{ } .d{ -webkit-animation:keyframe_880-d 1s both; animation:keyframe_880-d 1s both; } @-webkit-keyframes keyframe_144{ from{ opacity: 1; } } @keyframes keyframe_144{ from{ opacity: 1; } } .sc-b{ } .c{ -webkit-animation:keyframe_144-c 1s both; animation:keyframe_144-c 1s both; }

[thysultan]

Patched in 3.2.1 the bug was with the new Stylis(options) pattern. Specifically the options where not being passed through.

[mxstbr]

Is this the only place we use stylis?

[kitten]

@mxstbr yes, it's pretty contained 😬