stylatx v1.0.1

Another small css in js lib.

Usage

You get two functions that you can play with:

• css
• createStyled

css

Creates rules in a global stylesheet and returns the related class names

// generate a class that will give a red background
const bgRed = css({ background: 'red' });

// create a class with variations by giving a function as style
const color = css(color => ({ color })); // returns a function
const colorGreen = color('green'); // generates the rule and returns a class name

// combine different styles
const misc = css(bgRed, colorGreen, { border: '1px solid black' })

// you can also add a custom class without any attached style
const myClassName = css('myClassName', { background: 'red' })

// nested objects will generate child rules
const parent = css({ '.child': { color: 'red' } })

// pseudo selectors
const hover = css({ ':hover': { color: 'red' } })

// media queries
const responsive = css({ '@media screen and (min-width: 300px)': { color: 'red' } })

createStyled

Creates a styled() function similar to styled-components.

To build it, you need to pass a render function with at least 3 params:

• Component: the component that will be rendered
• className: the class name generated by stylatx
• ...args: all the arguments that are passed to the function used to create elements in the view lib you use

Once you have it, pass a component to the function, you will get another function that will behave exactly like css() except the generated class name will be bound to your component.

import React from 'react'
import { createStyled, cs } from 'stylatx'

// styled function that will work with React components
const styled = createStyled((Component, className, props) => (
  <Component {...props} className={cs(props.className, className)} />
))

// create a div with a grey background
const GreyDiv = styled('div')({ background: 'grey' })

// create a div based on the previous one and make its text white
const WhiteGreyDiv = styled(GreyDiv)({ color: 'white' })

// a styled component .toString() gives their unique className
const Parent = styled('div')({ [GreyDiv]: { color: 'red' } })