@rhizo/css v1.0.12

@rhizo/css

Rhizo for the css prop

npm i @rhizo/css

Rhizo CSS lets you write style objects with responsive, seed-aware Rhizo shortcuts.

// usage with the css prop
import React from 'react'
import css from '@rhizo/css'

const Beep = props =>
  <div
    {...props}
    css={css({
      fontSize: [4, 5, 6],
      color: 'primary',
    })}
  />

// usage with a styled HOC
import styled from '@emotion/styled'
import css from '@rhizo/css'

const Boop = styled('div')(
  css({
    fontSize: [ 4, 5, 6 ],
    color: 'primary',
    bg: 'gray',
    '&:hover': {
      color: 'secondary',
    },
  })
)

To make the css prop work with styled-components, babel-plugin-styled-components must be enabled.

Seed Keys

The following keys in your style object will work the same as Rhizo props, pulling values from your seed object.

Responsive Arrays

All CSS properties accept arrays as values for responsive styles.

<div
  css={css({
    fontSize: [ 4, 5, 6 ],
  })}
/>

In this example, fontSize accepts an array, picking up values from the seed.fontSizes scale, and borderBottom is passed through as plain CSS.

<div
  css={css({
    // Rhizo key
    fontSize: [ 3, 4, 5 ],
    // CSS property
    borderBottom: '2px solid tomato',
  })}
/>

MIT License