seniors-stylis
v1.0.1
Published
@emotion/stylis to browsers which can't use :host() or :slotted()
Downloads
3
Readme
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.