@figouzes/falcon-css v0.3.13

What is FalconCSS ?

When contributing to the Figouzes project, I wanted to introduce a type-safe way to write CSS. I got used to a wonderful library called elm-css, which is, in my opinion, a really optimal way of composing CSS (I could never thank RTFeldman enough for his work on elm-css).

It's a collection of types and framework-agnostic functions used to compose CSS. It currently is in very, very early stage and requires some heavy work. It also uses csstype to be as consistent as possible with CSS evolutions.

Examples

With server-side CSS building :

import {
  backgroundColor,
  cssProperties,
  display
} from '@figouzes/falcon-css'

const generateCSS = cssProperties([
  display('inline-block'),
  backgroundColor([200, 255, 150])
])

With styled-components

import {
  backgroundColor,
  cssProperties,
  display
} from '@figouzes/falcon-css'

import { styled } from 'your-styled-components-framework'

const myComponent = styled`
  ${display('inline-block')}
  ${backgroundColor([200, 255, 150])}
`

With a JSS-style framework

import { rgba } from '@figouzes/falcon-css'

import { jss } from 'your-jss-like-framework'

const myElement = jss({
  display: 'inline-block',
  backgroundColor: rgba([200, 250, 150])
})