Pylo

styled-jsx alternative for preact. supports nested <style> tags.

Example

<header>
  my red header

  <header>
    my blue header inside my red header
    <style type="jsx">{`
    header {
      background: blue;
    }
    `}</style>
  </header>

  <style type="jsx">{`
  header {
    background: red;
  }
  `}</style>
</header>

Design

• babel not needed
• runtime is 650 bytes
• nested <style> tag support
• <style jsx global> tag support
• zero dependencies in browser
• server-side rendering required
• dynamic styles possible, but not implemented

Install

npm install pylo

Setup

Server

const Stringify = require('preact-render-to-string')
const Server = require('pylo/server').default
const { options } = require('preact')

const flush = Server(options)
const html = Stringify(<Simple />) // component's html
const styles = flush() // list of preact vnodes you can stringify

Client

const Client = require('pylo/client').default
const { options, render } = require('preact')

const cleanup = Client(options)
const html = render(<Simple />, document.body)
cleanup() // detaches the render hook

Test

npm install --dev pylo
npm run test

License

MIT