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

``bash npm i @slimr/styled`

`API`

`$3`

See npm for more info.

`typescript import {addCSs, createClass, css} from '@slimr/styled' addCss('.foo { color: purple }') c1 = createClass('c: red;') c4 = cssc: red;

c: red;} /> // will resolve to 's0' like above
c6 = cssw: [100%, null, 400px] // width = 100% on mobile and table, 400px on desktop
`
$3
Props to help style based on CSS state`typescript
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

`
$3
Some styles are available as shorthand -- all of them here.
`typescript
import {styled} from '@slimr/styled'
const MyDiv = styled.div
  _bgColor="blue"
  _c="green"
  _p={18}
  _pos="absolute"
  _w={100}
``
$3
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
`typescript
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
``
$3
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 '\_'
`typescript
import {Div, A} from '@slimr/styled'
 // a div with responsive padding
   // style props
   // stateful styles
    I grow during keypress and am green on hover
  

``
Comparisons
$3
- 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)
$3
- 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
$3
- 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
$3
- 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