Niht Stylis

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

Highlights

• Easy to use

Install

$ npm install --save @niht/stylis

Usage

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

Questions

What is adoptedStyleSheets? look here

• Browser Support: 😖 (polyfills might help)