@happycat/css

CSS

Minimal CSS in JS

Uses Stylis.js and auto-injects style (similar to emotion).

Install

ECMAScript module

<script type="module">
  import css from 'https://npmcdn.com/@happycat/css'
</script>

CommonJS

npm install @happycat/css

import css from '@happycat/css/cjs'

Script tag

<script src="https://npmcdn.com/@happycat/css/iife"></script>
<script>
  // happycat.css
</script>

Use

Simple

const pink = css('color: hotpink;')
document.body.innerHTML = '<h1 class="${pink}">I want it pink!</h1>'

Extend

const style = css(`
  font-size: 4em;
  color: blue;
`)

const pink = 'color: hotpink;'

const text = document.createElement('h1')

text.innerText = 'Hello'
text.className = css(style, pink)

document.body.appendChild(text)