A css template literal using stylis as a preprocessor
Uses Stylis underneath, so issues regarding styles should be opened over there.
Shamelessly adapted code from lit-element as can bee seen here
- Easy to use
$ npm install --save @niht/stylis
import { html } from "https://unpkg.com/@niht/stylis"
const color = true ? "green" : "red"
const template = css`
p {
color: ${color};
width: 500px;
border: 1px solid #000;
}
`
console.log(template.cssText) // valid string css, preprocessed by stylis
console.log(template.stylesheet) // CSSStylesheet to be used by DocumentOrShadowRoot.adoptedStyleSheets
What is adoptedStyleSheets? look here
- Browser Support: 😖 (polyfills might help)