Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ghivert/hyperapp-style

Use CSS-in-JS directly in your Hyperapp app, handling media queries and pseudo-classes!
https://github.com/ghivert/hyperapp-style

css css-in-js frontend hyperapp single-page-app

Last synced: 10 days ago
JSON representation

Use CSS-in-JS directly in your Hyperapp app, handling media queries and pseudo-classes!

Awesome Lists containing this project

README 

        
# Hyperapp Style



Built around Hyperapp, Hyperapp Style let you inline style all your components without hassle, with all the power of CSS! When you use Hyperapp, you can use the `style` attribute out of the box, to inline style your elements. They are added in the `state` attribute in the generated HTML. Not anymore! When using Hyperapp Style, all the style you write in your HTML is directly compiled into CSS classes, and pushed directly to the DOM using CSS Object Model (or CSSOM)!



# An example?



```jsx

import { app } from 'hyperapp'

import h from 'hyperapp-style'



const state = {}

const actions = {}



const view = (state, actions) => (

  


    

    


  

)



const Navbar = () => (state, actions) => (

  

    

    Home

  

)



const Body = () => (state, actions) => (

  


    
I'm an incredible example!


  


)



app(state, actions, view, document.getElementById('app'))

```



In this example, your div in Body will have a `background-color-blue` class linked in the class attribute, and the corresponding atomic class will be put into your browser, directly into a style node into the `head` section of the HTML page.



# API



## Using CSS



Describing the style for an element is easy: just use classic CSS, but camelized. `background-color` becomes `backgroundColor`, `font-size` becomes `fontSize`, etc. The CSS key is the object key, and you can just write as string or int the value you want.



## Using pseudo-classes



Every key you enter in the style object which does not have a value associated (i.e. which have an object) will be considered as pseudo-class entry. Let's say you want to have a different behavior when you hover an element. You can't use a `:hover` class when you're using an inline style. But with Hyperapp Style, you can. An example.



```jsx

import { app } from 'hyperapp'

import h from 'hyperapp-style'



const state = {}

const actions = {}



const view = (state, actions) => (

  


    

    


  

)



const Navbar = () => (state, actions) => (

  

    

    Home

  

)



// We want this component to be blue, and red when hovered.

const Body = () => (state, actions) => (

  


    
I'm an incredible example!


  


)



app(state, actions, view, document.getElementById('app'))

```



When using the `hover` key in the style attribute, and setting an object as value, all CSS inside the object will be considered as pseudo-classed! And this is working with everything you want: hover, active, inactive, invalid, valid, etc.



## About the media queries



There is three special cases in the style object: `widths` (and not `width`, which is regular CSS, be careful), `screen` and `mobile`. They are special keys used to generate media queries. The `screen` and `mobile` key are regular keys, like pseudo-classes, but generates media queries. (Under the hood, it computes the atomic class and surround the class with a `@media screen { the-rule }`.)  

`widths` is a little bit different: it accepts an array of objects as value, and each object is a regular style object as usual, but in which you can add a `max` and a `min` keys, which correspond to the `max-width` and `min-width` in the media queries! Let's illustrate this.



```jsx

import { app } from 'hyperapp'

import h from 'hyperapp-style'



const state = {}

const actions = {}



const view = (state, actions) => (

  


    

    


  

)



const Navbar = () => (state, actions) => (

  

    

    Home

  

)



// This component is green on small screens, yellow on medium, and

// red on huge screens. Text is also yellow on small screen and cyan

// on small mobile.

const Body = () => (state, actions) => (

  


    
I'm an incredible example!


  


)



app(state, actions, view, document.getElementById('app'))

```



To be precise on media queries, they are applied in order of importance, accordingly to the style object, from top to bottom. The last style applied on element will be the last style in the array.



## Using style in functions



When you're using JSX, you can use lowercased words, like `div`, and capitalized words, like `NavBar` in your tags. According to the case, it will not search and render things in the same way. In the first case, it will generate a corresponding HTML element. In the other case, it will render what you want by calling the corresponding function. In this case, you maybe want to access the `style` property in the function? Well, you can! Just use `props.style` and you're good!



An example to help you understand.



```jsx

const Flex = (props, children) => (

  
{children}


)



const App = (state, actions) => (

  

)

```



In this case, the styles are not computed right now, and you're free to use them in your functions to combine them, or whatever you want!



# Final words



If you went through all of this, you're ready to use Hyperapp Style in all your Hyperapp apps!



# Contributing



I love to hear from you if you're using this package! Please, let me know if you encounter bugs or problem, and feel free to submit PR if you think you got something I didn't thought about!