npm i seniors-stylis
yarn add seniors-stylis

A custom build of Stylis

@emotion/stylis is a version of Stylis that has been modified slightly to make it smaller. The only Stylis option that can be changed is prefix, the rest of the options are already set to the values shown below and cannot be changed.

This package use the @emotion/stylis and deal with :host and ::slotted to legacy browsers.

type Options = {
  global: false,
  preserve: false,
  keyframe: false,
  semicolon: true,
  cascade: true,
  compress: false,
  prefix: boolean | ((key: string, value: string, context: number) => boolean),
}

import Stylis from 'seniors-stylis'
 
const stylis = new Stylis()
 
stylis.build(".css-hash", "display:flex;"); // .css-hash{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
 
// to legacy browsers
const legacy = true;
stylis.build(".css-hash", ":host(.hi) { color: green }", legacy); // .css-hash.hi{color :green;}

Thanks

• The emotion team did most of the work on this one, I just did some extra to work with :host and ::slotted in legacy browsers.
• Stylis was written by Sultan Tarimo.