@slimr/styled NPM

🪶 @slimr/styled

A tiny (~2kb) React css-in-js library inspired by chakra-ui, emotion, and styled-components libs

Features:

Easily create React components with styles using familiar syntax
Much less bundle size and runtime sluggishness than others
Supports declaring css and styled components inside of Components for better code colocating
Zx/Css shorthand props like chakra-ui
Concise responsive CSS syntax Breakpoints shorthand similar to chakra-ui
Import pre-enhanced HTML Elements like Div or A for profit

Context

@slimr is a set of slim React (hence '@slimr') libs. Check them all out on github!

Setup/Install

npm i @slimr/styled

API

Includes @slimr/css exports

See npm for more info.

import {addCSs, createClass, css} from '@slimr/styled'
addCss('.foo { color: purple }')
c1 = createClass('c: red;')
c4 = css`c: red;`
<div className={css`c: red;`} /> // will resolve to 's0' like above
c6 = css`w: [100%, null, 400px]` // width = 100% on mobile and table, 400px on desktop

ZX and Stateful CSS Props

Props to help style based on CSS state

import {styled} from '@slimr/styled'

const MyDiv = styled.div`
  _zx={{color: 'blue}} // applies color = blue
  _active={{color: 'blue'}} // applied on :active
  _dark={{color: 'blue'}} // applied when browser prefers dark modes
  _focus={{color: 'blue'}} // applied on :focus
  _focusVisible={{color: 'blue'}} // applied on :focusVisible
  _focusWithin={{color: 'blue'}} // applied on :focusWithin
  _hover={{color: 'blue'}} // applied on :hover
  _light={{color: 'blue'}} // applied on :light
  _target={{color: 'blue'}} // applied on :target
  _visited={{color: 'blue'}} // applied on :visited
`

Shorthand props

Some styles are available as shorthand -- all of them here.

import {styled} from '@slimr/styled'
const MyDiv = styled.div`
  _bgColor="blue"
  _c="green"
  _p={18}
  _pos="absolute"
  _w={100}

Responsive Props

Specify responsive styles as arrays, similar to chakra-ui

Default breakpoints are [30em, 48em, 62em, 80em, 96em] and can be overridden by setting css.breakpoints

import {styled} from '@slimr/styled'
const MyDiv = styled.div`
  _w=[100%, null, 200px] // width = 100% on mobile, tablet. 200px on > tablet
  _zx={{w: ['100%', null, '200px']}} // is equivalent to _w

Pre-Enhanced HTML Elements

Import pre-enhanced HTML Elements like Div or A for profit. With a few exceptions, most elements accept ANY CSS style as a prop when prefixed by '_'

import {Div, A} from '@slimr/styled'
<Div _p=[8, null, 18]> // a div with responsive padding
  <P _fontSize={30} _lineHeight="1rem"> // style props
  <A _active={{ scale: 1.5 }} _hover={{ c: 'green' }}> // stateful styles
    I grow during keypress and am green on hover
  </A>
</Div>