@slimr/styled

🪶 @slimr/styled

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

Demo: CodeSandbox

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>

Comparisons

Chakra-UI

• A popular css-in-js lib that inspired this lib

Pros

• More mature, SSR support
• Lots of premade components

Cons

• Is crazy large bundle impact (80+kb)

Styled-Components

• A popular css-in-js lib that inspired this lib

Pros

• More mature, SSR support

Cons

• Is massive (~12kb), plus has dependency on emotion (~11kb)
• Does not support zx prop or css shorthand props

Emotion

• A popular css-in-js lib similar to styled-components

Pros

• More mature, SSR support

Cons

• Is large (>10kb)
• Many features require addons, which make bundle even larger
• Does not support zx prop or css shorthand props

Goober

• another tiny 1kb styled-components like css-in-js

Pros:

• More mature, SSR support

Cons:

• Many features require addons, which in sum may make the bundle larger than slimr
• Does not support zx prop or css shorthand props