@orby/style

Create stylized components with a minimalist syntax, @ orby / style is compatible with Orby,Preact,Hyperapp and React

import {h,render} from "@orby/core";
import create from "@orby/style";

let styled = create(h);

let Spinner = styled("div")(`
   :global(body)
       background:black
      
   :host
       width:20px
       height:20px
       border:radius
       border:1px solid white
       border-bottom:none
       animation:rotate 1s alternate infinite

   @keyframes rotate
       0%
           transform:rotate(0deg)
       100%
           transform:rotate(360deg)
`);

render(
   <Spinner>title</Spinner>,
   document.body
)

Scope :host

By default @orby/style limits the context only to the class generated for the component, anyway you can escape from this context by using :global(<selector>)

let Form = styled("form")(`
   :host
       display: flex
       flex-flow: column wrap

   input
       width: 320px
       height: 40px

   button
       padding: .5rem 1.5rem
       border-radius: 50px

   input,button
       background: transparent
       border: 1px solid white

`)

<Form>
   <input placeholder="input"/>
   <button>Send</button>
</Form>

:host allows to point to the container, both input and button will own style being only inside the container component <Form/>

This can also have interaction based on some selector

let Button = styled("button")(`
   :host(.success)
       background: teal

   :host(.danger)
       background: gold

   :host(.error)
       background: tomato
`)

<Button class="success"/>
<Button class="danger"/>
<Button class="error"/>

Not only is it limited to selectors by class, you can use any type of selector :host(:not(.success),:not(.danger))

keyframes

Keyframes also have only one scope inside the container

let Spinner = styled("div")(`
   :host
       animation:rotate 1s alternate infinite

   @keyframes rotate
       0%
           transform:rotate(0deg)
       100%
           transform:rotate(360deg)
`);

scope :global

:global allows to escape with the associated selector of the host range, for example if we wanted to add a style on the body tag we can do the following

let Page = styled("div")(`
   :global(body)
       background: black
`);