@orby/style v0.0.2
@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
`);